Color contrast checker

What a contrast ratio actually measures

The formula never looks at colour. It reduces each of the two colours to one number — its relative luminance, how much light that pixel emits — and divides. Hue is discarded on the way, so a red and a green of equal luminance score exactly 1 to 1, which the formula calls no contrast at all.

Each channel is first undone from the sRGB transfer curve, because the value stored in a file is not proportional to light. The three linear channels are then weighted 0.2126 red, 0.7152 green and 0.0722 blue. Green dominates and blue barely registers, which is why pure blue on white scores 8.59 to 1 and clears AAA — and that is not how blue text on white reads.

So luminance is not lightness: a grey that looks halfway between black and white sits near 0.18 on the scale, not 0.5. A flat 0.05 is then added to both numbers before dividing, standing in for light scattering inside a real screen and a real eye, which is why the scale stops at 21 to 1.

Where 4.5 to 1 comes from, and what counts as large text

The threshold is not a design opinion. Display standards had already settled on roughly 3 to 1 for reading standard text with unimpaired vision. WCAG’s own explanation then applies a contrast-sensitivity loss factor for vision around 20/40 — an unaided eighty-year-old, or a forty-year-old on a phone in daylight — and 3 to 1 multiplied by that factor is 4.5 to 1. The 7 to 1 at AAA does the same arithmetic for vision nearer 20/80.

Large text drops back to 3 to 1 because wider strokes carry at lower contrast. WCAG defines large as 18pt, or 14pt bold; a CSS point is 1.333 CSS pixels, so those are 24px and 18.66px. It is the computed size that counts, so a scale landing at 23.5px is still normal text and still owes 4.5 to 1 — and “bold” means weight 700 or heavier in practice, so a 20px semibold heading gets no relief at all.

The 3 to 1 rule for icons, borders and focus rings

Success criterion 1.4.11, added in WCAG 2.1, is the one that gets missed, because it is not about text. Anything you need to see in order to identify a control or understand a graphic owes 3 to 1 against what sits next to it: an input border, an unchecked checkbox, a focus ring, an icon carrying meaning on its own, the line in a chart.

The measurement is against the adjacent colour rather than the page background, so a white icon on a mid-blue button is judged against the button. And “required to identify” is narrower than it sounds: a decorative flourish is exempt, a disabled control is exempt, and an icon beside its own text label is carried by the label. The case that catches everybody is the input border — a 1px #E5E5E5 line on white is 1.26 to 1, and a field with no other affordance is then not identifiable at all.

A passing ratio is a floor, not a target

4.5 to 1 is the point at which someone with a specific, common, mild level of vision loss can read the text in good conditions. It is not a claim that the text reads well, and it knows nothing about the phone in sunlight or the reader on their fourth hour. It has no opinion about the typeface either: a 300-weight grotesque with hairline strokes and a 600-weight one both pass at 4.6 to 1, and only one of them is comfortable.

The opposite extreme is a real problem too. Pure black on pure white is 21 to 1, and that is a common accessibility complaint rather than a goal — many readers, particularly with dyslexia or light sensitivity, find maximum contrast tiring over long passages. Near-black on off-white is the usual answer, and it still clears AAA.

What this number does not know

Colour blindness: two colours can clear 4.5 to 1 and stay indistinguishable to a viewer with deuteranopia, because the ratio measures light rather than hue, so a red-and-green status pair can pass and communicate nothing. Alpha on its own — the checker above composites a translucent text colour onto the background, because that has one answer, and drops a translucent background’s alpha, because that does not. Gradients, photographs and video behind text, where the standard’s answer is to test the worst point by hand.

The model is wrong at its edges as well. That flat 0.05 dominates at the dark end, pushing two near-black colours toward 1 to 1 far faster than the eye pushes them together, which is why a dark card on a dark page is so hard to get past 3 to 1. It is also symmetric: the formula divides the lighter luminance by the darker one, so swapping the text and the background returns exactly the same number, and light text on a dark ground is scored as though it were the same act to read as dark text on a light one. APCA, the perceptual model drafted for WCAG 3, addresses both — it treats the dark end differently, and it scores a pair differently depending on which of the two colours is the text — and it is a working draft, referenced by no regulation and required by nothing. Report the WCAG 2 ratio, and treat anything else as a second opinion.

To unpack a hex value into channels while you are here, the HEX to RGB converter does that and reports the same ratios against black and white.