WebAIM's annual scan of a million home pages found low-contrast text on 83.9% of them, at an average of 34 instances per page. That makes it the most commonly detected accessibility failure on the web, and it is also the one a machine settles definitively in milliseconds.
Read that number for what it is. It measures what an automated check can find across a million home pages, so it is a prevalence figure and nothing more. It does not say what gets complained about, and it does not say what gets sued over.
Which means the useful part of this page is not repeating the ratios. It is knowing exactly which ratio applies where, being precise about the exemptions, and recognising the cases where the number stops helping you at all. The last of those is where audits find what scanners cannot.
The Ratios, and What They Apply To
| What | Level AA | Level AAA |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text (18pt, or 14pt bold and up) | 3:1 | 4.5:1 |
| Parts of a graphic you need to understand it | 3:1 | No higher requirement |
| Visual information required to identify a control or its state | 3:1 | No higher requirement |
| Focus indicators | 3:1 against adjacent colours | 2.4.13 adds a minimum indicator area |
| Logos and brand marks | Exempt | Exempt |
| Inactive controls | Exempt | Exempt |
| Purely decorative graphics | Exempt | Exempt |
The exemptions are where most arguments start, so here they are in full. The text rule excuses five situations. Text that is part of a logo or brand name. Text on a component that is genuinely inactive. Text that is pure decoration. Text nobody can see at all. And text that is part of a picture containing significant other visual content.
That last one runs against the guess almost everybody makes. A caption burned into a photograph of a street scene, where the photograph carries plenty of other visual content, has no contrast requirement. The same caption drawn on top of the same photograph in HTML does. It looks identical and it is a different rule, which is one more reason contrast questions get settled by a person rather than a number.
The logo exemption is the one that gets stretched. It covers the brand mark, because a brand mark is not text you read for information. It does not reach your navigation, your buttons, or your headings simply because they use brand colours. And inactive means genuinely unavailable, not styled to look quiet.
The non-text rule is narrower than its reputation too, and the narrowness is in your favour. It asks for 3:1 on visual information required to identify a control and its states, and on the parts of a graphic you need to understand the content. A decorative border round a button that already has a readable label is not required to identify it. Neither is hover styling, or a colour shift between two states you can tell apart some other way. And where the browser decides how a control looks and you have not restyled it, the rule does not apply at all.
The Large-Text Threshold People Get Wrong
Large text drops from 4.5:1 to 3:1, which is a real relaxation, and the threshold is more specific than most people remember. WCAG writes it in points, at least 18 point, or 14 point bold. W3C gives the pixel equivalents as roughly 24px and 18.5px.
The frequent mistake is applying 3:1 to a 20px heading that is not bold. That sits below 24px, so it owes the full 4.5:1. Our contrast checker applies the right threshold for the size and weight you enter, rather than making you hold the arithmetic in your head.
One more thing the definition settles, and it comes up in every second design review. Font size means the size as you deliver it, not the size after somebody zooms. So 16px body text is still body text at 400% and still owes the full 4.5:1. Zooming does not promote text into the easier band.
Two concrete numbers save a lot of back and forth here. On white, #767676 is the lightest grey that clears 4.5:1, at 4.54. #595959 is the lightest that clears 7:1, at 7.01. Anything lighter than those and you are below the line, whatever it looks like on your monitor.
The ratios are thresholds, not roundable
4.49:1 fails. It does not round up to a pass. Plenty of tools display one decimal place, so a pair shown as 4.5 might actually be 4.47, and a team can ship a whole palette that sits half a hundredth under the line while every check looks green. If a pair lands within a rounding error of the threshold, treat it as failing and pick a darker shade.
Where the Formula Stops Helping
The contrast formula takes two solid colours and returns one number. Real interfaces frequently do not have two solid colours, and that is exactly where an audit finds what a scanner cannot.
- Text over photographs. The ratio changes across the image. A caption that passes over the dark part of a hero image fails over the bright sky in the corner. Sample the worst region rather than the average, or put a scrim behind the text and remove the question.
- Text over gradients. The same problem, moving smoothly. Test both ends and whatever sits between them.
- Text over video. Worse again, because the background changes every frame and no single measurement describes it.
- Semi-transparent overlays. The effective colour depends on whatever is underneath, which the engine often cannot resolve.
- Colours that shift on hover or in dark mode. Every state is its own pair and needs its own check.
- Anti-aliased thin type. WCAG's own glossary says fonts with extraordinarily thin strokes are harder to read, especially at lower contrast. The formula measures colour, not stroke weight, so a hairline face at exactly 4.5:1 is legal and still hard work to read.
Why your scanner said nothing
A contrast check has three verdicts, not two. Pass, fail, and incomplete, which means the engine could not work out what colour was actually behind the text. Text over a photograph, a gradient or a video lands in that third bucket almost every time. A report that lists only violations makes the bucket vanish, and the silence reads as a pass. Our free scan lists the undecided checks separately and counts them, because an undecided check is a job for a person rather than a clean bill of health. That distinction is where automated testing stops.
Colour Alone Is a Separate Rule
Contrast (1.4.3) and colour-only meaning (1.4.1) are different requirements, and passing one says nothing at all about the other. Your palette can clear every ratio on the page and still fail, because the failure is in what the hue is being asked to carry.
Where we find it most:
- Form errors marked by a red border and nothing else. Add an icon and a message and it is fixed.
- Required fields shown by a red asterisk with no text anywhere saying what the asterisk means.
- Chart series distinguished by colour with no direct labels, no patterns, and no variation in line style.
- Links inside paragraphs shown by colour alone. The commonest instance of this rule by a distance, and the cheapest to fix.
- Status shown as a coloured dot with no word next to it.
- "Click the green button" written into an instruction.
On the links, an underline is the obvious answer and it is not the only conforming one. W3C accepts a second route, which is a link that differs from the surrounding text by at least 3:1 in contrast and carries an extra visual cue on hover and on focus. That gives a designer who hates underlines somewhere legitimate to go, as long as both halves are actually there.
One consequence of this rule surprises people, and it is worth knowing before you report it as a finding. A link styled to look exactly like the text around it does not fail the colour rule, because there is no colour difference for anyone to miss. It fails other things, and it is still a bad idea. It just is not this.
The test itself takes ten seconds. View the page in greyscale, and anything that turns ambiguous was leaning on colour. Colour vision deficiency affects roughly one man in twelve and about one woman in two hundred, somewhere near 300 million people worldwide, so this is not a rare audience by any reading.
Dark Mode Is a Second Palette
Treating it as a filter is the mistake. Inverting a light palette produces greys nobody ever checked, brand colours that quietly lose contrast on a dark ground, and pure white on pure black, which plenty of readers find harder rather than easier.
Design it as its own set of tokens and measure every pair again. Three things shift predictably:
- Saturated colours lose contrast on dark grounds. Take a mid blue at #0066CC. On white it measures 5.57:1 and passes comfortably. On a near-black #121212 it drops to 3.37:1 and fails body text outright. Dark mode usually needs a lighter, less saturated version of the same hue.
- Pure black is a common complaint. Light text on #000 is widely reported as bleeding or smearing, particularly by people with astigmatism, and a very dark grey is the standard answer. That is our advice rather than a WCAG rule.
- Focus indicators need rechecking. An outline drawn to sit against a light page can vanish on a dark one, and the focus rule applies in both modes equally.
The switch itself matters too. Respect prefers-color-scheme so the operating system setting is honoured on first load, and if you offer a manual toggle on top of that, remember what the reader chose.
Getting It Right Once, Not Per Screen
- Fix the palette, not the pages. Build a shade ladder from your brand colour and mark which combinations pass, and every screen afterwards inherits a settled decision. Our palette builder does exactly this against the 4.5:1 body-text bar, and the 3:1 bar for large text and interface parts is a second pass over the same ladder.
- Write the passing pairs into your design system as tokens, in pairs rather than as a list of approved colours. Contrast is a property of two colours together, so a list of individually good ones still lets somebody combine two of them badly.
- Handle text over images with a rule rather than case by case. A consistent scrim or a solid caption band removes an entire class of failure and an entire class of argument.
- Treat dark mode as a second palette and measure it on its own, since nothing about the light-mode result carries over.
- Add a non-colour cue everywhere colour carries meaning, as a habit rather than as a fix applied after somebody reports it.
- Check focus indicators last and never skip them, because they only appear during keyboard use and so they are the pairs nobody ever looks at.
One honest limit
A contrast checker settles one pair at a time. Your site has hundreds, plus every hover state, every dark-mode variant, and every caption sitting over a photograph. The free 10-page scan measures every pair a machine can resolve across your site and tells you which checks it could not decide. The ones involving images, gradients and video still need eyes on them.