Bhinish Dhiman
What contrast ratio do you actually need?
4.5:1 for body text and 3:1 for large text to meet WCAG 2.2 AA. Large means 24px, or 18.66px if bold. Interface components like input borders and meaningful icons need 3:1. AAA raises body text to 7:1 and large text to 4.5:1.
The thresholds are simple enough to memorise. What causes trouble is knowing which one applies to a given element, and there are four rules that are widely misunderstood.
The numbers
| What | AA | AAA |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Interface components and meaningful graphics | 3:1 | no AAA tier |
| Disabled controls, decorative elements, logos | exempt | exempt |
AA is what almost everyone is held to. The ADA, the European Accessibility Act and equivalent regimes reference WCAG 2.x at AA. AAA is generally pursued selectively rather than site-wide — the WCAG authors themselves say it is not achievable for all content.
Rule 1 — “large” has a precise definition
Large text means 24px or above, or 18.66px or above if the weight is 700 or heavier.
Those numbers come from converting 18pt and 14pt bold at a 96dpi reference. The bold threshold is lower because a heavier stroke puts more ink on screen at the same size.
The common error is assuming a heading qualifies. A 20px subheading at regular weight is not large text. It needs 4.5:1, same as body copy.
Rule 2 — interface components need contrast too
Success Criterion 1.4.11, added in WCAG 2.1, is the one most often missed entirely. It requires 3:1 for the visual information needed to identify a component and its state.
In practice:
- Input field borders, against the surrounding background
- Focus indicators
- Toggle and checkbox boundaries in both states
- Icons that carry meaning on their own
- The meaningful parts of a chart — a line, a bar, a data point
It does not apply to decorative graphics, or to parts of a component that are not needed to understand it. A subtle drop shadow under a card is fine. The card’s border, if that border is the only thing telling you where the input field is, is not.
This criterion catches a great many otherwise-careful designs. Pale grey #e5e7eb input borders on white are about 1.3:1 — a common pattern and a clear failure.
Rule 3 — placeholder text is not exempt
Disabled controls are exempt from contrast requirements. Placeholder text is not, and the two get conflated constantly.
Placeholder text is real content presented to the user, so it needs 4.5:1 like any other body text. The typical pale-grey placeholder is nowhere close.
The better fix is usually structural rather than chromatic: if the placeholder is doing the job of a label, it should be a label. Placeholders vanish the moment someone starts typing, which is exactly when people most often need to be reminded what the field was for.
Rule 4 — text over images needs a defined background
If text sits on a photograph or a gradient, there is no single background colour to measure against, and the ratio changes as the image changes.
You need to create a determinate background: a solid scrim, a gradient overlay heavy enough to guarantee the worst case, or a text container. Measure against the lightest point of the area behind the text, not the average.
The same reasoning is why heavily translucent, blurred surfaces are difficult to make conformant — their background is whatever happens to be scrolling underneath, so the ratio is not a fixed property at all.
A threshold is not a score
Clearing 4.5:1 by 0.01 is not meaningfully better than missing it by 0.01. The number is a floor, not a grade.
If a pair barely passes, treat that as a warning that it will fail the moment someone sets it slightly smaller, or a designer nudges the grey one step lighter. Leave headroom on anything you expect to be reused.
What the ratio cannot tell you
Two things sit outside this model entirely.
It cannot see typography. A 12px hairline caption and a 32px bold heading in the same colours get the same ratio, and only one is readable. APCA models this; WCAG 2 does not.
It cannot tell you whether two foreground colours are distinguishable from each other. That is what breaks charts and status colours for colour-blind users, and no contrast check catches it because the two colours are never compared.
Both gaps are real, and both are worth checking separately once the ratios are clean.
Our contrast checker shows every threshold at once — AA and AAA, body and large, plus the component rule — so you can see what a pair passes and what it does not without switching modes.