DES 1.4 Create contrast between foreground and background
Recommendations
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;
- Light text & light background,
- Avoid using complex backgrounds and patterns.
Tip: A simple test of contrast is to simply 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.
Examples
