Colour is never the only signal

One rule, applied everywhere

WCAG 1.4.1 puts it plainly: colour must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element.

That is an accessibility requirement, and it is also just good design. Colour fails in more circumstances than any other channel: colour vision deficiency, greyscale printing, sunlight on a phone, a cheap projector, a monochrome e-reader, a screenshot pasted into a document, a bad monitor. Anything carried by colour alone is carried by the least reliable channel you have.

The rule is not do not use colour. Colour is fast and pleasant and it should do a lot of work. The rule is that colour must always be the second encoding of something that is already encoded another way.

The common failures, and the repairs

Status dots. A green circle and a red circle of similar lightness, meaning healthy and failing. Repairs, in ascending order of robustness: make the two differ in lightness; change the shape as well, so one is a filled circle and the other a triangle or a cross; add a word.

Form validation. A field turns red. A colour-blind user sees a field that looks slightly different; a user in sunlight sees nothing. The complete version is a coloured border and an icon and a message in text next to the field. The message also has to say what is wrong — Invalid is a colour change in words.

Links in body text. Blue text among black text is a colour-only signal. This is why underlines exist, and why removing them for cleanliness is a real regression. If you remove the underline, you owe the reader something else: a border on hover is not enough, because it appears only after the reader has already found the link.

Charts with a legend. A legend maps colours to names in one place and asks the reader to hold the mapping while looking somewhere else. Direct labelling — putting the series name at the end of its own line — removes both the colour dependency and the memory task. Where a legend is unavoidable, add a second distinction: different line styles, different markers, or pattern fills on bars.

Diff views. Red and green backgrounds for removed and added lines. This is close to the worst case, and it is why good diff tools also use + and − marks in the gutter.

Required fields. A red asterisk is two signals — colour and a glyph — which is adequate. A field label that is simply red is not.

Selected state. A chip that turns blue when selected. Add a tick, a border weight change, or a filled versus outlined treatment.

The redundancy toolkit

When you need a second encoding, these are the options, roughly from cheapest to strongest:

• Lightness — a darker and a lighter version rather than two hues.
• Shape or icon — a tick and a cross, a circle and a square.
• Text — the word. Unambiguous, costs space, and translates.
• Position — always first in the list, always in the same column.
• Pattern or texture — hatching on a chart bar. Works in print and in greyscale.
• Weight or size — heavier for the selected item.

For most interface work, lightness plus a glyph solves nearly everything.

The two-second test

There is a check that catches almost all of these and takes no setup at all: turn the design to greyscale and ask whether you can still use it.

This is the squint test from the first block doing a second job. If a status is unreadable in grey, it is unreadable for some share of your users right now. If a chart becomes guesswork, so does the chart in the printed report somebody will circulate.

On a phone: Android Settings > Accessibility > Colour correction, or iOS Settings > Accessibility > Display and Text Size > Colour Filters > Greyscale. Leave it on for an hour of ordinary use and you will find things in your own product that no audit found.

Where the rule has limits

Colour alone is acceptable where the information is genuinely decorative, or where the colour is a redundant restatement of something already unambiguous. A brand colour on a header carries no information. A paint chart, a colour picker or a photograph of a garment is about colour, and no substitution is possible — what is required there is a text name or code alongside, which is why every clothing retailer lists the colour name next to the swatch.

That last case is the clearest illustration of the whole principle: even the products whose entire subject is colour do not rely on colour alone.