Don’t use presentation that relies solely on colour.

Introduction

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

Tips

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.

See Also

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.

Powered by ConvertKit

Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.

Learn more >

About Author

I'm Luke, I started Wuhcag in 2012 to help people like you get to grips with web accessibility. Check out my book, 'How to Meet the WCAG 2.0'.