// Tool · Accessibility · Free
Colour contrast checker.
Paste two hex values and get the WCAG contrast ratio, with AA and AAA verdicts for normal text, large text and interface elements. The maths runs in your browser.
// Your colours
// Result
15.97:1
15.97:1, Normal text at this ratio meets WCAG AA, which asks for 4.5:1.
// How it works
The WCAG formula.
Contrast is the ratio between how much light each colour reflects, measured the way human eyes weight red, green and blue. Two hex codes that look far apart on screen can sit close together on that scale. WCAG sets out the calculation precisely, and this tool follows it step for step.
Step one: linearise each channel
Take each of the red, green and blue channels and divide by 255. If the result is 0.03928 or lower, divide it by 12.92. Otherwise raise (c + 0.055) / 1.055 to the power of 2.4. This undoes the gamma curve that sRGB applies for display.
Step two: weight them into relative luminance
Multiply the linearised red by 0.2126, green by 0.7152 and blue by 0.0722, then add the three together. Green dominates because human vision is most sensitive to it, which is why a mid green and a mid red of the same brightness on screen can fail against each other.
Step three: compare
Divide the lighter colour's luminance plus 0.05 by the darker colour's luminance plus 0.05. Pure black against pure white gives 21:1, the maximum. Two identical colours give 1:1. Everything else sits in between, and the 0.05 term accounts for ambient light reflecting off the screen.
Where the tool stops
It works on opaque sRGB colours only, and it judges the floored two-decimal value so the number and the verdict never disagree. If the result is a fail, that is a design problem rather than a maths problem, and it is the kind of thing we fix in UX and UI work. See how it plays out on real projects in our case studies.
Contrast, answered.
WCAG 2.2 level AA asks for 4.5:1 on normal text and 3:1 on large text. Level AAA raises those to 7:1 and 4.5:1. Interface parts that carry meaning, such as form borders, icons and focus rings, need 3:1 under success criterion 1.4.11. AA is the level most UK accessibility policies and public sector regulations reference.
WCAG defines large text as 18.66px or bigger when bold, or 24px or bigger at any weight. Anything smaller is normal text and needs the higher 4.5:1 ratio. Headings usually clear the bar. Body copy, captions and small labels rarely do without care.
Each colour channel is converted from 0 to 255 into a 0 to 1 value, then linearised: values at or below 0.03928 are divided by 12.92, and higher values go through ((c + 0.055) / 1.055) to the power of 2.4. The three results are weighted 0.2126 red, 0.7152 green and 0.0722 blue to give relative luminance. The ratio is (lighter + 0.05) divided by (darker + 0.05). That is the WCAG formula, implemented exactly.
Tools round differently. This one floors the ratio to two decimal places before judging it, so the number you see and the pass or fail verdict always agree. A checker that rounds up can show 4.50:1 and call it a pass when the true value is 4.496:1.
It clears one criterion out of dozens. Keyboard operation, focus visibility, form labels, heading structure, alt text and motion preferences all sit outside this tool. Contrast is the easiest to check and the easiest to get wrong, which is why it is worth checking first.
Not directly. Relative luminance is defined on opaque sRGB values, so a semi-transparent colour has to be flattened against whatever sits behind it first. Work out the blended hex in your design tool, then paste that in here.
// Next step
Failing colours are fixable.
We build accessible palettes into the design system rather than patching them at the end.