Contrast ratio

AccessibilityDefined term⦿ live instrument below

Contrast ratio compares the relative luminance of foreground and background colors on a scale from 1:1 to 21:1, using the formula fixed in WCAG: (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the lighter and darker relative luminances.

Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18 pt, or 14 pt bold); AAA raises these to 7:1 and 4.5:1. WCAG 2.2 also applies the 3:1 floor to non-text essentials like focus indicators and control boundaries.

Text colorBackground

Contrast ratio16.6:1

AA normal (≥4.5)PASS

AA large (≥3)PASS

AAA normal (≥7)PASS

AAA large (≥4.5)PASS

Live instrument — see Contrast ratio behave.

Deep dive: full analysis with this mechanism →