How this tool works
The ratio is calculated the way the accessibility guidelines define it: each colour is converted to a relative luminance, with the three channels weighted for how bright the eye perceives them — green counts for far more than blue — and the two luminances are compared as a ratio between 1 and 21. Identical colours give 1:1; black against white gives 21:1. It is a measure of light difference rather than of colour difference, which is why two colours that look quite distinct can still fail.
Two thresholds are reported: 4.5:1, which is the AA minimum for ordinary body text, and 7:1, which is the enhanced AAA level. These are the figures for normal-sized text, and they are the ones that matter most often, because body copy is where readability is won or lost.
Reading the result honestly
- The thresholds shown are for normal-sized text: large text — around 24px, or 19px when bold — is held to 3:1 for AA and 4.5:1 for AAA. A headline that fails here may still pass at its actual size.
- Interface elements have their own minimum: buttons, borders, focus rings and icons that convey meaning need 3:1 against what surrounds them. That is a lower bar than text but it is not zero.
- The ratio ignores hue entirely: two colours of similar lightness fail however different they look, which is exactly the point — it is modelling readers who do not distinguish those hues.
- Test the colours you will actually ship: text over a gradient, an image or a semi-transparent overlay has no single background colour. Sample the worst point rather than the average one.