Colour Contrast Testing

Good colour contrast in your content is important for people with vision impairments. It can make the difference between perceiving and interpreting your content (visuals and text) and not.

Colour Contrast

Colour contrast measures the difference in brightness between foreground and background colours – usually the colour of text and the background behind it.  Web Content Accessibility Guidelines (WCAG) 2.1 colour contrast guidelines require the following:

  • Large text must have a colour contrast of 3.0:1 or higher. (Large text is defined as any of: 1.5em, 18pt, 24px, 1.2em bold, 14pt bold, 19px bold, or larger.)
  • Small text must have a colour contrast of 4.5:1 or higher.
  • Icons must have a colour contrast of 3.0:1 or higher.
  • Logos are exempt from colour contrast guidelines.

There are two common colour contrast assessment tools that are explained below: TPGi Colour Contrast Analyser and Chrome Color Picker.

TPGi Colour Contrast Analyser

The TPGi Colour Contrast Analyser (CCA) can be used to sample any colours you can see on your screen. As a result, it can be used to test any kind of digital content, including web pages, Word documents, PDFs, etc. To use it, do the following:

  1. CCA has two eyedroppers – one to sample foreground colours and one to sample background colours.
Colour Contrast Analyser has eyedroppers for picking foreground and background colours
  1. Select the first eyedropper, and then click on the darkest pixel (that you can find) in the text.
The first eyedropper can be used to sample foreground colours
  1. Select the second eyedropper, and then sample the background colour (white space in this case).
The second eyedropper can be used to sample background colours
  1. CCA will display the contrast ratio.
The Contrast ratio is displayed after sampling two colours

In this example, the colour contrast is 10.4:1 and clearly passes the minimum colour contrast as set out by WCAG 2.1.

Chrome “Color Picker”

In the Chrome browser, the DevTools panel includes a “Color Picker” feature. To use it, do the following:

  1. Find the element (text or icon) you’d like to test, right-click on it, and select Inspect.
  2. In the DevTools panel, select the Elements tab (unless it’s already selected).
  3. Click the colour square next to the element’s color value in the Styles pane.
In Chrome DevTools, you can inspect an element and see its colour value
  1. Have a look at the Contrast ratio section of the Color Picker. It will display the element’s contrast ratio. One checkmark means that the element meets the WCAG single A recommendation (4.5:1). Two checkmarks means that it meets the WCAG double A recommendation (7.0:1).
When you click the colour square, the Contrast ratio is displayed
  1. You can also use the eyedroppers to test other colours you see on the page. The eyedropper for foreground colours is above the hex code. The eyedropper for background colours is in the collapsed section under the Contrast ratio.
Eyedroppers can be used to sample foreground and background colours




Icon for the Creative Commons Attribution 4.0 International License

eCampusOntario's Digital Accessibility Toolkit Copyright © by eCampus Ontario is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.

Share This Book