Skip to content

Rule · Accessibility

Text has insufficient color contrast

a11y/color-contrasterrorvoid a11yupdated

Why it matters

Low-contrast text is unreadable for people with low vision and for everyone in sunlight. WCAG AA needs 4.5:1 for body text and 3:1 for large text.

How to fix it

Darken the text or lighten the background until the ratio passes; check hover/disabled/placeholder states too. Use the design tokens' fg/fg-muted pairs.

Example

ts
color: var(--fg-muted); /* tokens are pre-checked for ≥ 4.5:1 on --bg */

References

void a11y reports 48 rules in this category. WCAG 2.2 AA through axe-core, plus checks axe can't do alone: visible keyboard focus, 24/44px target size on mobile, 320px reflow and disabled zoom.