Color Contrast
The luminance difference between text and its background, measured as a ratio for accessibility compliance.
Plain English
Contrast is about legibility. Low contrast — light grey text on a white background — looks elegant to a designer at full brightness on a calibrated screen, but is invisible to a user with average vision on a phone in sunlight. WCAG defines minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+ regular). Treating these as minimum floors, not targets, produces genuinely readable UIs.
Technical
WCAG 2.1 contrast ratio is calculated using relative luminance (L): (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the two colours. Luminance is derived from linearised sRGB values. Tools: browser DevTools accessibility panel, axe, Stark, or the APCA algorithm (WCAG 3.0 draft) for more perceptually accurate measurement. AA requires 4.5:1 (normal text), AAA requires 7:1.
Live Demo
Fails WCAG AA
The quick brown fox jumps over the lazy dog. Good contrast makes text comfortable to read in any lighting condition.
Passes WCAG AA
The quick brown fox jumps over the lazy dog. Good contrast makes text comfortable to read in any lighting condition.
Exceeds WCAG AAA
The quick brown fox jumps over the lazy dog. Good contrast makes text comfortable to read in any lighting condition.
WCAG AA (4.5:1) is the legal minimum for body text. Aim for AAA on critical content.
Usage
✓ Good usage
Use #1e293b text (ink-800) on a white background — this delivers ~14:1 contrast, comfortably exceeding AA and AAA for all text sizes.
✗ Bad usage
Light grey placeholder text (#94a3b8 / ink-400) left as the label colour rather than just the placeholder — at 2.6:1 it fails AA for body text.
Recommended values
- ≥ 4.5:1 — body text (WCAG AA, required)
- ≥ 3:1 — large text (18px+ bold / 24px+ regular) and UI components
- ≥ 7:1 — body text (WCAG AAA, best practice for critical content)
- Avoid using contrast ratio as the only signal — colour blind users need shape/pattern cues too
Common mistakes
- Checking contrast only in the design tool, not in the browser where gamma/rendering differs.
- Relying solely on colour to convey state — use icons or text alongside colour for error/success states.
- Forgetting to check contrast in dark mode separately.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use #1e293b for body text on white for 14:1 contrast. Ensure all interactive elements meet 3:1 against their background. Never use ink-400 or lighter as a text colour on white.