WCAG AA contrast: 4.5:1 and 3:1, explained properly
Level AA is the conformance level almost every accessibility law, procurement policy and contract in the world actually points at. For colour it comes down to two numbers — 4.5:1 and 3:1 — plus a short list of exemptions that are widely misunderstood. Test any pair against AA below.
What level AA requires for colour
Two success criteria carry the contrast requirements at AA. They are separate rules with separate scopes, and passing one says nothing about the other.
1.4.3 Contrast (Minimum) — level AA
Visible text and images of text must have a contrast ratio of at least 4.5:1 against their background, except:
- Large text — at least 24px (18pt) regular, or at least 18.66px (14pt) bold — needs only 3:1.
- Incidental text — text in an inactive/disabled control, pure decoration, text that is invisible to everyone, or text that is an incidental part of a picture containing significant other visual content — has no requirement.
- Logotypes — text that is part of a brand name or logo has no requirement.
1.4.11 Non-text Contrast — level AA (added in WCAG 2.1)
Two categories of non-text thing need at least 3:1 against adjacent colours:
- User interface components — the visual information needed to identify a control and its state. The border of a text input, the outline of a checkbox, the boundary of a toggle in its on and off positions, the focus indicator.
- Graphical objects — parts of graphics required to understand the content. The line in a line chart, the slices of a pie chart, an icon that is the only label on a button.
This is the criterion that quietly fails on most modern “clean” interfaces: a 1px #E5E7EB input border on white is 1.24:1, roughly a quarter of what is required. The visual weight of a control is not decoration — if removing it would leave a user unable to see that a field exists, it is load-bearing.
The pairing that catches teams out: body text can sail through 1.4.3 while every form field on the page fails 1.4.11. They are checked separately, and an audit will find both.
AA thresholds at a glance
| Element | AA minimum | Criterion |
|---|---|---|
| Body text, labels, links, captions, placeholders, error messages | 4.5:1 | 1.4.3 |
| Text 24px+ regular or 18.66px+ bold | 3:1 | 1.4.3 |
| Images of text (same sizes apply) | 4.5:1 / 3:1 | 1.4.3 |
| Input borders, checkbox outlines, toggle states, focus rings | 3:1 | 1.4.11 |
| Icons and chart elements that carry meaning | 3:1 | 1.4.11 |
| Disabled controls, decorative graphics, logotypes | No requirement | — |
Why AA and not A or AAA
Level A contains no contrast requirement at all — a site can conform to A with 1.2:1 grey text. That makes A useless as a colour target. Level AAA requires 7:1, which excludes so much of the usable colour space that the W3C itself advises against making it a blanket policy.
AA is what the rules actually reference. EN 301 549, the European standard behind the European Accessibility Act and EU public-sector procurement, incorporates WCAG level AA. Section 508 in the United States adopts WCAG 2.0 AA by reference. The vast majority of ADA-related settlements and consent decrees specify WCAG 2.0 or 2.1 AA. Public-sector bodies in the UK are required to meet WCAG 2.2 AA. If someone tells you to “be WCAG compliant” without naming a level, they mean AA.
The practical consequence: design to AA as a hard floor, treat AAA as a quality goal for body copy where you can afford it, and never treat level A as a colour standard.
The five AA failures we see most
- Grey secondary text at #999999. 2.85:1 on white. It is the default “muted” colour in countless design systems and it fails by a wide margin. The darkest neutral grey that passes on white is #767676 at 4.54:1.
- White text on a mid-tone brand colour. Amber, lime, cyan, orange and hot pink almost never carry white text. #FFFFFF on #F59E0B is 2.15:1; black on the same amber is 9.78:1.
- Placeholder text used as a label. Placeholders are visible text and are not exempt. Browser-default placeholder grey fails, and the field also loses its accessible name when the user starts typing.
- Hairline input borders. #E5E7EB or #EEEEEE borders on white are 1.2–1.3:1 against the page and fail 1.4.11. You need roughly #949494 or darker on white to reach 3:1.
- Hover, visited and error states nobody specified. The default state was designed;
:hoverlightened by 10% was not. Link-visited purple on a tinted card is a classic silent failure.
How to test a whole interface against AA
- List surfaces, not colours. Every distinct background your text can land on: page, card, tinted callout, table header stripe, modal, toast, dark-mode equivalents.
- Cross them with every text role. Primary, secondary, muted, link, link-hover, link-visited, error, success, warning, disabled (exempt, but note it), on-brand-fill.
- Run each cell through the checker above and record the ratio, not just pass/fail. The number tells you how much headroom you have next time someone tweaks the palette.
- Add a non-text pass. Borders, focus rings, icon-only buttons, chart series, required-field asterisks, status dots. Target 3:1.
- Fix by moving lightness, not hue. The nearest-passing suggestions in the tool hold hue and saturation constant, so the corrected colour still belongs to your palette.
- Write the passing values into tokens so the fix survives the next redesign.
A palette of six surfaces and eight text roles is 48 checks. It takes about twenty minutes once and then never needs doing again if the results become tokens.
AA questions people actually ask
Does AA apply to my logo?
No. Logotypes — text that is part of a brand name or logo — are explicitly exempt from 1.4.3. That exemption covers the logo itself, not a tagline set in body copy next to it, and not navigation styled to look brand-ish.
Is a focus indicator covered by AA contrast?
Yes, via 1.4.11: the focus indicator is visual information required to identify component state, so it needs 3:1 against adjacent colours. WCAG 2.2 adds 2.4.11 Focus Not Obscured (AA) and 2.4.13 Focus Appearance (AAA), which go further on size and shape. Practical rule: never remove the default outline without replacing it with something at least as visible.
Do links need 3:1 against surrounding body text?
That requirement comes from 1.4.1 Use of Colour (level A), not from the contrast criteria. If colour is the only thing distinguishing a link from body text, the two must differ by at least 3:1 and the link must gain a non-colour cue on hover and focus. The simpler, more robust answer is to underline in-content links, which removes the question entirely.
My text sits on a colour that changes with the theme. Which do I test?
All of them. Each theme is a separate palette and needs separate evidence. Dark mode in particular is not a free pass — WCAG 2.x measures the same way in both polarities, and inverted palettes frequently fail on secondary text because designers reuse a mid grey that worked on white.
Does AA have a maximum contrast?
No upper bound exists in WCAG 2.x, so 21:1 conforms. But readers with light sensitivity, migraine or dyslexia often report that pure black on pure white is harder to read than a near-black. Since AA is a floor, you can comfortably use #1C2430 (15.62:1 on white) and still be far above the requirement.
Can I claim AA if one component fails?
Formally, no. WCAG conformance is all-or-nothing at the level of a full page or a defined set of pages — a single failing success criterion means the page does not conform. In practice, most organisations publish an accessibility statement listing known exceptions with a remediation date, which is the honest way to handle a partial state.