Error identification cannot rely on color alone

What it is

Turning the box red, or reddening the label, is only a hue change if no text, icon, or line-style change arrives with it. Error identification cannot rely on color alone means people can still point to “this item is currently wrong” and read what is wrong—in grayscale, with color-vision deficiency, or with contrast pushed to an extreme. Color may be an accelerator. It cannot be the only cue. This entry is about how an error state is seen. It is not where focus should land, and not whether the field must be scrolled into the viewport. Hanging the error sentence on the field with a programmatic property is association for assistive technology; it does not replace a non-color mark for people who can see.

Why it happens

Color-vision deficiency, a phone in glare, a grayscale printout, and a low-saturation night theme all collapse a “red box” into “a slightly darker box.” Red does not mean stop in every culture. If hue difference is the only way people find errors, search degrades to reading every row under those conditions. A second layer is state fighting emphasis. If the product already uses red for the primary button or a sale price, error-only-red loses exclusive rights to “this is failure.” People have to classify this red against that red, and load returns to reading body copy. A reliable mark runs a shape or text channel beside color: a short sentence next to the field, a border that changes from solid to a warning line or gains an icon, the word “Error” after the label. The sentence also carries the reason; the icon only carries “wrong here.” Without copy there is only an alarm; without a non-color shape it only works for people who can separate red from green.

Studying it

Build the same failed form as “red only,” “red + icon,” “red + copy,” and “copy and line style in grayscale.” Include color-vision simulations and participants who actually have a deficiency.

Independent variables: error channel (hue / icon / copy / line style), theme (light / dark / high contrast), red–green deficiency simulated or not. Dependent variables: time and misses when pointing out every invalid item, whether invalid items can be marked on a grayscale screenshot, times promotional red is taken as an error.

Well-calibrated lab monitors underrate hue collapse outdoors and on cheap screens. Use simulation filters and grayscale prints; do not only ask whether red “feels prominent enough.”

Where it stops holding

Some people with color-vision deficiency can still use a lightness difference; if error red is much darker than idle gray, they may “see the border change” and still not read it as error without copy. Conversely, an icon without copy has to be learned first; an obscure bang in a hollow square is decoration. When brand forces every stroke to brand red, errors must move to line style, icon, and words—not a redder red. Flashing or motion-only marks harm photosensitive users and cannot stand in for color.

Applying it

• Give every error state at least: a sentence beside the field, and a shape change that does not depend on hue (a heavier stroke, solid-to-dashed, or an error icon in a fixed position).
• Do not ship failure as “red box, unchanged label, no sentence.” If the primary button is already red, errors need copy and icon even more, not more red.
• Check under grayscale and a color-vision simulation: invalid items can still be pointed out among valid ones, and the reason is readable.
• Verify by converting a failed-form screenshot to grayscale and asking someone uninvolved to circle problem fields; missing circles mean color was doing all the work. Walk it again with a red–green filter. Remove the error copy and leave only the red box, and treat that design as unfit to ship.

Related

• Within the group: H1.05.1 A failed submit must move focus to the first invalid field · H1.05.2 The invalid field must be visible in the viewport
• Adjacent: J2.03 Information not by color alone · A1.06 Color vision deficiency · H1.15 Accessible form labeling
• Search terms: color alone · error icon · color vision deficiency