2.1 Ensure that images have sufficient contrast for people with colour deficient vision

Rationale

Not everyone can easily distinguish between close colour combinations and tones. Some users find it difficult to read content, recognise objects or select items from a list when the item and the background are similar in tone, even if the colours are different. This particularly affects older users or those who have some form of colour-blindness.

Users may also find it hard to distinguish between colours if they use a poor quality or monochrome screen.

Colour has three attributes which determine how people perceive it - hue, lightness and saturation. Hue is the basic perceived colour, essentially the name of the colour - a scarf could be "red". Lightness is tonal quality - the scarf could be red but described as "dark red". Saturation is the amount of colour - the scarf is "very red". As colours become less saturated, they move toward being either black or white. Colour schemes which achieve clear differentiation in all three attributes provide the greatest contrast. Peoples' perception of the contrast of colour is bound up in their ability to perceive any or all of the three attributes, and this varies greatly. You should never assume that if you can clearly perceive a colour combination as being a good contrast then others will too.

Directions and Techniques

Understand how colour contrast is perceived

For more information on how colour choice affects perceived contrast, see Lighthouse.

Refer to the WAI recommended techniques for this guideline

See the WAI recommended techniques for providing sufficient contrast

How you could check for this:

View the page on a monochrome monitor

This will show how the page would look without colour and you can determine if colour differentiation is essential for understanding the information.

Print the page on a black and white printer

This will provide some indication of how the page would look without colour. However, this is not a foolproof test. Most browsers are configured so they do not print background colours which could be displayed behind the main body of text on the page.

Test with Vischeck

Vischeck is a piece of software which can emulate how an image or page would appear to a user who is colour blind. You can get Vischeck at http://www.vischeck.com

- View WAI checkpoint 2.2