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. Thresholds below follow WCAG 2.2 Success Criterion 1.4.3 (text) and 1.4.11 (non-text contrast), published by the W3C.
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 is the common compliance target under WCAG 2.2 SC 1.4.3. AAA 7:1 is stricter and optional for body text. Large text AA is 3:1—approximately 18pt+ regular or 14pt+ bold.
Non-text UI graphical objects need 3:1 against adjacent colors under WCAG 2.2 SC 1.4.11—icons, form borders, and 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.
Large text vs normal text
#767676 on #FFFFFF is about 4.54:1: it passes AA for normal text. A lighter #8A8A8A at about 3.5:1 can pass AA large text (18pt+ or 14pt bold) but fails AA normal body copy—do not reuse the large-text pair for 16px UI labels.
Frequently asked questions
What contrast ratio does WCAG AA require?
WCAG 2.2 SC 1.4.3 requires 4.5:1 for normal text and 3:1 for large text. Non-text UI needs 3:1 under SC 1.4.11.
What counts as large text?
About 18 point regular or 14 point bold and larger. Below that, use the 4.5:1 normal-text threshold.
Does a pass on white mean the color is always accessible?
No. Retest every background, including dark mode, hover states, and images behind text.
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-08-19