Text must meet WCAG AA contrast ratio: 4.5:1 for normal text, 3:1 for large text. Low-contrast text is unreadable for users with low vision, color blindness, or anyone using a screen in bright sunlight — affecting up to 8% of male users (color blindness alone).
Why This Matters
Low-contrast text is unreadable for users with low vision (285 million people worldwide), color blindness (8% of men, 0.5% of women), and anyone using a screen in bright ambient light. Failing WCAG AA contrast requirements also creates legal liability under ADA and European Accessibility Act compliance.
Color contrast is the ratio between the luminance of foreground text and its background. When contrast is too low, text becomes difficult or impossible to read for users with low vision, color blindness, cataracts, or anyone in challenging viewing conditions (bright sunlight, glare, cheap monitors).
WCAG defines two levels: AA (minimum) requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). AAA (enhanced) requires 7:1 and 4.5:1 respectively. Most legal requirements reference AA as the baseline.
This is not a niche concern. Color vision deficiency alone affects approximately 300 million people worldwide. Add low vision, aging eyes, and environmental factors, and you are excluding a significant portion of your user base with every low-contrast design choice.
The rule
All text must meet WCAG AA contrast ratios: 4.5:1 for normal text (under 18px bold or 24px regular) and 3:1 for large text. This applies to text on backgrounds, placeholder text, disabled states, and text on images.
Bad example
/* Light gray text on white background — contrast ratio ~1.5:1 */.subtitle { color: #aaaaaa; background: #ffffff;}/* Placeholder text barely visible — contrast ratio ~2:1 */input::placeholder { color: #cccccc;}/* Trendy but unreadable — light blue on white ~1.9:1 */.link { color: #87ceeb;}
Good example
/* Dark gray on white — contrast ratio ~7.5:1 */.subtitle { color: #595959; background: #ffffff;}/* Placeholder meets 4.5:1 — contrast ratio ~4.6:1 */input::placeholder { color: #767676;}/* Accessible link color on white — contrast ratio ~4.5:1 */.link { color: #0969da;}
How to detect
Use automated tools to audit contrast:
Browser DevTools: Chrome DevTools shows contrast ratios in the color picker
axe DevTools: Flags all contrast failures automatically
Lighthouse: Accessibility audit includes contrast checks
Figma plugins: Stark or A11y - Color Contrast Checker for design-time checking
For Tailwind projects, check that you are using color tokens from the palette rather than arbitrary values.
Remediation
Run a Lighthouse or axe accessibility audit to identify all contrast failures
For each failure, increase the foreground darkness or background lightness until the ratio meets 4.5:1
Use a contrast checker tool (e.g., WebAIM Contrast Checker) to verify specific color pairs
Update your design system tokens to ensure all color combinations meet AA requirements
Add contrast checking to your design review process so new colors are verified before implementation