WCAG Contrast Basics
WCAG contrast ratio compares foreground and background luminance—4.5:1 minimum for normal text, 3:1 for large text.
Quick answer
WCAG 2.x contrast ratio ranges 1:1 to 21:1. Level AA requires 4.5:1 for normal text (<18pt or <14pt bold) and 3:1 for large text. UI components and graphics need 3:1 against adjacent colors. Use contrast checker on final hex pairs including alpha composited over background.
Overview
Low-contrast gray-on-gray body copy excludes readers with low vision and fails WCAG audits for public sector and conscientious product teams. Contrast ratio computes from relative luminance of sRGB colors—not hue preference—so thin mint on white may fail while navy on white passes easily. Designers test primary text, secondary muted text, button labels, focus rings, and placeholder text against actual backgrounds, not isolated swatches. Dark mode reverses assumptions: white text on near-black may pass, but secondary #888 on #121212 often fails. Automated checkers sample computed CSS after alpha blend; manual review catches gradient text and image overlays.
What contrast ratio measures
Luminance formula weights green channel heavily matching human perception. Ratio (L1 + 0.05) / (L2 + 0.05) where L1 lighter. Pure black on white 21:1.
Ratio is symmetric swapping fg/bg. Transparent text blends with backdrop first—checker must composite alpha.
AA vs AAA thresholds
AA normal text 4.5:1 industry common compliance target. AAA 7:1 stricter optional body text. Large text AA 3:1—18pt+ regular or 14pt+ bold approximations.
Non-text UI graphical objects 3:1 minimum under WCAG 2.2 SC 1.4.11—icons, form borders, chart lines.
Testing workflow in design and dev
Figma plugins and browser DevTools sample token pairs. Test hover/focus/disabled states—not only default. Placeholder text must meet contrast or risk form accessibility failure.
Brand palettes define accessible primary-on-white and primary-on-dark pairs upfront avoiding late redesign.
Fixing failures without abandoning brand
Darken text or lighten background slightly—small luminance shift often crosses 4.5 threshold. Increase font weight/size to qualify as large text 3:1 where appropriate.
Avoid pure #777 secondary on white; bump to #595959 neighborhood for AA normal text approximations.
Contrast is necessary not sufficient
WCAG also requires focus visibility, not color alone for state, keyboard access. Contrast pass with tiny 10px text still poor UX—respect minimum readable sizes.
Video captions and motion reduction separate criteria—color contrast one pillar of broader a11y program.
Examples
Body text pass
#212529 on #FFFFFF ≈ 16:1 passes AA and AAA normal text.
Muted fail fix
#999 on #fff ≈ 2.85:1 fails—darken to #767676 ≈ 4.54:1 for AA normal.
Common mistakes and edge cases
- Testing hex on checker without alpha compositing over photo background.
- Assuming brand color pass applies to all derived tints without retest.
- Ignoring disabled button contrast—WCAG still expects readable or distinct pattern.
- Using color alone to convey error state without icon or text label.
Related resources
Related tools
Last reviewed: 2026-05-23