Accessible Information and Colour

Is colour a good way to communicate information?

Yes, colour can be a great way to communicate information! Traffic lights, road signs, buttons and switches, instruction manuals and food labels all use colour to communicate information. On the Web we can use colour to separate different areas or types of content, to identify interactive functionality, to provide instructions and warnings, and to make complex data easier to understand.

When is it bad to use colour for information?

When it's the only way that information is available. Some people are unable to perceive colour: people with varying levels of visual impairment; older people; users of monochrome displays and plain text browsers; me, when I print using my monochrome printer; and don't forget Google, the biggest blind user on the Web.

Look at the example below which was brought to my attention by Fitz. It's a data table showing the price per person on each day during an event. In fact, the price information is provided outside the table, indicated by a change of colour in each cell. The only semantic job the table is performing in its own right is that of a calendar.

It's confusing for most users, but for those who cannot perceive colour, it's completely inaccessible. Even in the limited grayscale view below which provides some visual information, there's no reliable way to associate prices with dates.

What about someone who has no access to colour? The image below shows what information would be available to a blind person using a screen reader. They would hear a table of dates and a list of prices but have no way of linking them together.

How can colour be made accessible?

Think again about traffic lights which use combinations of red, amber and green to indicate when to stop and when to go. While a driver with colour blindness may have difficulty identifying each colour, they can still see which light is illuminated. Since the red, amber and green lights are always separate and appear in the same position, colour alone is not the only means of receiving this important information. Road signs, while they do use colour to aid recognition and understanding, also use shape and wording to convey meaning.

On the Web, one common use of colour is to identify links from surrounding content. This is all well and good, but lost on users who have difficulty seeing colour - those links are hidden. For this reason, it's an accepted convention for links to be underlined, in addition to any colour change. Sometimes form fields are red to indicate a mandatory field or to draw attention to a mistake. By adding a symbol next to mandatory fields and an error message next to those which need attention, that information is made available to everyone.

What about our price table? The simple solution there, assuming we need to keep the calendar format, would be to include prices directly in the relevant cells. We can, of course, keep the colour coding for those users who can appreciate it.