1. Accessibility & Legislation
  2. Common Issues
  3. Testing & Tools
  4. Analysing Your Site

2.05.01 Colour usage: Colour blindness (colour wheel)

Who does it affect?

The difference in contrast between the background and foreground colours in images should be sufficient to allow users to perceive the image correctly without straining even if they have vision impairments like colour blindness.

Approximately 1 in 20 have some form of colour blindness. mostly males. The condition is sex-related and inherited. Women may carry the deficient gene but are usually unaffected by it.

Certain colour combinations may be difficult to see. Avoid using red-green and green-red colour combinations and make sure there is sufficient colour contrast.

The colour wheel image below was reproduced from an original at The Javascript Source. The copyright holder is no longer contactable.

Deuteranope

colour wheel depicting deuteranope colour deficiency Hover image to see effect of Deuteranope. Requires CSS for the image to change between normal and deficit.

A form of red-green colour deficit.

Protanope

colour wheel depicting protanope colour deficiency Hover image to see effect of Protanope. Requires CSS for the image to change between normal and deficit.

Another form of red-green colour deficit.

Tritanope

colour wheel depicting tritanope colour deficiency Hover image to see effect of Tritanope. Requires CSS for the image to change between normal and deficit.

A very rare condition consisting of a blue-yellow cone deficit.

What to do?

Try to avoid light colours for text on a light background, and dark text colours on dark backgrounds. Also consider common forms of colour blindness - Protanopia (red/green colour blindness), Deuteranopia (red/green colour blindness), and Protanopia (blue/yellow colour blindness), including many grey areas in-between. It is advisable to try and avoid these combinations, as information could be lost to some of your visitors.


Next: Example with a photo