Accessibility

`a11y/no-color-only`

Colour is never the only cue; errors, states, links in text and chart series also differ by text, icon, shape or underline.

seriousbrowserWCAG 1.4.1 · Afe-a11y-visual

Why

About one in twelve men cannot tell some colours apart, and screen readers do not announce colour at all. A field marked only with a red border, or a link that differs from the paragraph only by colour, is invisible to them.

Fix

Add a second cue: an error message and an icon next to the red border, an underline on links inside text, a pattern or a label on chart series, a check mark on the selected option. axe checks links inside text blocks; a person checks the rest.

Examples

/* bad */
.prose a { color: #1d4ed8; text-decoration: none; }
/* good */
.prose a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 0.15em; }

Sources

WCAG 2.2, Understanding SC 1.4.1 Use of Color

Facts

Id: a11y/no-color-only
Severity: serious
Check: browser needs a rendered page: audit --url
Applies to: page
WCAG 2.2: 1.4.1, level A
Same problem in: axe-core link-in-text-block, Lighthouse link-in-text-block
Taught by the skill: fe-a11y-visual Contrast, colour, size and reflow
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/no-color-only