Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

contentVercel

Redundant Status Cues

MUST

MUST: Redundant status cues (never color alone) — add a text label, icon, or pattern as a second indicator; icons have text labels. ~8% of males cannot distinguish certain colors

Don't rely on color alone; include text labels

Bad

Good

Why it matters

Colour is the case everyone knows: WCAG SC 1.4.1 Use of Color, which the Rams review files as a Serious accessibility failure. Roughly 8% of men have some colour vision deficiency — but colour-only status also fails on monochrome displays, in bright sun, and on a printout, so the audience is far wider than the one people picture. The general rule is bigger than colour, though, and it is WCAG SC 1.3.3 Sensory Characteristics: no single sensory channel may carry meaning on its own.

Colour is one channel. So is SOUND (an error chime with no on-screen message — see interactions-sound-not-sole-channel), SHAPE ("click the round button"), SIZE, and POSITION ("the panel on the right", "see the box below"), each of which means nothing to a screen reader user, and position means nothing to anyone on a narrow viewport where your two columns just became one.

Test it by asking what survives if the channel is removed: greyscale the screen, mute the audio, read the DOM order aloud. Whatever is left must still identify the thing. Always carry the meaning on a second channel: an icon or glyph beside the status colour, a text label on the badge, an underline on the link, a pattern or a direct label on a chart series, a visible message beside the sound, a name beside the "round button". Green alone is not success; green with a checkmark and the word "Success" is.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.