1.4.1 – Use of Colour (Level A)

Don’t use presentation that relies solely on colour

Your users with visual impairment need help when you use colour on your website. As many as 1 in 12 men have some degree of colour blindness. That means that somewhere around 8% of your male users will struggle with your website if you don’t use colour correctly.

What to do

Using colour is mainly a case of using your common sense:

  • Instructions must not rely on colour alone.
  • Other information (like charts and graphs) must not rely 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. Back these kinds of instructions up with at least one more identifying remark.

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 Guideline 1.3.3. Instructions should always be clear and give your customers the detail they need.

This guideline is not about removing all traces of colour from your website, far from it. It just means that colour must not be the only way of conveying the information or instruction. A common misconception is that web accessibility means making your website black and white, and making it completely boring. Web accessibility is about improving websites, not taking away from them.

See also

Free Developer Resources

Join over 3,500 accessibility fans and get free developer resources like WCAG 2.0 Checklists and a sample from my book.

Powered by ConvertKit

Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.

Learn more >

  • 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.