Colour Contrast Checker
WCAG ratios for a pair, or a grid for a whole palette.
Colours
The quick brown fox
Normal body text at 17px — this is the size most of your interface actually uses, and the one AA is measured against.
Small print at 14px sits here.
11.51:1
WCAG ratios run from 1:1 (identical) to 21:1 (black on white).
Normal text (AA)
Below 18.66px bold / 24px · needs 4.5:1
Normal text (AAA)
Enhanced contrast · needs 7:1
Large text (AA)
18.66px bold / 24px and up · needs 3:1
Large text (AAA)
Enhanced contrast · needs 4.5:1
UI components
Borders, icons, focus rings · needs 3:1
Check one foreground and background pair against every WCAG threshold, or paste a whole palette and see every possible combination graded at once. The grid view is the one that tends to change minds: it shows which of your brand colours can never legally sit on each other.
What contrast ratio do I actually need?
4.5:1 for normal body text and 3:1 for large text to meet WCAG AA, which is the level most accessibility legislation references. AAA raises those to 7:1 and 4.5:1. Interface components — borders, icons, focus rings, form outlines — need 3:1 against whatever sits behind them.
What counts as large text?
18.66px or larger when bold, or 24px or larger at normal weight. Below that, the stricter normal-text thresholds apply. It is worth checking your actual rendered sizes rather than assuming, because a heading scaled down on mobile can quietly cross back over the line.
Why is my brand colour failing?
Mid-tone colours are the usual culprit: they are too dark for white text and too light for black. The fix is rarely to abandon the colour — it is to keep it for large display type, backgrounds and accents, and use a darker or lighter variant for body copy.
Does this handle transparency?
Alpha is deliberately ignored. Contrast against a translucent colour depends on everything behind it, so reporting a ratio would mean inventing a backdrop. Composite the colour first, then check the result you actually render.
Does passing WCAG mean my design is accessible?
It means your colour contrast is. Contrast is one success criterion among many — focus order, keyboard access, target sizes, motion preferences and semantics all still need attention. It is a floor, not a finish line.
We build the kind of software this tool is a small piece of — web platforms, mobile apps and design systems, end to end.