Colour contrast checker (WCAG 2.2)
Work out the contrast ratio between text and background colour with the WCAG 2.2 formula and see which success criteria (1.4.3, 1.4.6, 1.4.11) are met.
Contrast ratio
15.24:1
The sample text shows the colour combination.
Large text
| Criterion | Required | Result |
|---|---|---|
| 1.4.3 (AA) · Normal text | 4.5:1 | ✓ Met |
| 1.4.3 (AA) · Large text | 3.0:1 | ✓ Met |
| 1.4.6 (AAA) · Normal text | 7.0:1 | ✓ Met |
| 1.4.6 (AAA) · Large text | 4.5:1 | ✓ Met |
| 1.4.11 (AA) · UI components and graphics | 3.0:1 | ✓ Met |
How it works
For each colour the relative luminance is calculated as WCAG 2.2 defines it for the sRGB colour space; the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter colour. It ranges from 1:1 to 21:1.
WCAG 2.2 thresholds: text 4.5:1 and large text 3:1 for level AA (1.4.3); 7:1 and 4.5:1 for level AAA (1.4.6); 3:1 for user interface components and graphics (1.4.11). Large text means at least 18 point, or 14 point bold.
The ratio is shown cut to two decimals, so a value just below a threshold (4.499) never appears as 4.50; the comparison uses the exact value. The tool does not account for transparency, gradients, background images or the criteria's exceptions (decorative text, logos).
Sources
- Web Content Accessibility Guidelines (WCAG) 2.2: contrast ratio, relative luminance, success criteria 1.4.3, 1.4.6, 1.4.11, large scale text, World Wide Web Consortium (W3C) (retrieved on 20 October 2026)