Foundations: colour and meaning

Posted on Tuesday, 15 February 2022 by Henny Swan

Colour is a valuable tool for communicating meaning. But if you can't see colour, then meaning is lost. Always plan to use colour to convey meaning in combination with another means of identification.

Colour and meaning is difficult or impossible to see for many people, for example:

People who are blind browsing with a desktop screen reader or browsing with a mobile screen reader wont be able to see colour
People with low vision can find colours difficult to see
People who are colour blind may not be able to tell the difference between certain colour combinations
People with Autistic Spectrum Disorders may not understand or interpret colours in the way they are intended
People browsing with black and white displays wont be able to see colours

Rules for using colour

As well as having good colour contrast, colour should never be the only way to identify something. Colour must always be accompanied by other means of identification. This could be visible text, underlines and borders for visible focus styles, or shapes depending on the type of content being displayed.

Form errors

If highlighting form errors with a visual change, for example by placing a red border around a form field, also include an error message in text next to the field.

Three text fields labeled 'First name (required)', 'Second name (required)' and 'Age (required)'. The first name field contains the value of 'John'. The age field contains the value of 42. The second name field is empty. The label text and the border for the field are shown in red to indicate it's in an error state. — Incorrect use of colour alone to indicate a field is in an error state.

The same content as in the previous image, except a visible text message is now below the error field 'Error: Please enter your second name'. — Use of an additional visual cue (a visible error message in text) below the affected field.

Links

Links embedded in sections of text should be underlined, have borders, or some other visual change as well as be in a different colour so they are easy to see.

The text 'Please read our terms and conditions for more information'. 'Terms and conditions' is a link and is distinguishable only by colour alone (light blue instead of black text). — Link embedded within a section of text that is only identifiable via colour alone.

The same text as before, only now the link is underlined. — Use of an underline more clearly distinguishes the link text from the surrounding non-link text.

Icons

Icons must have different shapes, text labels, or some other visual change as well as different colours.

A table with two columns: Transaction and Submitted for Review. The transaction cells are 'Initial Outline', 'Draft Plans' and 'Final Plans'. Circles are placed in the Submitted For Review column to indicate whether these have been submitted (green) or not submitted (red). The circles for 'Initial Outline' and 'Draft Plans' are green, and red for 'Final Plans'. — Incorrect use of colour alone to distinguish between submitted and non-submitted items.

The same table as before, but now there are tick and cross icons inside the green and red circles respectively to distinguish them. — Use of additional icons to further distinguish between submitted and non-submitted items.

Graphs and charts

Graphs and charts must combine colour with text labels or patterns and legends.

A line chart showing three lines of different colours and one dashed line. A legend is also provided — Incorrect use of colour to indicate different lines in a chart. One line is dashed however and is the only line that can be identified by people with vision who can not see colour

A line chart showing five lines of different colours with each using a different patterns such as dots, dashes, or a lines with a shape on. A legend is also provided. — Correct use of colour to indicate different lines in a chart in combination with different patterns and a legend.

Tips for using colour to convey meaning

Design content without colour first, then add colour to reinforce meaning
Switch your screen to black and white to see if you can identify links, error messages and other elements that convey meaning

WCAG 2.1 Success Criterion 1.4.1 Use of Color (Level A)

More information

For more information about the Web Content Accessibility Guidelines, read our WCAG primer and find out more about embedding accessibility into design in accessible design systems.

Updated 24 January 2023.