Runs in your browser · nothing is uploaded
Color Contrast Checker
Check whether your text and background colours meet WCAG 2.2 AA and AAA — using the W3C formulas, exact thresholds, transparency handling and the closest colours that pass.
A passing ratio covers one pair of colours. It doesn't make a page accessible on its own — font weight and size, focus indicators, text over images and many other WCAG criteria still apply.
The W3C formulas
- Linearise each channelc = v/255; c ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4
- Relative luminanceL = 0.2126 R + 0.7152 G + 0.0722 B
- Contrast ratio(L_lighter + 0.05) ÷ (L_darker + 0.05)
From the definitions of relative luminance and contrast ratio in WCAG 2.2 (checked 6 October 2026).
Worked examples
Black on white: (1 + 0.05) ÷ (0 + 0.05) = 21:1. Any colour on itself: 1:1. #777777 on white is 4.48:1 — it fails AA for normal text; #767676 is 4.54:1 and passes.
Frequently asked questions
What contrast ratio do I need?+
Under WCAG 2.2: at least 4.5:1 for normal text and 3:1 for large text at level AA (success criterion 1.4.3); 7:1 and 4.5:1 at level AAA (1.4.6). Icons, input borders, focus indicators and other user-interface graphics need 3:1 against adjacent colours (1.4.11).
What counts as large text?+
At least 18 point (24 CSS px) regular, or 14 point (about 18.66 CSS px) bold.
How is the ratio calculated?+
Each colour's relative luminance is worked out with the W3C formula — the sRGB channels are linearised and weighted 0.2126 red, 0.7152 green, 0.0722 blue. The ratio is (lighter + 0.05) ÷ (darker + 0.05), from 1:1 to 21:1.
Why does 4.48 fail when it's so close to 4.5?+
WCAG thresholds are exact. The checker compares the unrounded ratio and shows two decimals rounded down, so a ratio that fails is never displayed as 4.50.
How are transparent colours handled?+
A transparent background is first blended onto the page colour behind it (white unless you change it), then the text colour is blended onto that result — the colours a reader actually sees.
If my colours pass, is my site accessible?+
No. Contrast is one success criterion among many. Text over images or gradients, focus visibility, font weight, motion, keyboard access and structure all matter too.