What a contrast ratio actually measures (and why 4.5:1 matters)

Light gray text on a white background looks clean in the mockup and turns out to be a wall to anyone whose eyes are a little tired, a little older, or a little different. Whether text is readable is not a matter of taste, it is a measurable thing, and the measurement is the contrast ratio. Once you know what the number is comparing, the accessibility rules built on it stop feeling arbitrary.

TL;DR: A contrast ratio compares how light your text is against its background, on a scale from 1:1 (identical, invisible) to 21:1 (black on white). WCAG sets 4.5:1 as the minimum for normal body text and 3:1 for large text, so most people can read it. The number tracks luminance, not hue, which is why some bright color pairs still fail.

The scale: from 1:1 to 21:1

A contrast ratio is one number that says how different two colors are in lightness. It runs from 1:1 at the bottom to 21:1 at the top. At 1:1 the text and the background are the same lightness, so the text vanishes into it. At 21:1, the maximum, you have pure black on pure white, the most legible pairing there is.

Everything readable lives between those poles. The ratio is written as a pair, like 4.5:1, meaning the lighter of the two colors is 4.5 times as luminous as the darker one. Higher is easier to read. The whole point of the number is to turn a vague judgment, does this look readable, into something you can check and pass or fail.

It measures luminance, not color

Here is the part that surprises people: the ratio is not about which colors you picked, it is about how light each one is. The technical term is relative luminance, the perceived brightness of a color once you account for the fact that the eye is far more sensitive to green than to blue. The formula weights the red, green and blue channels accordingly, then compares the two results.

This is why two colors that look wildly different can still have terrible contrast with each other. A saturated red on a saturated green is a jarring combination, but if the two have similar luminance, the text on it is genuinely hard to read, especially for someone with a color vision deficiency who leans on lightness differences more than hue. Contrast is a brightness gap, not a color clash, and confusing the two is how good-looking designs end up unreadable. You can check any text-and-background pair against the WCAG thresholds in a contrast checker at color.hivly.net and see the exact ratio before you ship it.

Where 4.5:1 comes from

The number 4.5:1 is not a designer’s preference, it is the threshold the Web Content Accessibility Guidelines set for normal-size body text at the AA level, the level most of the web aims for. It was chosen as the point below which ordinary text becomes hard to read for a meaningful share of people, including those with moderately reduced vision or mild color vision deficiency. Clear that bar and your body text is legible to the large majority.

Large text gets an easier target, 3:1, because bigger and bolder letters are readable at lower contrast. The strokes are thicker and the shapes are larger, so the eye needs less of a brightness gap to resolve them. That is the logic behind the two numbers: the smaller and finer the text, the more contrast it needs to stay readable, so the rules ask for more where the text is small and less where it is large.

AA, AAA, and choosing your floor

WCAG defines two levels, and the difference is how strict the contrast has to be. AA, the common target, asks for 4.5:1 on normal text and 3:1 on large text. AAA, the strict level, raises that to 7:1 on normal text and 4.5:1 on large. AAA is harder to design around because it rules out a lot of soft, low-contrast styling, but it makes content readable for people with more significant low vision.

Most sites aim for AA and treat it as the floor, not the goal. If your audience skews older or includes many readers with vision impairments, reaching for AAA on your core text is a reasonable call. Either way, the move is the same: decide your floor, measure every text-and-background pair against it, and fix the ones that fall short before anyone has to squint. The number takes the guesswork out, which is the entire reason it exists.