Colour is an important component of any visual design. We can use colour to highlight an important point we want to draw attention to in our content. We can use colour in graphs to show different categories of information. Or we can use colour in a table to highlight particular cells of content.
In all these cases we are using colour to convey information. Yet the use of colour alone to convey information can make this content inaccessible to people who have difficulties distinguishing colour. This includes people with vision impairment who often have limited colour vision, older users with age-related impairments and those who are colour blind.
The purpose of Success Criterion 1.4.1: Use of colour is to ensure that information conveyed via colour is also conveyed in another way that is accessible to all users:
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)
Techniques for use of colour
When you use colour to convey information, always make sure the same information is communicated either in text or via other visual cues such as text formatting or font size.
Along with the benefits for people who have difficulties perceiving colour, these techniques also ensure that people using screen readers and Braille displays can listen for text cues or detect them by touch.
Colour in graphs
Graphs often use multiple colours to show information. Whether you are creating your own graphs or a web designer is creating them for you, there must be other ways for someone to understand the information presented in the graph without relying on colour.
There are a number of techniques you can use:
- Use patterns as well as colour to show information
A real estate site provides a bar chart of average housing prices in several regions of the United States. The bar for each region is displayed with a different solid colour and a different pattern. The legend uses the same colours and patterns to identify each bar.
- Use symbols as well as colour to show information
A travel site provides a line graph showing the number of people traveling to five international destinations over a ten year period. Each line is a different colour and each data point is marked with a distinctive icon such as a diamond, square or circle. The legend uses the same colours and symbols to identify each line.
- Use text as well as colour to show information
An annual report provides a pie chart of the amount that each department within an organisation has earned with the last financial year. Each section of the pie chart is outlined in white and a text label is associated with each piece of the chart.
A great tip by Dey Alexander from 4 Syllables is to print your graph on a black and white printer (or turn on the black and white option in printer settings). You should still be able to understand the information in the graph even though it is printed in black and white.
Also remember that you will need to provide an appropriate text alternative for your graph. For more information, see the topic on text alternatives.
Colour in tables
You may have situations where you want to use colour within a table to highlight particular cells of information, drawing the user's attention to them or giving them a certain connotation.
A table of monthly book sales based on rows of book titles and columns of booksellers gives a green background to sales that exceed 5,000 and a red background to sales of less than 50. The same information is also conveyed by styling the high sales figures a font size larger and in bold, and the low sales figures a font size smaller and in bold.
Colour in text
There are certain circumstances where the use of colour in text is accepted practice in one or other medium of communication. The presentation of information on webpages offers a way of making this information accessible.
An income and expenditure statement formatted for a company website shows negative values in red. The information conveyed by the colour is also conveyed by showing negative values in parentheses. The same effect could be conveyed by prefacing each negative value with a minus sign.
Note: In each of these instances, nothing is taken away: colour is still used to convey information. The only difference is that the same information is conveyed by an additional, alternate means.
Sometimes, that additional means may replace the use of colour as a more convenient or effective way of conveying the information.
If you do use colour in any of these circumstances, the changes to text colour or background colour must meet colour contrast requirements. For more information, see the topic on colour contrast.
Colour and forms
There are also some circumstances where the use of colour just isn't a good idea, even though it may have become a common practice.
You may have come across online forms that use colour to indicate a required field. Sometimes the field to be filled in is red, sometimes the text label for the field is red.
There is usually a line somewhere on the form explaining that "required fields are in red", but that doesn't help much when the screen reader has no cues to discern that field has a red background or a red text label.
There are a number of different techniques that can be used to identify required fields in an accessible way. These include making the form labels bold or italic or including text cues such as adding the words "(required)" to the form label.
WCAG 2.0 references
Related Techniques for WCAG 2.0
- G111: Using colour and pattern
- G122: Including a text cue whenever colour cues are used
- G14: Ensuring that information conveyed by colour differences is also available in text
- G182: Ensuring that additional visual cues are available when text colour differences are used to convey information
- H92: Including a text cue for coloured form control labels (HTML)