Use of colour

Colour can be a really important visual tool to help people understand content. However not everyone can see colour or distinguish between different colours. Criterion 1.4.1 addresses this. The criterion states:

Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Colour is important

The first thing to stress is that this criterion does not, in any way, discourage the use of colour. Colour is important for many reasons and there is nothing wrong with using colour, provided it is not the only way of giving information.

Colour is used in web pages for so many reasons. The first is probably because it looks good. Well chosen colours can make a design look attractive and engaging. This is perfectly legitimate. Colour can also help users to understand information and can highlight what actions they may need to take. For example, form fields may be highlighted in red to show an error or a button may be green to show that it will progress the user through a process. There are many people who rely on this use of colour to help them understand and navigate the Internet.

Visual impairments and colour

There are many reasons why a person may not be able to see, perceive or distinguish colour. Somebody who is blind and cannot see at all, would have obvious difficulties with a site that relies on the use of colour, but what about people who are colour blind, have low vision, or are just finding colour more difficult to see because of age?

The key is that colour must not be the only way of giving the information.

How to meet Use of colour

Text on a background

The best way to meet this criterion, is to make sure that any information that is conveyed by colour is also conveyed by text. So if a form field is marked with a colour to show that it is required, also provide text that tells the user that the field is required. With form fields, that can also be achieved by using a text cue.

In some situations, e.g. hyperlinks, you can provide additional visual information. Hyperlinks are usually a different colour to the rest of the text. This difference should be at least a 1:3 ratio. You can additionally provide an underline, to make it clearer for people who don't distinguish colours well.

Colour within an image

Images such as graphs and pie charts often show information by the use of colour. This can be difficult for some people to perceive. One way to improve the experience, is to use pattern as well as colour. My preference though, is to provide the information in text as well.