Colour contrast between text and background is important on web pages. It affects some people’s ability to perceive the information (in other words to be able to receive the information visually).
Everyone who can see, sees things in different ways. The human eye and brain is very good at distinguishing shapes, patterns and colours generally, but for a significant number of people (myself included) there can be difficulties distinguishing some shades, or some colours. The term colour blindness is used, but that may be misleading, and colour vision deficiency is better.
Around 1 in 12* men and 1 in 200* women have some degree of colour vision deficiency. Complete colour blindness (or monochromatic vision) is extremely rare. See NHS choices Colour vision deficiency page for more information.
If you can see the number 74 in the main image above, you may have normal colour vision (but this is only one test), and if you can see 21 like me, you may have a red-green colour vision deficiency.
How colour contrast affects web design
There are two issues that need to be addressed:
- anything that is indicated by colour needs to have a secondary way for it to be distinguished - for example it is no good saying “use the green button if you agree or the red button if you don’t” by itself
- for text to be readable or other elements to be distinguishable they need to have sufficient contrast with the background.
This isn't just for people with a colour vision deficiency, it affects everyone in different ways:
- The amount of light that reaches the back of the eye reduces as a natural part of ageing
- Screens vary widely in size, resolution and contrast
- Reading in bright conditions is much harder because contrast is lower.
There are tools that can be used to measure this and one that I use regularly is the free Paciello Group colour contrast analyser.
Examples of bad and good colour contrast
In the following example there are orange text links and an orange button with white text, that have low colour contrast (in this case a contrast ratio of 3.1:1 which is well below the recommended minimum of 4.5:1):
In the next example there is a green button with white text that has good colour contrast (with a contrast ratio of 4.9:1 which is above the recommended minimum of 4.5:1):
Things aren’t always what they seem
Don’t rely on just a visual check of colour contrast. It can help for finding obvious issues, or things that are obviously not a problem, but I know that I don’t see things in the same way as everyone, and even with good vision the mind can play tricks. My favourite optical illusion demonstrates this:
If you look carefully at the squares marked A and B they appear to be clearly different colours, or rather shades of grey, but if you check the colour with the colour contrast tool, you will find that both squares are exactly the same colour. The shadow cast by the cylinder tricks the eye and brain into getting this wrong.
*http://www.nhs.uk/conditions/Colour-vision-deficiency/Pages/Introduction.aspx colour vision deficiency.