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

A contrast ratio is one number that tells you how far apart your text and its background are in brightness. It runs from 1:1, where the two are the same and the text is invisible, up to 21:1, which is pure black on pure white. WCAG asks for at least 4.5:1 on normal body text. That is the whole idea in a sentence, and the rest of this post is where the number comes from and how to hit it.

TL;DR: A contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05), where L is each colour’s relative luminance. It runs from 1:1 to 21:1. WCAG AA wants 4.5:1 for normal text, 3:1 for large text and UI components, and AAA wants 7:1. The number tracks luminance, not hue, so two colours that look nothing alike can still fail.

The formula

Every contrast ratio comes out of this:

ratio = (L_lighter + 0.05) / (L_darker + 0.05)

L is the relative luminance of a colour, a value from 0 for black to 1 for white. You take the luminance of the lighter colour and the darker colour, add 0.05 to each, and divide. That small 0.05 offset is what keeps the result finite. Without it, black on black would divide by zero. With it, the maximum possible ratio is (1 + 0.05) / (0 + 0.05), which works out to exactly 21. That is where the 21:1 ceiling comes from.

At the other end, two identical colours give you the same L on top and bottom, so the ratio is 1:1. Everything readable lives in between. Higher is easier to read.

It measures luminance, not colour

Here is the part that trips people up. The formula never looks at hue. It only looks at how light each colour is. L itself is built from the red, green, and blue channels, but they are weighted by how the eye responds: green counts for most of the perceived brightness, red less, blue least. So two colours can be wildly different in hue and still land on nearly the same L.

That is why a saturated red on a saturated green can look loud and still be hard to read. The colours clash, but the brightness gap between them is small, so the ratio is low. Contrast is a brightness gap, not a colour clash, and mixing up the two is how a good-looking palette ends up unreadable.

It also explains who gets hurt. A reader with a colour vision deficiency cannot rely on the hue difference at all, so they fall back entirely on the luminance gap. If that gap is thin, the text that looked fine to you is a smear to them. The same low ratio that fails an accessibility check is the exact thing a colour-blind reader runs into. You can drop any two colours into the contrast checker at color.hivly.net and see the ratio before you commit to them.

The exact WCAG thresholds

WCAG defines two conformance levels, AA and AAA. Here are the numbers, and they are worth memorising because they come up constantly.

AA, the level most of the web targets:

• Normal text: 4.5:1
• Large text: 3:1
• UI components and graphics that carry meaning: 3:1

AAA, the stricter level:

• Normal text: 7:1
• Large text: 4.5:1

“Large text” has a precise definition, not a vibe. It means 18pt (about 24px) and up, or 14pt (about 18.66px) and up if the text is bold. Bigger, thicker letters have more area for the eye to catch, so they stay readable at a lower ratio. That is the logic running through all of it: the finer the text, the more brightness gap it needs.

The 3:1 UI rule is the one people forget. A button border, a form field outline, an icon that tells the user something, a focus ring, all of these need 3:1 against what is behind them. They are not text, so the 4.5:1 rule does not apply, but they still have to be visible.

Why 4.5 and not 5

The odd number bugs people, and the answer is honest: it falls out of the math, it was not chosen for looks. WCAG started from a goal of about 3:1 contrast being usable for someone with 20/40 vision, then adjusted the model to cover someone around 20/80. Running that adjustment lands on 4.5, not a clean 5. So 4.5:1 is what modelling reduced vision produces, and the ratio inherits the awkwardness of the real numbers underneath it.

How to use this

Pick your floor first. Most teams take AA and treat 4.5:1 as the line body text must clear, 3:1 for large text and controls. If your readers skew older or many have low vision, reaching for AAA on core text (7:1) is a reasonable call, though it rules out a lot of soft, low-contrast styling, so you make the trade with your eyes open.

Then measure. Every text-and-background pair, every meaningful border and icon, checked against your floor. The number exists precisely so you do not have to guess whether something is readable. Run the pairs through a checker, fix the ones that fall short, and the “does this look okay” argument goes away because now there is a number to point at.

One honest limit: clearing the ratio does not guarantee comfortable reading. A pair can hit 4.5:1 and still feel harsh (think pure black on saturated yellow), or pass on paper and struggle on a dim phone screen outdoors. The ratio is a floor for legibility, not a full verdict on how pleasant the text is to read. It is the part you can measure, so measure it, then use your judgment for the rest.