Color Contrast

WCAG sets minimum contrast ratios — 4.5:1 for body text, 3:1 for large text. Easy to check, easy to get wrong.

3 min read Level 1/5 #css#accessibility#contrast

What you'll learn

Understand the WCAG contrast ratios
Check pairs in DevTools
Pick accessible palettes

Text needs to contrast with its background. Too low and it’s hard or impossible to read — for users with reduced vision, low-quality screens, or just bright sun.

WCAG Targets

Level	Body text	Large text (>18pt or >14pt bold)
AA	4.5:1	3:1
AAA	7:1	4.5:1

AA is the practical floor. AAA is for content where reading is the purpose (long-form, accessibility-focused sites).

Check With DevTools

In Chrome, hover any text color in the Styles panel to see the contrast ratio. Red badge = fails. Yellow = AA only for large text. Green = passes.

Firefox has a similar feature in its Accessibility inspector.

Tools

Color contrast analyzer (TPGi) — desktop app
WebAIM contrast checker — web tool
Stark — Figma plugin

Common Pitfalls

Light gray on white — #ccc on #fff is way below 4.5:1
Brand color on white — many brand colors fail body-text contrast
Text on photos — usually needs a translucent overlay
Hover/focus states — easy to forget; check both states

Don’t Just Pass — Design For It

Build accessibility into your design tokens. If your token palette has accessibility built in, you can’t accidentally choose a bad combo:

:root {
  --text: #1a1a1a;     /* always meets contrast against --bg */
  --bg: #ffffff;
  --brand: #4f4dff;    /* meets contrast as link text */
  --muted: #5a5a5a;    /* the LIGHTEST gray that still passes for body */
}

Pick the lightest “muted” text that still passes — and use that as the limit.

Beyond Text — Non-Text Contrast

WCAG also has 3:1 for non-text elements — icons, form borders, focus rings. Often overlooked. A 1px gray border can be invisible on certain monitors.

Up Next

Focus rings and keyboard navigation.

Focus & Keyboard →