Status needs a shape or text as well as color
Aliases: color is not the only cue · status icon · redundant coding
What it is
Online, error, pass, selected — none of these may be told by swapping hue alone. Status needs a shape or a word in addition to color: a cross versus a tick, filled versus empty, a label that says “Failed.” Color may stay as a fast extra channel. It cannot be the only one. Distinguishing chart series by hue, and spotting links by blue, are the next two leaves. This one is the states that change on the interface.
Why it happens
Color is a single-channel code. When that channel fails for a person, a display, or a lighting condition, the state machine collapses into one look. Red/green pairs are brittle, but the problem is not only red-green deficiency: phones in glare, gray e-ink, tinted projectors all squeeze neighbouring hues together. Even typical color vision is unstable when five states differ only by a small hue step.
Redundant coding writes the same state into two separable features: hue plus shape, or hue plus text. Shape uses spatial frequency and contour; text uses semantics. Neither depends on mapping wavelength onto the categories “red” and “green.” A second layer: the extra cue must itself be visible — a 1 px red dot and a 1 px gray dot do not differ in shape. The physiology and prevalence of color vision deficiency belong on the human-factors side; here the fact that is used is only that a single channel breaks.
Studying it
Gray the screenshot, or turn on system grayscale, and ask someone new to the product to label every row’s state. Compare color-only, color plus icon, color plus text. Simulators are a sieve, not sole evidence: they cover some types and do not simulate glare.
Independent variables: cue set (color only / color+shape / color+text), number of states. Dependent variables: identification accuracy, hesitation, accuracy under grayscale.
Sample form validation, switches, presence dots, selected rows, selected tabs. Automation can see that a color property was used; it cannot see whether a word sits next to the red border.
Where it stops holding
Brand color that carries no pass/fail needs no extra shape. A whole clickable card that shows selection with a border plus a check already has shape. Syntax highlighting that only serves people who see color needs a separate error list. Tickets that must still show state after printing cannot be ink-only hue. A user-side color-filter mode is not a product waiver — the UI must stand when the filter is off.
Applying it
- Errors and warnings: written explanation plus icon. Do not only redden the border.
- Switches and presence: ON/OFF, connected/disconnected, or clearly different shapes (full moon / crescent, check / empty). Do not rely on green versus gray dots.
- Selected rows need a check, added weight, or the word “selected” besides a fill.
- Verify: strip color from a screenshot and ask someone who has not seen the mock to name every state. Each miss gets a shape or a word. Walk with the keyboard and confirm selection is not fill color alone.