Use of color

Never let color be the only thing carrying a message. If red is the only clue that something failed, colorblind users get no clue.

don't just turn it redcolor-blind safecolour blind friendlynot relying on color alonered green colorblind problemdont rely on colour aloneadd an icon, not just red texthow do I show status without color

See it

Live demo coming soon

What it is

Use of color is the rule that hue can never be the only carrier of meaning. Red row means failed, green dot means online, blue underline-less text means link: each of those disappears for the roughly 1 in 12 men with color vision deficiency, for anyone on a washed-out screen in sunlight, and for print-to-grayscale. WCAG calls it success criterion 1.4.1, and it is level A, the floor.

The fix is redundancy, not repainting. Pair the color with a second channel: an icon (check, warning triangle, x), a word ('Failed', 'Paid'), a shape or pattern fill in charts, an underline on links, a position change. Color still does the fast scanning work, it just stops being load-bearing on its own.

Three traps. First, people confuse this with contrast ratio: they are different criteria, and passing contrast does nothing for a red/green status dot. Second, links, which is the fight everyone has. An underline is the safest treatment and the one you never have to defend, but a link without one is not an automatic failure: it can pass if it clears 3:1 contrast against the surrounding body text and picks up a non-color cue, usually an underline, on both hover and focus. Third, legends. A chart legend that maps color swatches to series names technically 'uses text', but if the lines in the plot are only distinguishable by hue, the reader still cannot tell which is which. Vary dash pattern, marker shape, or label the lines directly.

Ask AI for it

Audit and fix this UI so no information is conveyed by color alone (WCAG 1.4.1). For every status, error, or state indicator, add a second non-color cue: an icon plus a text label for success/warning/error states, and distinct dash patterns or marker shapes per series in charts. Underline inline links; if the design refuses an underline at rest, give them at least 3:1 contrast against the surrounding text plus a non-color cue on both hover and focus. Keep the existing colors, just make each meaning readable in grayscale. Show me a before/after of each changed component.

You might have meant

color contrast ratioerror identificationnon text contrastwcag