3.1 Ensure that text and background have sufficient contrast for people with colour deficient vision

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 colour of text and the colour of the background should be sufficient for users to be able to read the text, including users who have impaired colour vision or who use a black and white screen.

Rationale

Not everyone can easily distinguish between close colour combinations and tones. Some users find it difficult to read text when the text and it's 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, e.g. a scarf could be "red". Lightness is tonal quality, e.g. the scarf could be red but described as "dark red". Saturation is the amount of colour, e.g. 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.

Examples of high and low contrast between text and background colours

High and low contrast text

Ensure that foreground and background colour combinations provide sufficient contrast when viewed by a person with colour deficits or when viewed on a black and white screen.

Directions and Techniques

Understand how colour contrast is perceived

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

How you could check for this:

View the page on a monochrome monitor

This will give show how the page would look without colour and you can determine if colour differential 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 don't print background colours which could be displayed behind the main body of text on the page.