Everyone knows 4.5:1. Far fewer know which elements it does not apply to, or that your icons and input borders have a rule of their own.
The thresholds, and what counts as large
| What | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 |
| UI components and states | 3:1 | 3:1 |
| Meaningful graphics, icons, chart lines | 3:1 | 3:1 |
| Disabled controls | exempt | exempt |
| Decorative graphics | exempt | exempt |
| Logos and brand marks | exempt | exempt |
"Large" is 18pt, which is 24px at default settings, or 14pt bold, which is about 18.66px. That is larger than most people assume — a 20px heading is still normal text and still needs 4.5:1.
The rule most sites miss
Text contrast is well known. Success Criterion 1.4.11, non-text contrast, is not, and it is where most audits find failures.
It requires 3:1 for anything a user needs to perceive in order to operate the interface. That means:
- Input borders. A pale grey field outline on white commonly measures around 1.4:1 and fails outright.
- Focus indicators. The ring must reach 3:1 against both the component and the page behind it.
- Icons that carry meaning — a close button, a warning triangle, a chart legend swatch.
- Toggle and checkbox states, which must be distinguishable from each other, not merely present.
- Chart and graph lines, where the data is the content.
A purely decorative icon sitting beside a text label that already says the same thing is exempt — the information is available regardless. The test is whether removing it would cost the user anything.
Why placeholder text almost always fails
Browsers style placeholders grey by default, and designers usually make them lighter still, because a dark placeholder looks like a filled field.
That instinct is right about the visual problem and produces an accessibility failure. Placeholder text is content, so it needs 4.5:1, and typical placeholder grey on white lands nearer 2.5:1.
The real fix is not a darker placeholder. It is a visible label above the field, with the placeholder carrying only an example — or nothing at all. Placeholder-as-label fails for a second reason anyway: the label disappears the moment someone starts typing, which is exactly when they most need to check what the field wanted.
What the ratio does and does not capture
The contrast formula compares relative luminance. It is a good model and it has known blind spots worth knowing about.
It ignores hue entirely, so two colours of very different hue but similar luminance can pass while being genuinely hard to tell apart — this is why red-on-green can clear the threshold and still be unreadable for a red-green colour blind reader. It also does not model font weight, so hairline-weight type at 4.5:1 is harder to read than bold type at the same ratio.
WCAG 3 is expected to replace the formula with APCA, which accounts for polarity, weight and size. Until then, treat 4.5:1 as a floor rather than a target, and never rely on colour alone to convey information — a red border needs an error message beside it.
Checking it without guessing
Contrast cannot be judged by eye. Two pairs that look similarly legible can measure 3:1 and 6:1, and a designer looking at a calibrated screen in a bright room is the least representative viewer you have.
- Test every text colour against every ground it can land on, not just the page. Muted text on a card, in a well and on a hover state are three different measurements.
- Test both themes. A palette that passes on light frequently fails on dark, because the surfaces move but the ink often does not.
- Test the components, not only the text. That is where the failures are.
- Automate it. A check that runs on every build catches the regression a manual audit finds six months later.
The Contrast Checker gives the ratio and the pass or fail for each level. For a whole palette, the useful move is to check every ink against every surface as a grid rather than spot-checking the pairs you happen to think of.
Frequently asked questions
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text under WCAG AA, which is what most legislation references. AAA raises those to 7:1 and 4.5:1. Interface components and meaningful graphics need 3:1 regardless of level.
What counts as large text?
18pt, which is 24px at default settings, or 14pt bold, about 18.66px. That is bigger than most people assume — a 20px heading is still normal text and still needs the full 4.5:1.
Do icons and borders need to meet contrast rules?
Yes, 3:1, under the non-text contrast criterion. That covers input borders, focus rings, meaningful icons, toggle states and chart lines. It is the most commonly missed requirement, and pale grey input outlines fail it almost universally.
Why does my placeholder text fail?
Because placeholder grey is usually around 2.5:1 and it needs 4.5:1 as content. Darkening it makes the field look filled, so the right fix is a visible label above the field, with the placeholder reduced to an example or removed.
Are disabled buttons exempt?
Yes, disabled controls are explicitly exempt from contrast requirements. That said, a disabled control nobody can read is still a usability problem, and users frequently cannot tell whether something is disabled or just low contrast.
Does passing the ratio mean it is readable?
Not necessarily. The formula compares luminance and ignores hue, so two colours can pass while being hard to distinguish — red on green being the classic case. It also ignores font weight. Treat 4.5:1 as a floor, and never use colour alone to convey information.