Contrast checker
Enter any two colour values and see the WCAG 2.2 contrast ratio, what it passes, and the smallest calculated change that would reach each threshold.
Pair
Results
3.71:1
- Normal textneeds 4.5:1Fails
- Large textneeds 3:1Passes AA
- UI & graphicsneeds 3:1Passes AA
Preview
The measure of a colour system is whether people can read it.
WCAG 2.2 treats text as “large” at 18.66px bold or 24px regular. Below that, 4.5:1 is the AA threshold; at or above it, 3:1.
Reversed out
Calculated adjustments
The smallest OKLCH lightness change that reaches each target, holding hue and chroma. Nothing is applied automatically.
AA normal text
#426DEFDarken foreground by 4.6% lightness to reach 4.5:1#1E1E1EDarken background by 76.5% lightness to reach 4.5:1
AAA normal text
#294CCCDarken foreground by 14.8% lightness to reach 7:1- No background lightness reaches this target.
How this works
Contrast ratio is defined in WCAG 2.2 as (L1 + 0.05) / (L2 + 0.05), where L is relative luminance: each sRGB channel is linearised, then weighted 0.2126 red, 0.7152 green and 0.0722 blue. The result runs from 1:1 (identical) to 21:1 (black on white).
The three thresholds
- Normal text needs 4.5:1 for AA and 7:1 for AAA.
- Large text — 18.66px bold or 24px regular and above — needs 3:1 for AA and 4.5:1 for AAA.
- Non-text (interface components, meaningful graphics) needs 3:1. Success criterion 1.4.11 has no AAA tier.
How the adjustments are calculated
Colorstruct searches OKLCH lightness in both directions for the nearest value that reaches the target, holding hue and chroma and mapping the result back into the sRGB gamut. Because lightness in OKLCH is perceptual, the change looks proportionate rather than lurching. If no lightness can reach the target — which happens when both colours sit mid-scale — that is reported instead of a near miss.
A translucent foreground is composited over the background before measuring, because that is what a reader actually sees.