DEV 1.4 Create contrast between foreground and background

Poor contrast will prevent some people from seeing your information due to their visual capabilities or the device they are using.

  • 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 andbackground colours - this avoids problems when people use their own style sheets or use software to change the default colours used.

Poor: Avoid low contrast, complex backgrounds and red/green combinations