Accessibility for Developers

You should not rely on colour alone to convey information, as not everyone can see the difference between colours.

Table of contents

Examples of using only colour (in an non-accessible way!)

1 in 12 UK males are colour blind, often unable to see the difference between green/red.

So if you are trying to indicate if something was a success by just showing a green or red colour (e.g. a border) then it will be very hard for those types of users to understand.

Non accessible example

The example below shows a table with users and their online status - but you can only tell they are online if you can see the colour. (This also has screen reader accessibility issues).

The example above is trying to tell users that Tom is online (as it has a green background status colour). But for colour blind users (and screen readers) this information would not be conveyed.

Another common way to have accessibility issues with colours is if you have a status icon - such as a round circle - which is coloured red or green.

Accessible example

The example below shows a slight tweak and it is much more accessible:

The fixed version could be improved, but this is a very basic change and it is now much more accessible.

Another example of an inaccessible component would be if you had a text input that trys to tell the user about an error, by just having a red border:

<input type="text" style="border:2px solid red" placeholder="some input"  />

But this could be fixed by adding an error message next to it (in text).

How to avoid these issues

It is fine to use colour to convey information - as long as there is another way to understand the meaning.

So you could have a red/green border, but also have text explaining what it is.

Or if you have a circle status, it is fine as long as inside the circle there are different icons (e.g. a tick and a cross). Of course, remember to make it accessible for screen readers too.

Other considerations

• some cultures have different meanings for colours. For example in the western world we typically see red as bad or danger. In China it is seen as a positive/lucky colour.

Further links

• WCAG 2.1 spec lists this issue under 1.4.1: Use of Color. https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html