Colour contrast: accessibility for content authors

  • Author: Access iQ ®
  • Date: 21 Jan 2013
  • Access: Premium

Quick facts

  • Sufficient colour contrast between text and its background assists people with moderately low vision to read your text.
  • The contrast between the colour of text and its background must meet colour contrast requirements defined in WCAG 2.0.
  • Although logos are exempt from colour contrast requirements, the use of logo or brand colours in text must still meet colour contrast requirements.

People who are colour blind, vision impaired, or who have an age-related impairment often struggle to read text when there isn't enough contrast between the colour of the text and its background. Guideline 1.4 Distinguishable focuses on ensuring that the way information is presented normally on a screen is accessible, which includes colour contrast.

If your website has been designed to meet WCAG 2.0, the colours used in the templates should already be accessible so you don't need to worry. Instances when you will have to pay attention to colour contrast requirements may include:

  • when manually changing text colour, such as the colour of a text heading
  • when manually changing background colour, such as the background colour of a table cell
  • when there is text within an image, such as a text label on an axis of a graph

There are two levels of colour contrast to consider, depending on the level of accessibility you are aiming to achieve:

  1. There are minimum colour contrast requirements for those meeting WCAG 2.0 Level AA compliance and
  2. enhanced colour contrast requirements for those meeting WCAG 2.0 Level AAA compliance, which is the highest level of accessibility.

Colour contrast requirements

There are two levels of colour contrast requirements: one for Level AA and one for AAA.

The colour contrast requirements are expressed as a contrast ratio. You can test the contrast ratio between text and background behind text using one of the free colour contrast checkers described below.

Minimum colour contrast

Success Criterion 1.4.3: Contrast (minimum) defines the colour contrast requirements to meet Level AA compliance. The minimum colour contrast requirements that must be met are:

  • Text and images of text must have a contrast ratio of at least 4.5:1 except for large text.
  • Large text that is 18pt normal or 14pt bold or larger must have a colour ratio of at least 3:1.

Flowchart of colour contrast requirements to meet WCAG 2.0 Success Criterion 1.4.3.

Note: this applies to text in images, such as axis labels and legends on graphs.

Enhanced colour contrast

Success Criterion 1.4.6: Contrast (enhanced) defines colour contrast requirements to meet Level AAA compliance. The enhanced colour contrast requirements that must be met are:

  • Text and images of text must have a contrast ratio of at least 7:1 except for large text.
  • Large text that is 18pt normal or 14pt bold or larger must have a colour ratio of at least 4.5:1.

Flowchart of colour contrast requirements to meet WCAG 2.0 Success Criterion 1.4.6.

Note: this applies to text in images, such as axis labels and legends on graphs.

How to check colour contrast

There are a number of free colour contrast checkers available that will measure the contrast ratio between text and its background. These tools allow you to quickly and easily determine if your text meets the colour contrast requirements for Level AA and AAA.

One of the most popular and easy-to-use tools is the Colour Contrast Analyser for Windows and Mac from The Paciello Group. This tool is a standalone desktop application that can be downloaded and installed on your computer.

The Colour Contrast Analyser has a very handy inbuilt eyedropper tool for selecting the colour of your text (referred to as foreground) and the background colour behind the text. The eyedropper tool allows you to select colours from any document or webpage, including a webpage open in a web browser or a PDF open in Adobe Reader.

Screenshot of Colour Contrast Analyser tool.

In order to view the contrast information, you must select "Luminosity" not "Colour/Brightness difference" from the results options. This will display the contrast ratio between the foreground and background colours you have selected. It also identifies if your text meets colour contrast requirements for normal text (< 18pt or 14pt bold) and large text (> or equal to 18pt or 14pt bold) for both Level AA and AAA requirements.

Instead of using the eyedropper tool, you can also enter the hexadecimal reference (more commonly referenced to as a hex reference) for the foreground and background colour. Hex references are used to identify colours on a webpage. Entering the hex reference instead of using the eyedropper tool may give slightly more accurate results.

Other free online colour contrast checkers such as the Colour Contrast Check from snook.ca and the Juicy Studio Luminosity Colour Contrast Ratio Analyser also allow you to enter hex references for text and background colour to check if they meet colour contrast requirements for WCAG 2.0. However, these tools do not include an eyedropper.

Tips for testing colour contrast

When testing colour contrast, you can ensure the most accurate result by doing the following:

  • Colour sampling with the eyedropper tool: Make sure to select the middle of the text where the colour is solid, not the edges of the text because this could give a false result.
  • Text on gradient backgrounds: Select the lightest part of the gradient background.
  • Text on images: Select the lightest part of the background image.

Note: Although there are no specific requirements within WCAG 2.0 that prohibit using images behind text, users with vision impairment often report that it is difficult for them to read text on images, even if it meets colour contrast requirements. It is best to have a solid background behind the text.

The words "Fresh fruit" in light green on a solid dark green background overlaid on a photograph of fruit.

Additional information and exemptions

There are a number of exemptions and conditions to colour contrast requirements that need to be considered, including the use of logos, decorative and incidental text, and lightweight fonts.

Logos

Text that is part of a logo or brand name is exempt from colour contrast requirements for both Level AA and AAA.

Brand colours that are used within a logo are often also applied to text within webpage or document content, such as heading colours. Although logos may be exempt from colour contrast requirements, if these colours are used for text content, then that text must meet colour contrast requirements.

Let's look at how Woolworths use their logo or brand colours within their website.

Screenshot of Woolworths homepage and Colour Contrast Analyser results with headings outlined in red.

The Woolworths logo is made up of two brand colours, a dark green for the text "Woolworths" and a light green for the tagline "Australia's fresh food people".

The light green has been used for headings on the Woolworths homepage. Using The Paciello Group's Colour Contrast Analyser to test the contrast between the light green text and the background colour behind that text, we get a contrast ratio of 2.3:1.

The use of the light green for headings does not meet minimum contrast requirements for either normal or large text, which means the Woolworths website does not currently meet the requirements for Level AA compliance.

Decorative and incidental text

Decorative text and incidental text is also exempt from colour contrast requirements.

Decorative text is text that is included purely for aesthetics and provides no information.

WCAG 2.0 states:

"…text is only purely decorative if the words can be rearranged or substituted without changing their purpose."

Text can also appear as part of an image that has other visua elements, such as a photograph that includes a sign with text that is visible. This is considered incidental text and is exempt from colour contrast requirements.

A beach with a sign that reads "No lifeguard on duty. Swim at your own risk."

Lightweight fonts

Lightweight fonts with extremely thin strokes or fancy fonts with decorative serifs for example, can be difficult for people with moderately low vision to see even if they meet colour contrast requirements.

The words "lightweight font" written in a font with extremely thin strokes.The words "fancy font" written in a font with decorative serifs.

If you are using fonts with these characteristics, use a larger font size or higher contrast ratio to maintain readability.

WCAG 2.0 references

Related Techniques for WCAG 2.0