Colour Contrast Checker
The ratio, the pass or fail at each level, and a preview of what it looks like.
Contrast is the accessibility requirement that is easiest to check and most often missed, usually because grey-on-white looks elegant on a designer’s calibrated screen and disappears on a phone in daylight. This tool gives the ratio, the verdict at each WCAG threshold, and a live preview at both the sizes the rules distinguish.
Large heading text
Body copy at a normal reading size. This is the size most of a page is set in, and the size the stricter threshold applies to.
How it works
Set the two colours
Use the pickers, or paste hex values into the fields underneath.
Read the ratio
From 1:1 for identical colours to 21:1 for black on white.
Check against the thresholds
Body text needs 4.5:1 for AA; large text is allowed 3:1.
What the ratio measures, and what "large text" means
The figure compares the relative luminance of the two colours — how much light each reflects, weighted for the eye’s much greater sensitivity to green than to blue. It runs from 1:1, meaning two identical colours, to 21:1 for pure black on pure white. Because it uses luminance rather than hue, two very different colours at similar brightness can score badly despite looking distinct.
WCAG sets 4.5:1 for normal text at level AA and 7:1 at AAA. Large text gets a lower bar, 3:1 at AA and 4.5:1 at AAA, because thicker strokes stay legible at lower contrast. "Large" has a specific definition: at least 18pt, or 14pt if bold — roughly 24px and 18.66px in CSS at default settings. A 20px heading is not large text by this rule.
Since WCAG 2.1 the same 3:1 minimum applies to interface components and meaningful graphics: input borders, focus rings, icons that carry information, the boundary of a toggle. A form whose fields are outlined in a pale grey that fails this test is inaccessible even when its labels pass comfortably.
Where the rules stop and judgement starts
The threshold is a floor, not a target. Text at exactly 4.5:1 passes and is still uncomfortable to read for a long stretch, particularly for anyone over about forty or on a screen in sunlight. Body copy is worth pushing toward 7:1 where the design allows it, and the cost is usually a slightly darker grey.
Two cases the number does not cover. Placeholder text inside form fields is real text and must meet the same ratio — the browser default grey almost never does. And disabled controls are exempt from the requirement, which is a legal exemption rather than a usability one: a disabled button nobody can read is still a button nobody can read.
The algorithm itself is known to be imperfect. It systematically overrates dark backgrounds with light text, which is why a dark theme that passes on paper can feel harsher in use, and it takes no account of font weight or size beyond the single large-text cutoff. The successor being developed for WCAG 3, APCA, addresses both. Until it lands, the 2.x ratio remains what is tested and what is legally referenced — treat a pass as necessary rather than sufficient.