Color Contrast and Readable Text
Use Tailwind's color shades to meet WCAG AA and AAA contrast ratios, and audit your palette for accessible text-on-background combinations.
Why Color Contrast Matters
Color contrast is the visual difference between foreground text and its background. Low contrast makes text difficult to read — especially for users with low vision, color blindness, or those reading in bright sunlight. WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios that all web content should meet to be considered accessible to users with visual impairments. Meeting these ratios is both an ethical obligation and often a legal requirement.
WCAG Contrast Ratios Explained
WCAG defines two success criteria for contrast. AA (Level 2) requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA (Level 3) requires 7:1 for normal text and 4.5:1 for large text. The contrast ratio is calculated from the relative luminance of the two colors — white on black is 21:1 (maximum), while light gray on white can be less than 1.5:1 (fails).
/*
WCAG Contrast Ratio Requirements
Level AA (minimum standard):
- Normal text (< 18pt regular, < 14pt bold): 4.5:1
- Large text (≥ 18pt regular, ≥ 14pt bold): 3:1
- UI components (borders, icons): 3:1
Level AAA (enhanced standard):
- Normal text: 7:1
- Large text: 4.5:1
Common examples:
- black (#000) on white (#fff): 21:1 ✓ AAA
- gray-900 on white: ~18:1 ✓ AAA
- gray-600 on white: ~5.9:1 ✓ AA
- gray-400 on white: ~3.5:1 ✗ Fails AA
- white on blue-500: ~3.8:1 ✗ Fails AA for small text
*/All lessons in this course
- Color Contrast and Readable Text
- Focus Indicators and Keyboard Navigation
- ARIA Attributes and Screen Readers
- Accessible Form Components