Guide · 9 min read

Colour is a channel, not the message

Roughly one man in twelve has some form of colour vision deficiency, and the most common kind collapses exactly the pair — red and green — that interfaces use for success and error. Here is what to do about it, and why adding an icon is only half the fix.

What WCAG actually requires

Success criterion 1.4.1 Use of Colour is short and frequently misread. It says colour must not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Note what it does not say: it does not require you to avoid colour, and it does not require a text alternative for every coloured element. It requires a second channel. That can be text, an icon, a shape, a pattern, position, or an underline.

The red/green problem

Deuteranomaly — reduced sensitivity to green — is the most common form, followed by protanomaly affecting red. Together they account for the large majority of colour vision deficiency. Tritanopia, affecting blue/yellow discrimination, is rare.

The practical consequence is unglamorous and specific: a green "success" dot and a red "error" dot can look like the same muddy brown dot. The user sees that something changed, and cannot tell which.

The right-hand panel approximates what a user with deuteranopia sees. The two dots are now nearly identical — but the words still work.

Fix it with three channels, not two

The standard advice is "add an icon." That helps, but icons are frequently too small, too abstract, or too similar to each other to carry the meaning alone. The robust pattern is:

1. Shape or icon — a check versus a cross, distinct in silhouette, not just in fill.
2. Text — "Payment failed" rather than a coloured dot next to the amount. This is the only channel that survives every situation, including screen readers.
3. Colour — now doing its job as reinforcement and speed, not as the message.

Where space is tight, at minimum ensure the states differ in lightness. Colour-blind users retain luminance perception almost intact, so a dark red and a light green are distinguishable where two equally-bright colours are not. This is also why grey-scale testing catches so many real problems.

Forms and validation

Error states are where colour-only design does the most damage, because the user has to find the problem before they can fix it.

• A red border is not enough — add a message beneath the field, and mark it with an icon or a thicker border.
• Put the message next to the field, not in a summary at the top of a long form.
• Never rely on red to mark a required field while everything else is neutral; mark required fields explicitly.
• Keep the error visible while the user is correcting, not only on submit.

Charts and data visualisation

Charts are the hardest case, because colour is doing real work distinguishing series. Three techniques that hold up:

• Direct labelling. Put the series name at the end of the line instead of in a legend. This helps everyone, colour-blind or not.
• Differ in more than hue. Vary lightness, line style (solid, dashed, dotted), or marker shape.
• Limit the count. Beyond five or six series, no palette saves you — group or facet instead.

Sequential scales deserve a note: a rainbow scale (blue → cyan → green → yellow → red) is not monotonic in perceived lightness, so it misrepresents ordering for everyone. Use a single-hue ramp that gets uniformly lighter or darker.

Dark mode is not an inversion

Two things break when a light theme is inverted mechanically:

• Saturated accents glow. A colour that was comfortable on white becomes visually vibrating on near-black. Desaturate and lighten accents for dark surfaces.
• Pure white text is harsh. Long-form reading on #000000 with #FFFFFF text produces halation — letters appear to bleed. Use a near-black surface and slightly off-white text.

Also note that dark mode does not relax contrast requirements. A #767676 grey that scores a comfortable 4.54:1 on white drops to 4.12:1 on #121212 — short of the 4.5:1 AA threshold. Colours that pass on white often fail on dark, so re-test rather than assume symmetry.

Focus indicators

If you remove the default focus ring, you must provide a replacement that meets 3:1 against the adjacent background. WCAG 2.2 adds criteria on focus appearance — the indicator needs sufficient area and must not be entirely hidden by other content.

A reliable pattern: a two-tone ring — a light inner ring and a dark outer ring — so the indicator is visible on both light and dark surfaces without you having to detect the background.

How to test

1. Greyscale first. Screenshot the interface and desaturate it. Anything that becomes ambiguous needs another channel. This one step catches most 1.4.1 failures.
2. Simulate the common types. Deuteranopia and protanopia simulators are built into browser developer tools and most design applications.
3. Check the ratios. Run the real values through the contrast checker — simulation tells you about hue, not about luminance.
4. Test at 200% zoom. Reflow problems and colour-only cues surface quickly when everything gets bigger.

A short checklist

• Every status has an icon or word, not just a colour
• Errors have text next to the field they describe
• Chart series are distinguishable in greyscale
• Focus rings clear 3:1 and are never removed without replacement
• Dark mode colours were re-tested, not inverted
• Links in body copy are underlined or otherwise distinguished beyond colour alone

---

This guide covers the visual-design side of colour accessibility. It is educational material, not a compliance certification — verify against the current W3C recommendation and any standard that applies to you.