Don’t use presentation that relies solely on colour.
Introduction
Users with visual impairments, including difficulties perceiving colour, may need help where colours on your website present information.
You can solve this by using other identifiers such as labels, shapes and patterns, issue.
How to Pass ‘Use of Colour’
- Ensure no instructions rely on colour alone
- Ensure that no information (like charts and graphs) relies on colour alone
‘Use of Colour’ Tips
Check for issues by viewing your website in black and white. Are there any instructions you can’t follow or is there information you can’t understand?
Making your website accessible to colour blind users is simple. The main area to focus on is giving instructions. Saying things like ‘Click the green button’ or ‘Required fields are red’ is useless to users who can’t see green or red. Reinforce these instructions with at least one more identifying remark.
A common failure is link text. Marking this out with a change of colour alone isn’t good enough, use an underline, bolding or a symbol too.
Another point is to make sure that important graphics are not dependent on colours alone. For example, your users might not understand a pie chart where only colours separate the segments. In this case, you should add clear labelling and patterns to the segments.
There’s an overlap here with 1.3.3 – Sensory Characteristics. Instructions should always be clear and give your users the detail they need.
See Also
Free Developer Resources
Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.
A lot of people like to remove the “default” underline from links. While they may then color the links differently from surrounding text, would this be considered relying on color alone to convey meaning?
At a high level yes. The hover effect on a link can reduce some of this issue though. If the link text was clear it was a link, the underline wouldn’t be needed either.