a11y/color-contrast

Why

Low-contrast text is hard or impossible to read for people with low vision, colour vision deficiency, ageing eyes, or anyone on a phone in sunlight. Grey placeholder-style text and brand colours on white are the usual failures.

Fix

Pick text and background tokens as tested pairs: 4.5:1 for body text, 3:1 for text of at least 24 CSS px or 18.5 CSS px bold. The thresholds are hard: 4.49:1 fails. Check every state (hover, disabled is exempt, placeholder is not) and both colour schemes. Text over images needs a solid or gradient scrim behind it.

Examples

/* bad: #9ca3af on white is about 2.5:1 */
.muted { color: #9ca3af; }
/* good: #4b5563 on white is about 7.6:1 */
.muted { color: #4b5563; }

Sources

• WCAG 2.2, Understanding SC 1.4.3 Contrast (Minimum)
• WCAG 2.2, definition of contrast ratio

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/color-contrast