Spotlight 13:

Complementing Colours

(WCAG 1.4.1)

As learning designers, we probably all love colour. However, people with low vision, colour blindness, or even elderly people with reduced eyesight might have trouble accessing information where colours carry meaning.

What does WCAG say about complementing colours?

WCAG 1.4.1 (Use of colour - level A) is about making sure that colours alone do not convey meaning and other visual means are added to ensure that all sighted users can still perceive the information.

For example, you may have seen error messages where red means incorrect, and green means correct. To make them more accessible for people who don't perceive the colours well, you can add icons and text cues as well. Another example is an Excel spreadsheet where the text or background colour in certain cells is changed to highlight information or trends. Because many people might not even notice that different colours are used, you could use other methods of visual cues, such as different fonts or patterned backgrounds.

We created a video summary of this spotlight:

Link: Spotlight 13: Complementing colours (recap)

Or expand this section to read the transcript.

As learning designers, we probably all love colour. However, not everybody might be that keen on using colours.

In this video, we’ll give you a recap of LCA Spotlight 13: Complementing colours.

What’s the issue with colours?

Well, people with low vision, colour blindness, or even elderly people with reduced eyesight might not see colours well or they might not be able to differentiate between different colours. This becomes especially problematic if those colours carry meaning.

That’s why it’s important that colours alone do not convey meaning. Or if they do, other visual means are added to ensure that all sighted users can still perceive the information.

What does that mean?

For example, you may have seen error messages where red means incorrect, and green means correct. To make them more accessible for people who don't perceive the colours well, you can add icons and text cues as well. Another example is an Excel spreadsheet where the text or background colour in certain cells is changed to highlight information or trends. Because many people might not even notice that different colours are used, you could use other methods of visual cues, such as different fonts or patterned backgrounds.

We really like this article from Bootcamp that gives examples of using icons and patterns to complement colours.

If you want to find out more about how colours can be perceived differently, try a colour blindness simulator. We curated some and listed more resources in the original spotlight.

We also created a visual summary:

Complementing colours with other means of communication examples

Complementing Colours Image Transcript

Complementing colours

The text reads: In addition to colour, use other means to communicate meaning such as icons, fonts, patterns, text, alignments.

There are then 2 columns, representing what to avoid and what to do instead.

The first row has an example of 2 feedback boxes. None of them have text, but the colour of one is green and the other is red. The better version of this shows the same feedback boxes with both “Incorrect” and “Correct” textboxes added and also cross and check icons illustrating this.

The second row has 3 line items from a spreadsheet. The numbers 18, 34 and 54 are colour coded in red, yellow and green. The better version of this shows the same numbers and colours supplemented with the numbers having different alignments and underlining and bolding differentiating from the other numbers.

The third row has a graph of 3 different colours. The better version of this has not only the numbers added on top of the chart but also different patterns added to each colours of the bar to differentiate between them.

The image ends with the LCA Spotlight logo.

Final notes

Note that in this spotlight, we only talked about WCAG 1.4.1 (Use of colour - level A). However, there are other criteria related to colours. We'll look at them in Spotlight 15: Contrast.

Resources:

Follow this link to read the full WCAG criteria of 1.4.1: 1.4.1: Use of Colour (w3.org)
Check out this article with very clear examples of improving accessibility by using icons and patterns: Accessibility considerations for colours (Bootcamp)
To experience how people with colour blindness might perceive colours, use this simulator: Colour blindness simulator (Coblis)
For more colour-blindness simulators, check out this list: 5 Easy-to-Use Online Color Blindness Simulators (Make Use Of)

Discussion questions:

Get Involved: Come to the LCA Spotlight LinkedIn group and join the conversation.

Do you have more common examples of conveying meaning by colour differences in everyday life (online or offline)?
What should we consider when using icons to deliver information?
Do you have a QA process to ensure that your information doesn’t rely only on colour cues? What else do you recommend?

When you post in the community, use the hashtag #LCASpotlightComplementingColours

Spotlight 12: Flashes

Spotlight 14: Writing accessible copy