When colour is the only information

Red means taken, green means free. The red field is the error. The blue line in the chart is turnover, the orange one is costs.

That works. It is clear, it is quick to take in, and it looks good.

It just does not work for everyone. And the point is not that you would have to do without colour because of it — but whether colour may be the only information or not.

The difference in one sentence

Colour must not be the only means by which information is conveyed, an action is indicated, a response is requested or a meaningful element is distinguished from another.

That is the rule, and it explicitly does not say that colour coding is forbidden. It says that something else has to stand next to the colour.

Red and a cross. Green and a tick. The blue line and a label at its end.

The word for the wrong state is colour-dependent: the viewer relies on the colour to understand. The goal is colour-independent — and it can still be colourful.

And it is only about elements that mean something. A coloured background that is just pretty is not meant.

Who this matters for

Not only for people who see no colours. The circle is clearly bigger than most assume.

People who cannot tell certain colours apart. The most common form affects red and green — of all things the pair people like working with most.

People with reduced eyesight, for whom colours arrive washed out.

Everyone in unfavourable light. A phone display in the sun shows very pale colours.

Everyone with a badly adjusted screen — and there are more of those than you would think.

And everyone who prints something. A chart whose lines differ only by colour is unreadable in black and white.

The last three groups are not fringe groups. It is everyone, now and then.

An example that makes it click

A seating plan for event tickets on which different price categories are marked by different colours. A legend next to it assigns colour to category.

Whoever cannot tell the colours apart cannot see which seat belongs to which category. The information is there, it is even carefully prepared — and it does not arrive.

The example comes from a source that found it on a real ticket site, and it is so instructive because nobody was sloppy there. The site is fine in terms of design. It overlooked just one single thing.

The follow-up test — zooming in to read table numbers — failed as well, by the way: the graphic was not clickable and blurry when enlarged. Two errors that together make sure there is no way around it.

The places where it almost always happens

Form errors. The field gets a red border, and that is the whole feedback. Whoever does not see the border searches. Whoever has the page read out learns nothing at all — a border is not read out.

The error has to be there as text, near the field, and it has to be technically connected to the field. The red border may gladly come on top.

Required fields. Often marked by a colour or an asterisk without explanation. An asterisk is better than colour alone and still only information if it says somewhere what it means.

Availability indicators. Green dot, red dot. Without a word next to it, it is guesswork.

Charts. The classic case. Legend on the left, colours on the right, and the assignment only works through colour. The fix is simple: label the lines directly, use different line weights or patterns, set points in different shapes.

Links in running text. The case almost nobody thinks of. If a link differs from the surrounding text only by its colour, it is no link for some readers. The underline many remove for design reasons is exactly the second piece of information.

States of buttons. A greyed-out button that cannot be clicked. How do you recognise that if you do not see the difference between the grey and the normal state?

How to check your own site

Two ways, both take minutes.

The greyscale test. Take a screenshot of the page and convert it to black and white — any image editor and any phone can do that. Then look at the result and ask at every coloured spot: do I still know what this means?

That is the hardest test and the most telling. Whoever passes it is on the safe side.

The simulation in the browser. The developer tools of modern browsers can simulate vision deficiencies. You open them with F12, look for the rendering options and choose a vision deficiency. The page is then shown the way it arrives with that perception.

That is more striking than any explanation, because you see it yourself.

And the test without a tool: describe to someone on the phone what is on your page — without using colour words. Where you falter is a finding.

What to do

There is no project to make of it. It is one pass with a single question.

Go through the places where your site communicates something — form errors, status indicators, charts, links in the text, states of buttons.

At each one ask: what is here besides the colour?

If nothing: add a second piece of information. A word, a symbol, an underline, a pattern, a label.

The colour stays. It just gets company.

Why this is here

Of all the points that make a website more accessible, this is one of the cheapest. It requires no rebuild, no additional technology and no expertise. It requires somebody to look once.

It still gets skipped, because it looks good in the design. Colour coding is elegant. Writing a word next to it feels like a step backwards.

It is not. It is the difference between information and a guess.

Sources

• Udemy, How To Design for Accessibility: for UX Designers (WCAG 2.2), section 4 — the definition that colour must not be used as the only visual means to convey information, indicate an action, request a response or distinguish a meaningful element; that the requirement explicitly does not forbid colour coding but only requires that colour is not the sole means; the distinction between colour-dependent and colour-independent, where colour-independent may well be colourful; the restriction to meaningful rather than purely decorative elements; the examples given of red for offline and green for online, and a line chart whose assignment to the legend runs only through colour; and the example described in detail of a seating plan on a ticket site on which seat categories are distinguished by colour alone, together with the observation that the graphic was neither clickable nor readable when enlarged.
• Atlas, accessibility/criteria/3-3-1-error-identification.md — that a detected input error has to be identified and described in text; that people who have the page read out can perceive neither red borders nor error icons and errors therefore have to be communicated in text form; and that the error message stands next to the affected field and is technically connected to it.
• Own practice — extending the affected group to unfavourable light, badly adjusted screens and printouts; the list of places where the error occurs most often in practice, in particular links in running text without underline and greyed-out buttons; the greyscale test as the hardest check; simulating vision deficiencies in the developer tools; and the test of describing the page without colour words.
• Gap in our own knowledge base — there is no Atlas entry of our own for this criterion yet, although the neighbouring criteria are documented. The article therefore relies on the course and on the neighbouring criterion on error identification. The missing entry is noted.