DEV 1.4 Create contrast between foreground and background

Recommendations

• Use good luminance (brightness) contrast to differentiate foreground and background:
  • Avoid relying on colour contrast alone;
  • Avoid the following combinations:
    • Light text & light background,
      • e.g. white on grey,
    • Dark text & dark background,
      • e.g. deep red on black,
    • Red & green combinations;
• Avoid using complex backgrounds and patterns.

Tip: A simple test of contrast is to view your page in greyscale - if anything looks faint or difficult to read to you then it probably does not have enough contrast.

Tip: There are several free online tools that can assist you to test that you have sufficient contrast and that your page will work for people who are colour blind, these include Vischeck, the color contrast analyser and colour doctor.

Note about CSS: In CSS always define both foreground and background colours - this avoids problems when people use their own style sheets or use software to change the default colours used.

Examples