Accessibility specialists

Categories

Foundations: colour and meaning

Posted on by Henny Swan in Design and development

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 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

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.

Next steps

Read more accessibility foundations posts, our WCAG primer or how our design system assessments can help you create an accessible design system and accompanying documentation.

Updated 24 January 2023.

Henny Swan

Henny is a Director at TetraLogical. She specialises in embedded and sustainable accessibility, inclusive user experience and design.

Having started her career focusing on the usability of dual language web platforms in China in the late 1990's, Henny moved into accessibility on her return to the UK in the early 2000s. Since then she has worked for the RNIB, Opera Software, TPGi and the BBC. It was at BBC she developed her passion for inclusive TV and streaming experiences.

Henny is co-author of the Inclusive Design Principles, was lead author of the BBC Mobile Accessibility Guidelines, and is a regular speaker at conferences. In 2022 Henny graduated the Goldman Sachs 10,000 Small Businesses.

Henny Swan
Photograph of Henny, whose bedhead hair clearly didn't get the 'dress code' memo, wearing a big smile, black glasses and a swan necklace

We like to listen

Wherever you are in your accessibility journey, get in touch if you have a project or idea.