Accessibility Tip: Avoid using colour alone to convey information

Last updated on January 01, 2022A11y issues

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

See table below for online status of our users:


Table legend: online, offline

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:

See table below for online status of our users:

UserOnline status
Tom Online
Jerry Offline

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.

Found this post useful?

Please consider sharing this link with your work colleagues or on social media. There are no ads on my site, I just want to promote accessibility.

Found an issue? please point them out - let me know if there is a mistake and I'll update it

Follow me on Twitter: @A11yForDevs. I post links to interesting a11y articles and resources.

More posts

Welcome to Accessibility for Developers

New to accessibility?

Accessibility for Developers

This is a free site to give advice on how to make your website accessible

I have been a software developer for nearly a couple of decades, and really want to help promote better accessibility in apps and websites that we, as developers, create! Accessibility isn't very difficult, it is just important to be aware about it and understand it.

If you spot any mistakes or have any suggestions, ideas or collaborations please check out my contact page.

Important: The information on this website is for general informational purposes only. I make no representation or warranty, express or implied. Your use of the site is solely at your own risk. I've tried my best to make sure all information is accurate, but I am just a software engineer (not an accessibility expert).