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:

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.

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:

Discussion questions:

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

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

Spotlight 12: Flashes

Spotlight 14: Writing accessible copy