Colour contrast accessibility

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 if you want to be 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:

• Accessible colour palette builder
• WCAG colour contrast checker chrome extension

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
• do not rely on colour alone to highlight important information
• check contrast ratio of non-text elements, like images, charts, graphs and so on