Contrast and the use of colour

Background

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.

Requirements

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.

1.4.3 Contrast

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:

  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.
WCAG 2.0 success criterion 1.4.3

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.

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

See WebAIM’s blog post on WCAG 2.0 and link colours, as well as WCAG 2.0 Common Failure F73, for more information.

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

Tools

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.

Offline tools for checking contrast

Other tools

Other resources