Colour and contrast

It’s 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.

See the latest guidance on colour and contrast

This page is currently out of date — for the latest guidance on this topic, see:

Accessibility standard requirements

The New Zealand Government Web Accessibility Standard requires that web pages conform to the Web Content Accessibility Guidelines (WCAG) 2.1.

New Zealand Government Web Accessibility Standard

Web Content Accessibility Guidelines (WCAG) 2.1

This includes 3 WCAG 2.1 success criteria related to the use of colour:

1.4.1 Use of colour

WCAG 2.1 success criterion 1.4.1 — Use of colour

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, such as an underline
  • indicating errors simply by highlighting them in red
  • showing required form fields in another colour without any other indication, such as 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, where information is conveyed by colour differences, that same information is also available in text or through another visible indicator, such as an underline, pattern or shape.

WCAG 2.1 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 or printing the page in greyscale (black and white) can help 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.
  • A number of tools can help you see how users who are colour blind or have difficulty viewing colour will see your page.

Tools

1.4.3 Contrast

WCAG 2.1 success criterion 1.4.3 — Contrast (Minimum)

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 3 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 people with relevant vision impairments. If that includes a large portion of your target audience, then a higher luminance contrast ratio of 7:1 is recommended.

HSL colour model

There are 3 exceptions to this requirement:

  1. Large Text: Large-scale text and images of large-scale text need to have a contrast ratio of at least 3 :1;
  2. Incidental:Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  3. Logotypes: Text that is part of a logo or brand name has no minimum contrast 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 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.

1.4.11 Non-text contrast

WCAG 2.1 success criterion 1.4.11 — Non-text Contrast

Success criterion 1.4.11 requires that active controls (for example, links, buttons, form fields) have a sufficient contrast ratio of 3:1 against surrounding colours for users to identify them and how they operate. Any visual effects used to indicate a control's state (for example, whether it’s selected or focused), must also have a 3:1 contrast ratio against adjacent colours.

Graphical objects must have a 3:1 contrast ratio against adjacent colours for users to understand what they are or the meaning they communicate. Graphical objects include things such as standalone icons (for example, print icon with no text) and the important parts of complex diagrams (for example, each line in a graph). Only graphical objects that users need to understand are required to have sufficient contrast with their surrounding colours.

Understanding Success Criterion 1.4.11: Non-text Contrast

Testing for contrast

  • Testing requires that you can determine the relative lightness or luminance of the foreground colour and the background or adjacent colour.
  • 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 1 of the tools that have colour pickers built in, such as the Contrast Analyser listed in the Tools section 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.

Special cases

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 2 requirements can be difficult to achieve: there are a very limited number of compatible colour combinations available.

WCAG 2.1 technique G183

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.

WebAIM’s blog post on WCAG 2.0 and link colours

WCAG 2.1 common failure F73

Forms

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’s 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.

WCAG 2.1 technique G174

Tools

Online tools for checking contrast

Offline tools for checking contrast

Other tools

Utility links and page information

Was this page helpful?
Thanks, do you want to tell us more?

Do not enter personal information. All fields are optional.

Last updated