Colour and colour contrast: accessibility for developers

  • Author: Access iQ ®
  • Date: 1 Feb 2013
  • Access: Premium

Quick facts

Colour is an important element of web design and is used in web development in a number of ways. Alongside size, shape and position, colour can visually communicate a great deal to users.


  • Don't use colour alone to convey meaning
  • Use a sufficient contrast ratio
  • User controlled colour contrast

Colour is an important element of web design and is used in web development in a number of ways. Alongside size, shape and position, colour can visually communicate a great deal to users.

Colour has another positive quality that it can be expressed in code as well as with images, but assistive technologies are not adept at communicating colour, other than by description, just yet. As a result it is often used to deliver information, label controls, signify status or condition or otherwise alert the user to something important. It is common to colour labels or required fields red or to signify positive or negative status with red or green icons.

When a form on a webpage tells the user that fields with a red background must be completed, colour is being used to convey instructive information that is critical to the successful completion of the form. Unfortunately, if required fields are described using colour alone, that information is not available to people who are blind, colour blind of low vision or cannot otherwise accurately perceive colour. In order to be accessible, it is necessary that important information and controls are not conveyed by one sensory modality alone.

Perceiving colour

Requiring the user to have an accurate perception of colour to perceive, operate, or understand something on a website is an accessibility issue. For example, an instruction to click on one coloured icon to initiate one action, and on different coloured icon to initiate a different action requires the user to differentiate between those colours if no other means of differentiation is provided. If the user cannot perceive the difference, they cannot proceed.

As another example, if, the colour of an item changes as the result of some action by the user, the user may not notice the change if they cannot perceive the difference between the before and after colours. This would cause the user to not know something had changed, since the only information provided was a colour change.

Pages with low contrast, particularly low contrast between text and background colour can be difficult to read by people of low vision and people with blindness or colour blindness.

There are two main accessibility issues with colour:

  1. When a webpage relies on colour alone to convey meaning.
  2. When there is insufficient contrast between foreground, usually text, and the background, either HTML colour or an image, making text difficult to read by people with a visual disability.

They key to addressing accessibility issues associated with colour is to not rely on colour alone, or to provide users with the ability to change the visual display to eliminate reliance on colour to convey information.

Don't use colour alone to convey meaning

Using colour can be a great way to make a website aesthetically appealing and increase its functionality. Using colour to convey information to users is acceptable, as long as the design does not rely on colour alone.

Success Criterion 1.4.1 Use of colour 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. (Level A)

Use text alongside colour

If a form designates required form fields in a different colour to fields that are optional, the document must make that distinction clear in an additional way, to a different sensory modality or as machine readable text, such as adding the text "Required" to all required field labels.

Avoid colour conveying meaning

Another way to avoid this issue is to inform users without using colour at all, and then supplement that with a method that uses colour as a secondary designation. That way colour will never be the primary nor only way of conveying information to the user.

In Example 1 below, the text "(required)" is styled red through the class="required" attribute, and is within the label element, making it available to screen readers, in the logical reading order.

Example 1:

<style type=”text/css”>

.required {color:red;}

</style>

...

<label for="email-address">Email address

<span class="required">(required)</span></label><br />

<input type="text" name="email-address" id="email-address" /><br />

<input type="submit" value="Submit" />

A screen reader may read the markup as:

"email address (required) edit" or "Email address left paren required right paren Edit"

A browser will render the code like this:

A screenshot of an email address form field with the label "(required)" in red.

Use a sufficient contrast ratio

We know reading black text on white pages is easy to read. However, modern web design often chooses colour combinations of less contrast than black text on white background. People with some kinds of vision impairment may have trouble reading text with insufficient contrast from its background. This may be more pronounced for people who are colour blind.

Level AA contrast ratios:

  • Normal text: 4.5:1
  • Large text: 3:1

Level AAA contrast ratios:

  • Normal text: 7:1
  • Large text: 4.5:1

However, some people with some cognitive disabilities can read text better when they select their own foreground/background colours and this is therefore a success criterion for Level AAA compliance as described below in section User controlled colour contrast.

Success Criterion 1.4.3 Contrast (minimum) requires:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

There are three exceptions to this criterion, namely:

  • Large text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • 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.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

The reasons for the exceptions to this success criterion are, respectively:

  • Large text is easier to read at the same contrast levels as regular text, and can therefore accommodate a lower minimum contrast ratio for the same readability as smaller text.
  • Incidental: Where text alone or as part of an image does not contribute to the meaning of the content, it does not have to meet minimum contrast ratio levels. This includes random text that may appear in an image, text that is deliberately hidden or text that is for decoration only.
  • Logotypes: Just as corporate logos do not need alternate text to convey the meaning of text used in the logo (on the basis that it is more meaningful to advise a user that an image is of a logo rather than the text used in the logo), it is also not necessary to impose contrast requirements on a logo.

Note: To achieve Level AAA compliance, it is necessary to satisfy Success Criterion 1.4.6 Contrast (enhanced):

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

  • Large text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • 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.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Contrast ratio can be measured using any of several stand-alone or user agent-based tools for the purpose, and manipulated in many image-editing applications. If using browser-based tools it is important to understand they only register colours described in CSS/HTML and do not assess visual colours.

Useful browser based tools should come with a means of selecting the visual colour, for example:

.test {color:#000000; background:#CCCCCC url(../images/333333.png);}

renders the text black (#000000) , and background dark grey (as an image, 333333.png) since browsers default to the image for backgrounds, even though the code has set a light grey background (#CCCCCC). A user-agent based tool that reads the hex-code but does not consider the image background will report a different contrast ratio than the user will perceive.

User controlled colour contrast

It is optional to offer the user a facility to control colour contrast to suit specific user needs. However, this is not optional to achieve Level AAA compliance through Success Criterion 1.4.8 Visual presentation. It may be worth implementing to help achieve Level AA conformance, and could take the form of providing alternate style sheets that set higher or lower contrast ratios as required. Any means to do so will itself need to fully comply with WCAG 2.0 criteria governing the use of controls.

One way of performing this is by not specifying foreground or background colours, allowing the user-agent to manage those details as described in Sufficient Technique G148: Not specifying background colour, not specifying text colour, and not using technology features that change those defaults.