Check a color pair
—
| Content | Required ratio | AA | AAA | |
|---|---|---|---|---|
| Normal text (< 18pt / < 14pt bold) | 4.5 : 1 | — | — | |
| Large text (≥ 18pt or ≥ 14pt bold) | 3 : 1 | — | — | |
| UI components & graphical objects | 3 : 1 | — | n/a | |
Large heading preview
This is how normal body text looks in your chosen combination. Readable at length? Your readers will decide in seconds.
Ratios follow WCAG 2.1 success criteria 1.4.3 (Contrast Minimum), 1.4.6 (Contrast Enhanced) and 1.4.11 (Non-text Contrast). Fixing failures site-wide? The free Accessibility Scanner finds low-contrast text on a whole page.
How the ratio is calculated
Each color is converted to sRGB relative luminance (L = 0.2126·R + 0.7152·G + 0.0722·B after gamma expansion). The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. A ratio of 1:1 means identical colors; 21:1 is the maximum (black on white). This matches the formula in the WCAG specification exactly.
← All free tools · Text on image checker · Full-page accessibility scanner · Palette generator · Dansk version · dansk guide
Frequently asked questions
What ratios do AA and AAA require?
WCAG 2.x AA requires 4.5:1 for normal text and 3:1 for large text (18 pt or 14 pt bold and up). AAA raises this to 7:1 and 4.5:1 respectively. Non-text UI components like input borders need 3:1 under AA.
How is contrast ratio calculated?
Relative luminance of both colors is computed per the WCAG formula (sRGB values linearized, then weighted 0.2126 R + 0.7152 G + 0.0722 B), and the lighter value is divided by the darker plus 0.05. The result ranges from 1:1 to 21:1.
Does it check more than foreground/background pairs?
You can test any pair of colors, including disabled states and placeholder text. Note that WCAG exempts logotypes and purely decorative elements from the thresholds.
Why does white text on my brand color fail?
Many mid-tone brand colors (yellows, light blues, tans) have high luminance, so white on top yields ratios near 2:1. Switching to dark text often passes instantly — try both directions before redesigning the palette.