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.
We also created a visual summary:
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