Contrast and the use of colour
It is important to consider how you use colour in your online content (web pages, PDFs, or other online material) to ensure that people with colour blindness, colour vision deficiencies, partial sight or low vision, can access all the information in that content.
The New Zealand Government Web Accessibility Standard requires that web pages conform to Web Content Accessibility Guidelines (WCAG) 2.0. This includes two WCAG 2.0 Success Criteria related to the use of colour.
1.4.1 Use of colour
WCAG 2.0 Success Criterion 1.4.1 requires that colour “is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
If colour is the only way that specific information is provided, then this information won’t be available to users who are unable to see or easily differentiate between colours.
Examples of conveying information by colour alone include:
- displaying links in a different colour, but not providing any other visual cues, e.g., an underline
- indicating errors simply by highlighting them in red
- showing required form fields in another colour without any other indication, e.g. an asterisk
- distinguishing elements in a graph with only differently coloured lines.
One of the most common ways to address this issue is to ensure that where information is conveyed by colour differences, that same information is also available in text or through another visible indicator, e.g. an underline, a pattern, a shape.
See also WCAG 2.0 Technique G182.
Testing the use of colour requirement
- Carry out a visual inspection of the page or resource to identify any information that is being conveyed only by colour.
- Viewing/printing the page in greyscale (black and white) can assist with this inspection.
- Pay particular attention to elements that are often problematic in regard to use of colour, such as graphs, diagrams, forms and form error messages.
- There are a number of tools that help show how users who are colour blind or have difficulty viewing colour will see your page. See the Tools section below.
WCAG 2.0 Success Criterion 1.4.3 requires that the “visual presentation of text and images of text has a contrast ratio of at least 4.5:1.”
The aim of this requirement is to ensure that there is enough difference in the lightness, or relative luminance, of text and background so that the text is readable by people with low vision and those who have difficulty seeing colours.
Colours can be defined (in the HSL colour model) using three attributes: hue, saturation, and lightness (or luminance). While changes in hue and saturation tend not to affect the legibility of text for people with colour vision deficiencies, changes in lightness can. For this reason, a good luminance contrast ratio is essential for assisting with the readability of content for those with relevant vision impairments. If that includes a large portion of your target audience, then a higher luminance contrast ratio of 1 to 7 is recommended.
There are 3 exceptions to this requirement:
While “large text” is defined as text in a 14pt bold or 18pt font, how this translates to text on a screen will vary quite a bit depending on the font and device used. However, a good rule of thumb for most standard fonts is that 14pt is more or less equivalent to 19px, and 18pt to 24px.
Testing the contrast requirement
- Testing requires that you can determine the relative lightness or luminance of the foreground text and the background.
- In most cases, it’s relatively easy to determine the relative lightness, either by inspecting the page’s source code and/or CSS and inputting the relevant colour codes into a contrast checking tool, or by using one of the tools that have colour pickers built-in, such as the Contrast Analyser listed in Tools below.
- The returned values can then be compared to ensure the contrast ratio meets the requirement. Any of the contrast tools listed below will allow you to calculate the luminance (sometimes called luminosity) contrast ratio.
If you don’t underline links or provide them some other non-colour visual indicator in their default state, then both colour requirements, 1.4.1 and 1.4.3, apply.
This means a link’s colour must have:
- at least a 4.5:1 luminance contrast ratio with the background colour, and
- sufficient contrast, on the order of 3:1 or higher, with surrounding non-link text.
Meeting the above two requirements can be difficult to achieve: there are a very limited number of compatible colour combinations available. See WCAG 2.0 Technique G183 for more details.
Links need to be visible and obvious, otherwise they can blend with the text and become invisible. Often links that aren’t underlined in their default state will be underlined in their hover state. However, underlines on hover state won’t work on mobile devices.
Our recommendation is that you underline your links in their default state in all body copy. Alternatively, consider increasing the font weight of the link, or using a visual cue other than colour.
Consider visual cues in form design too.
Avoid labelling required fields with coloured text only. Indicate required fields with supporting text, or a symbol such as an asterisk, within the label’s
label element itself.
Similarly, do not identify form fields that have errors simply by, for example, highlighting them in red. Instead, indicate and identify the error with text. A smart way to do this is to include the error message text in the form field’s
label element. This ensures that screen reader users will know the field contains an error when they set focus to that field and its label text, including the error message, is read out to them.
High contrast version
If your page, site or resource doesn’t meet the colour contrast requirements, it is still possible to comply with the contrast requirement by providing an alternative version of the page, site or resource.
This is typically achieved by having a link or similar control that switches to the “high-contrast” view.
For this approach to be acceptable:
- The link to the alternative version of the non-conforming page must itself meet the contrast requirement — otherwise, users may not be able to perceive it properly.
- The alternative version of the page must contain the same information and functionality as the non-conforming page.
- The alternative version of the page must comply to all the other requirements of the Web Accessibility Standard.
For more information, see WCAG 2.0 Technique G174.
Online tools for checking contrast
These normally require the user to enter the hexidecimal numbers for the two colours being compared, or to select colours using a picker or dropper.
- Juicy Studio Luminosity Colour Contrast Ratio Analyser
- WebAIM colour contrast checker
- Colour Contrast Check (snook.ca)
- MSF&W Contrast Ratio Calculator
- Tanaguru Contrast-Finder
- Lea Verou's Contrast Ratio
Offline tools for checking contrast
- Contrast analyser (for Windows and Mac)
- Juicy Studio Accessibility toolbar(Firefox addon) Checks contrast ratios for a whole web page based on the colour values assigned via the page’s CSS. Note: Also available for Internet Explorer through the Web accessibility toolbar.
- Color Contrast Analyzer for Chrome Analyses screenshots of web pages to determine, pixel-by-pixel, where the contrast changes enough to pass a given WCAG 2.0 conformance level. Useful for analysing text within images, and text over top of background images or gradients.
- Color Oracle is a free color blindness simulator for Windows, Mac, and Linux.
- Colorblind Web Page Filter
- Last modified: