Colour contrast matters if you want to make your workplace and website accessible. Document and website content need to have enough contrast between the text and background. If they have low contrast, it creates barriers for people with sight loss or colour blindness. This makes it hard for them to get the information they need.
Research by the NHS shows that about 1 in 12 men and 1 in 200 women have colour vision deficiency. 2 million people in the UK live with sight loss.
Colour vision deficiency (NHS)
Information and statistics on sight loss (RNIB)
What do contrasting colours mean?
Colour contrast is the difference in brightness between the foreground and background colours.
Low contrast happens when 2 colours are too similar or are difficult to tell apart. For example, yellow and orange.
High contrast happens when 2 colours are very different from one another. For example, black and white.
To measure the difference, you have a contrast ratio. A 1:1 ratio shows no contrast, for example a white background with white text. A 21:1 ratio shows a high contrast, for example black text on a white document.
The first number is the ‘luminance’ of the lighter colour. The second shows the brightness of the darker colour. Using colour combinations with good contrast is important for being accessible. Check your colour contrast when:
- designing brand colours and logos
- creating website content, like buttons, link text, headings and so on
- making PowerPoint presentations and writing emails
- adding text to an image or coloured background
WCAG colour contrast criteria
There are legal guidelines on how much contrast 2 colours should have. These are in the Web Content Accessibility Guidelines (WCAG).
WCAG has 2 levels of compliance: AA and AAA. The AA standard is considered the legal minimum. WCAG colour contrast AA criteria says you need to have a minimum ratio of:
- 4.5:1 for ‘normal text’. This is text size under 18pt or 14pt bold
- 3:1 for ‘large text’ and graphical objects. Large text is above 18pt or 14pt bold
If you want to be more inclusive, aim for the AAA WCAG standard. Text with a colour contrast ratio of 7:1 is easy to read for most people.
Colour contrast checkers and examples
There are some colour combinations that you should avoid altogether. Text that is the same colour as its background is an obvious example, but there are others.
For example, bright red text on a white background has a colour contrast ratio of 3.99:1. This colour is often used in documents and emails making them inaccessible. Other commonly used low contrast colours include white with:
- orange
- yellow
- pale blue
- grey
- pale green
- teal
The WebAIM contrast checker is a free tool that makes it easy to check your contrast. You can paste the hex code or click the colour box to add red, green and blue (RGB) numbers. It also has a colour picker.
You can also use:
Glare
Avoid black text on a white background. Off-white or pale pastel coloured backgrounds are better as they reduce glare.
Not relying on colour to display information
Do not rely on colour to display information. This makes content more accessible to those who are colour blind. It can also help those who may not be able to access or understand information from colour alone.
Businesses can use a variety of visual elements without only relying on colour. You can do this by:
- using different font sizes, and font weights
- use different shapes and symbols
- use different patterns and textures
Quick tips for accessible colour contrast
When using colour, remember:
- use the WCAG criteria to make sure your colours are accessible
- check all colour combinations using a colour contrast checker
- check contrast ratio of non-text elements, like images, charts, graphs and so on
- avoid colour combinations that feature tints of the same colour as they can be very difficult to distinguish