If you’ve spent any time near web accessibility, you’ve seen the number 4.5:1. It’s the contrast ratio your normal-sized text needs to hit to pass WCAG level AA. But “4.5:1” is an abstraction — it doesn’t tell you what it looks like, or why that particular number. Let’s fix that.
What the number means
Contrast ratio is a single figure describing the difference in brightness between two colours. It runs from 1:1 — two identical colours, invisible — to 21:1, which is pure black on pure white, the most contrast physically possible on a screen.
So the scale looks roughly like this:
- 1:1 to 2:1 — barely there. You can sense something’s written but reading it is a struggle. Fine for a decorative divider; useless for words.
- 3:1 — the minimum for large text, and for buttons, icons and borders. Readable when big; tiring when small.
- 4.5:1 — the minimum for normal text. This is the line most of the web is held to.
- 7:1 — the stricter AAA level for normal text. Comfortable for almost everyone.
- 21:1 — black on white. Maximum contrast.
You can slide any pair of colours along this scale yourself in the contrast checker and watch the verdict change as you go.
Why 4.5, of all numbers?
It isn’t arbitrary. The figure comes from research on visual acuity. WCAG started from the contrast sensitivity of someone with 20/40 vision — roughly the acuity of a person with a mild, common visual impairment, or an older adult — and worked out the contrast that person needs to read ordinary text comfortably. That came out at about 4.5:1.
The 3:1 figure for large text exists because bigger letterforms have thicker strokes and more area, so the eye can resolve them at lower contrast. And the 7:1 AAA level is calibrated for people with a more significant (20/80) visual impairment.
In other words, the numbers are a proxy for “how many of your readers can comfortably read this.” 4.5:1 is the point where the large majority can.
What passing looks like
The honest answer: 4.5:1 doesn’t look dramatic. It’s not black-on-white. It’s the point where text stops being an effort. A dark grey like #595959 on white sits above it; a medium grey like #767676 lands right on it. Both look perfectly normal — which is the point. Accessible contrast isn’t harsh; it’s just sufficient.
What failing looks like is more obvious, because you feel it: your eye works slightly harder, you squint a fraction, and if you’re on a phone in sunlight the text starts to dissolve into the background.
The catch with “large text”
Because large text only needs 3:1, it’s tempting to use a low-contrast colour and just make it big. Two warnings:
- “Large” has a strict definition — at least 18pt (~24px) regular, or 14pt (~18.66px) bold. Slightly-bigger-than-body text doesn’t count.
- A colour that only passes at large sizes will still fail everywhere you use it at body size, which is most places. Better to pick a colour that passes at normal size and use it freely.
See it for yourself
The fastest way to build intuition for 4.5:1 is to play with it. Open the checker, start from a passing pair, and slowly lighten the text until the verdict flips from “this works” to “only if you go big.” That flip point is 4.5:1 — and once you’ve seen where it lands, you’ll start spotting failing text everywhere.