Skip to content

Contrast Ratio

The luminance ratio between text and its background; WCAG AA requires 4.5:1 for body text, 3:1 for large text and UI components.

Contrast ratio measures how visually distinct two colors are, on a scale from 1:1 (identical) to 21:1 (black on white). It's calculated from the relative luminance of each color following the WCAG 2.x formula.

WCAG 2.2 AA thresholds: 4.5:1 for normal-size text, 3:1 for large text (18pt+ or 14pt+ bold), 3:1 for UI components and meaningful graphical objects (icons, focus indicators, form-field borders). AAA is stricter: 7:1 for normal text, 4.5:1 for large text.

WCAG 3 introduces APCA (Advanced Perceptual Contrast Algorithm) which models perceived contrast more accurately, but APCA is not yet a recommendation. Tools that rate against WCAG 2.x (Lighthouse, axe, WebAIM Contrast Checker) remain authoritative for compliance audits.

Related terms

Further reading

Send Feedback