Skip to main content

Colour contrast

There should be sufficient contrast between colours on all elements of the page, including pie charts, diagrams and images.

Contrast should be 3:1 for large text (18pt plain/regular text and higher, or 14pt bold text and higher), 4.5:1 for all other text. This applies even if text is overlaid on a visual and can be read programmatically (ie not part of the image itself).

Graphical objects should have at least 3:1 contrast against the background.

What and why: Poor contrast can make text hard to read and the relationship between elements hard to understand for many people, such as those with dyslexia or visual impairments.

How to check colour contrast

Using the WebAIM Contrast Checker

The WebAIM Contrast Checker is probably the easiest tool for checking whether your text and graphics meet contrast requirements. It can be used to check the colour contrast of anything you see on your screen even if it's not in a browser window.

  1. Ensure the item you want to check is visible on screen.
  2. Open the WebAIM Contrast Checker in a separate browser window, not just in a different tab in the same browser window for example.
  3. In the 'Foreground Color' section, select the colour picker that follows the hex code input field.
  4. Select the eyedropper tool. Your pointer will now turn into a circle of magnified pixels.
  5. Centre your magnifier over the object you're testing and select a pixel that best represents the colour of the object you're testing.
  6. Now in the 'Background Color' section, select the colour picker that follows the hex code input field.
  7. Centre your magnifier over the background of the object you're testing and select a pixel that best represents the colour of the background. If there are multiple colours, test the one that looks like it has lowest contrast with the foreground object you're testing.
  8. Look at the contrast ratio on the WebAIM Contrast Checker page. Depending on what you're testing, your colour combination should state 'Pass' against 'WCAG AA' for the 'Normal Text' and 'Large Text' headings, or the 'Graphical Objects and User Interface Components' heading.

Other methods

Tools such as Chrome/Firefox browser extensions and Microsoft Paint can help in determining colour values, if you struggle to use the WebAIM checker.

Alternatively, Colour Contrast Analyser is a free program that, like the WebAIM checker, allows you to easily check contrast of anything you can see on your screen.

Combining line styles and fill patterns with colour

In things like graphs and charts, applying line styles and fill patterns can make it easier to visually separate information alongside good colour contrast.

For example, a line graph that has a solid line, dotted line and dashed line as well as those lines being red, yellow and blue could be easier for a colour blind person to interpret because the line style is communicating the difference between them, not just the colour.

Accessible use of colour

Colleague Clare Gordon has created an extremely helpful overview of colour choice, Accessible use of colour for teaching materials, containing advice that applies to all kinds of content. Please consult this advice when using colour. Some of the key points are:

  • Don't rely completely on colour.
  • Use limited colour palettes where possible.
  • Choose perceptually uniform colour maps.
  • Check your colours before finalising your work.