Testing colour and contrast
Test that your web content does not rely on colour alone and that it has the required colour contrast ratios.
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
- 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.
- 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.
Both Chrome and Firefox developer tools include ways to approximate how web pages will look to people with various colour vision deficiencies:
- Emulate vision deficiencies — Chrome Developers
- Color vision simulation in Firefox Developer Tools —MDN Web Docs
- YouTube video: Testing Color Contrast & Simulating Color Blindness with the Firefox Accessibility Inspector — Mozilla Developer
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:
- inspect the page’s source code and CSS to find the colours applied to the elements in question
- use a tool with a colour picker or eyedropper to identify the colours used at the screen pixel level.
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
- Contrast checker — WebAIM: Check the contrast of colours in hexadecimal format — this tool includes a colour picker.
- Contrast ratio — Lea Verou: This tool accepts all colour formats that CSS uses, including rgb() and hsl(), as well as semi-transparent colours using rgba() and hsla().
- Tanaguru contrast finder — Tanaguru: Given 2 colours with insufficient contrast, this tool will suggest a different foreground or background colour that is close to the original, but that meets contrast requirements.
Offline tools for checking contrast
- Colour Contrast Analyser (CCA) — TPGi: Offline application for macOS and Windows that checks the contrast of colours entered in hexadecimal or RGB formats. This tool includes a colour picker.
Browser-based tools for checking contrast
- Chrome DevTools Color Picker — Google Developers: A built-in contrast checker in the colour picker enables you to test contrast ratios and to change colours on the fly to see if they pass WCAG (Web Content Accessibility Guidelines) AA or AAA conformance.
- Firefox Accessibility Inspector Check for contrast issues — MDN Web Docs: A built-in contrast checker that scans the page and lists the individual contrast errors it finds.
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
- Color Contrast Analyzer for Chrome — NC State University: Analyse screenshots of web pages to determine, pixel-by-pixel, where the contrast changes enough to pass a given WCAG 2.0 conformance level — this tool is useful for analysing text within images, and text that is placed over the top of background images or gradients.
- Text on background image a11y check — Brandwood: Test the contrast of text in one colour against any background image.
If you cannot use the tools above, you’ll need to do manual testing.
- Using a colour picker, identify the foreground and background or adjacent colours where there is the least contrast.
- Ensure that the content with the least contrast still meets contrast requirements.
- 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).
- 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
:focus CSS pseudo-classes, at which point you can check the contrast ratios in those states.
- In Chrome and Microsoft Edge: Checking Hover and Focus States in Chrome DevTools — WebAIM
- In Firefox: Viewing common pseudo-classes in Firefox DevTools — MDN Web Docs