Don't rely on colour alone

These checkpoints are all about using and choosing colours so that you do not cause problems for people who are colour-blind, have a monochrome screen or a non-visual display.

The checkpoints are:

• Make sure that all information conveyed with colour is also available without colour [Priority 1]
• Make sure that the foreground and background colour combinations provide sufficient contrast for someone who has colour deficits or who uses a monochrome screen [Priority 2 for image, Priority 3 for text]

Why the checkpoints are important

If your page conveys information just by colour, people who can't identify or distinguish colours will find it difficult to understand the information. For example, you have two buttons on the page that are the same size and shape. One button is green, the other red. Asking users to click the green button to continue is no use if they can't tell which button is the green one. You need to provide another way of making the information available.

Foreground and background colours that are too similar in hue may not provide sufficient contrast. Some colour combinations, such as red text on a green background, are difficult to differentiate.

Some people also find it difficult to read 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.

If you choose colours badly, problems such as invisible text and navigation can make sites unusable.