2.1 Ensure that images have sufficient contrast for people with colour deficient vision
WAI checkpoint 2.2
Full WAI text: "Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text]."
The difference in contrast between the foreground and background colours used in any image should be sufficient for users to perceive the image correctly, including users who have impaired colour vision or who use a black and white screen.
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