Skip to main content
Abi Harrison-Nye home page
More display settings
More display settings

Colour Contrast

Last updated

Websites, social media images, and out-of-home advertising should have a good colour contrast between text and background colour.

What’s in it

What is it for?

Websites, social media images, and out-of-home advertising should have a good colour contrast between text and background colour. That includes links, icons, buttons and any other information. An example of poor colour contrast is light grey text on a white background.

It is useful for, but not limited to, the following people:

  • People with vision impairments
  • People with colour vision deficiency (also known as colour blindness)
  • Elderly people
  • People with cataracts
  • People in different lighting situations (e.g. sun glare on a phone screen)

It's also worth noting that anything that is indicated by colour also needs to have a secondary way for it to be distinguished. For example, it's no good saying "use the green button if you agree or the red button if you don’t” by itself, as some people may not be able to distinguish between those two colours.

The science behind checking if colours are contrasting enough is complex, but you don't need to understand how contrast is calculated in order to use sufficient colour contrast. Colour contrast refers to the difference in luminance (brightness) between the foreground (text) and background colours. Contrast ratios go from 1:1 (no contrast, such as white on white) to 21:1 (black on white). The higher the number, the bigger the difference.

The general rule is that text and images of text must have a contrast ratio of at least 4.5:1. Large text (18 point / 24px or larger, or 14 point / about 18.66px or larger if bold) can have a contrast ratio of 3:1, although it's generally better to aim for a higher contrast.

How to support it

Choose colours with sufficient contrast. There are lots of colour contrast checkers online, including:

To use these, enter your background colour and foreground colour. You want to make sure that it gives you a contrast ratio that is 4.5:1 or higher (so 6:1 is good, 2:1 is bad). It may also show you separate results for AA and AAA, for normal and large text (as shown in the image below). Web Content Accessibility Guidelines (WCAG) AA level is the lower of the two requirements and is the usual minimum to meet. If your text can comply at AAA level, even better.

Picture: An image showing black text on a yellow background, passing at AA and AAA level for both normal and large text

Useful links