Testing colour and contrast

Test that your web content does not rely on colour alone and that it has the required colour contrast ratios.

Testing contrast and use of colour is one of the most deceptively difficult tasks in a web accessibility evaluation.

WebAIM

For a quick overview of the sorts of checks required to test colour and contrast, see the WebAIM article Evaluating Color and Contrast — How hard can it be?

Test that colour alone is not relied on

  1. Carry out a visual inspection to identify any information that is being conveyed by colour. Pay particular attention to highly visual elements that use colour, such as graphs, diagrams, forms and form error messages, and the focus states of links and buttons. Viewing or printing the page in greyscale can help with this inspection.
  2. Check to see if that information is conveyed in another way that does not rely on colour — for example, through text, another visual mark, or a contrast ratio of at least 3:1.

Emulating colour vision deficiencies

Colour vision deficiency (CVD) emulators should not be relied on for testing if colour alone is being used to convey information. However, they can be useful for approximating how web pages will look to people with different CVDs.

Explicit visual inspection and consideration is required to confirm that information is also conveyed in ways that do not rely on colour.

CVD emulation tools

Chrome and Firefox developer tools include a CVD emulator:

Chrome and Firefox have web browser extensions that remove any vivid colours from the web page, including embedded videos:

There are also plugins for Chrome and Firefox for emulating different types of colour blindness:

Test for sufficient contrast

To check that web content has the required contrast, compare the relative luminance of an element’s foreground colour with that of its background or adjacent colours.

This is best done as a manual test by entering the respective colour codes into a contrast checking tool.

Note: A number of automated web accessibility testing tools, such as WAVE and Axe, do test web content for contrast, which is very helpful. But they cannot always tell whether some content meets contrast requirements. So a manual check for any missed failing colour combinations is always needed.

Identify the colours used

To identify the foreground and background or adjacent colours:

Confirm foreground and background colours are specified

When checking text for contrast, confirm that where the foreground colour is explicitly set by the developer, a background colour has also been set, and vice versa. If one has been set, but not the other, the text fails WCAG 2 Level AA Success Criterion 1.4.3 Contrast (Minimum).

Online tools for checking contrast

Offline tools for checking contrast

Browser-based tools for checking contrast

Anti-aliased fonts and colour pickers

Anti-aliasing is the blending of colours to make the edges of an element appear visually smoother.

When you are checking the contrast ratio for an element, avoid picking a colour in anti-aliased areas.

For more information on checking contrast of anti-aliased text, see Anti-aliasing — How to examine colour contrast — Accessibility Developer Guide.

Tools for testing gradients and background images

If you cannot use the tools above, you’ll need to do manual testing.

  1. Using a colour picker, identify the foreground and background or adjacent colours where there is the least contrast.
  2. Ensure that the content with the least contrast still meets contrast requirements.
    1. If the content is text, every part of the text that connects with the background must meet its minimum contrast ratio — either 4.5:1 or 3:1 (large text).
    2. If the content is a graphical object, the visual parts of the object that are minimally required for understanding it must have a minimum contrast ratio of 3:1.

Hover and focus states

Testing the hover and focus states of interactive controls is made easier by using browser developer tools.

All browser developer tools enable you to manually set an element to its :hover and :focus CSS pseudo-classes, at which point you can check the contrast ratios in those states.