Don’t use presentation that relies solely on colour.
Users with visual impairments may need help when you use colour on your website. You can solve this by using other identifiers such as labels, shapes and patterns, issue.
How to Pass
- Ensure no instructions rely on colour alone
- Ensure that no information (like charts and graphs) relies on colour alone
Check for colour issues by printing samples from 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 colour alone. For example, your users might not understand a pie chart where only colour separates 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.
Free Developer Resources
Join over 3,500 subscribers on my weekly web accessibility email and get free developer resources like WCAG 2.1 Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.