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.

Scope brand colours of bright purple, dark purple, yellow, teal and off white used in different combinations. All are compliant except yellow and white and teal and white. Bright purple and teal is only AAA compliant with large text.

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.

4 squares. Top 2 squares show high contrast with white and black with contrast ratio 21:1 and bright yellow and dark blue, contrast ratio 17.6:1. Bottom 2 squares show low contrast with green and bright blue with a contrast ratio of 1.6:1 and grey on a draker grey with 1.9:1 contrast ratio.

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

Content accessibility training

1 day of accessibility basics, supported by our expert. Train up to 16 people and get a comprehensive understanding of accessibility. Become more confident with using best practices.

Read more