--- title: "Text has insufficient color contrast (a11y/color-contrast)" description: "a11y/color-contrast: Low-contrast text is unreadable for people with low vision and for everyone in sunlight." canonical: https://void-design.vercel.app/rules/a11y/color-contrast lastModified: 2026-09-16 --- # Text has insufficient color contrast `a11y/color-contrast` · severity **error** · category Accessibility · detected by `void a11y` and `void audit` ## 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 ``` color: var(--fg-muted); /* tokens are pre-checked for ≥ 4.5:1 on --bg */ ``` ## References - https://dequeuniversity.com/rules/axe/4.13/color-contrast ## More accessibility rules `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. - `image-alt` Image has no text alternative — [a11y/image-alt](https://void-design.vercel.app/rules/a11y/image-alt) - `button-name` Button has no accessible name — [a11y/button-name](https://void-design.vercel.app/rules/a11y/button-name) - `link-name` Link has no accessible name — [a11y/link-name](https://void-design.vercel.app/rules/a11y/link-name) - `label` Form field has no label — [a11y/label](https://void-design.vercel.app/rules/a11y/label) - `select-name` Select element has no accessible name — [a11y/select-name](https://void-design.vercel.app/rules/a11y/select-name) - `input-button-name` Input button has no accessible name — [a11y/input-button-name](https://void-design.vercel.app/rules/a11y/input-button-name) - `input-image-alt` Image button has no alt text — [a11y/input-image-alt](https://void-design.vercel.app/rules/a11y/input-image-alt) - `html-has-lang` has no lang attribute — [a11y/html-has-lang](https://void-design.vercel.app/rules/a11y/html-has-lang) Detected by `void a11y` and `void audit`. Explain it in a terminal: `void rules a11y/color-contrast`