This is a new resource created by dxw – your feedback (opens in a new tab) will help us to improve it.

Using colour to show information

Do not use colour as the only visual means of providing information. This excludes users with certain visual impairments, people who use text or braille displays and users with low-colour or monochrome displays.

Example #

We want to show the outcome of a user’s application. This option does so only using colour.

Alt= Outcome of user’s applications. Under the heading status there is a red bar for application one and a green bar for application two.

This is how this visual would appear to someone with protanopia, the most common form of colour blindness

Alt=Outcome of user’s applications. Under the status heading there is an olive green bar against application one with a slightly darker green bar under application two.

You can use colour in your designs but you must add another way to signify meaning so that someone who cannot perceive colour can still understand the information.

Alt=Outcome of user’s applications. Under the status heading there is a red bar with the word ‘failed’ in red type against application one. There is a green bar with ‘succeed’ in green type under application two.