Contrast checker
WCAG 2.2 contrast ratio with pass/fail for every text size, and a suggested fix.
Passes AA for all text sizes
Large text — 24px or 18.66px bold
Normal body text at 16 pixels. The quick brown fox jumps over the lazy dog, and this sentence exists so you can judge readability at a realistic length rather than from two words.
Small print at 13 pixels, which is where contrast problems bite hardest.
| Requirement | Needs | Result |
|---|---|---|
| AA — normal text | 4.5 : 1 | Pass |
| AAA — normal text | 7 : 1 | Fail |
| AA — large text | 3 : 1 | Pass |
| AAA — large text | 4.5 : 1 | Pass |
| AA — UI components and graphics | 3 : 1 | Pass |
Try these pairs
How it works
Contrast ratio compares the relative luminance of two colours. It runs from 1:1 (identical) to 21:1 (pure black on pure white).
ratio = (L₁ + 0.05) / (L₂ + 0.05)
L = 0.2126 R + 0.7152 G + 0.0722 B (after gamma correction) What counts as large text
WCAG defines large as 18pt (24px) or larger, or 14pt (18.66px) bold. Larger glyphs have thicker strokes, so they stay legible at a lower ratio — which is why the threshold drops from 4.5:1 to 3:1.
It is not only about text
WCAG 2.1 added a 3:1 requirement for user-interface components and meaningful graphics — the border of an input, the bar of a chart, an icon that conveys information. Low-contrast form borders are one of the most common accessibility failures on modern sites.
The green weighting
Green contributes 71% of perceived luminance, red 21% and blue 7%. That is why yellow (red plus green, so very bright) is nearly invisible on white, while pure blue on white passes AAA despite looking dark.
The formula has known flaws
WCAG 2.x contrast is a simple ratio that does not model how the eye actually behaves — it is notably unreliable for dark backgrounds, often passing pairs that are hard to read and failing pairs that are fine. APCA, developed for WCAG 3, addresses this but is not yet a standard. For compliance today, WCAG 2 is what is tested against.
Sources
Thresholds and the luminance formula are from WCAG 2.2, success criteria 1.4.3 (Contrast Minimum), 1.4.6 (Contrast Enhanced) and 1.4.11 (Non-text Contrast).