Tool Guides

WCAG AA vs AAA: Contrast Requirements Compared

6 min read

Two conformance levels in the Web Content Accessibility Guidelines govern text contrast, and they are frequently confused. Level AA, defined by Success Criterion 1.4.3 (Contrast Minimum), requires a contrast ratio of at least 4.5:1 between text and its background. Level AAA, defined by Success Criterion 1.4.6 (Contrast Enhanced), raises that floor to 7:1. Both criteria relax their requirement for large text, and both carry the same set of exceptions — but they differ sharply in how they are used in practice, and in whether they can realistically be applied across an entire site.


The Ratios Side by Side

Requirement Level AA (SC 1.4.3) Level AAA (SC 1.4.6)
Normal-size text 4.5:1 7:1
Large text 3:1 4.5:1
Incidental / disabled text Exempt Exempt
Logotypes Exempt Exempt
Non-text UI elements 3:1 (SC 1.4.11, AA) No AAA equivalent

The definition of "large" is identical at both levels: text rendered at 18 point or larger, or at 14 point or larger when bold. In CSS units at a default 96 DPI, that corresponds to roughly 24px regular or 18.66px bold. The threshold is a function of stroke weight rather than of typeface size alone, which is why the bold cut-off sits lower.

One asymmetry deserves attention. The AAA large-text ratio of 4.5:1 is numerically identical to the AA normal-text ratio. A heading that only just satisfies AA at body size would satisfy AAA once it is set at 24px — the same measured contrast, judged against a different requirement because larger glyphs carry more legible detail.

Where the Numbers Come From

Neither ratio is arbitrary. The WCAG understanding documents tie both to modelled visual acuity. The 4.5:1 figure is derived from the contrast sensitivity of a person with approximately 20/40 vision, a level of loss common in adults around the age of 80 and reachable far earlier through cataracts or diabetic retinopathy. The 7:1 figure corresponds to roughly 20/80 vision, and is intended to compensate for the loss of contrast sensitivity that accompanies that degree of impairment.

Both are computed from relative luminance, not from hue or saturation. Two colors that appear obviously distinct to a viewer with typical vision — a saturated red against a saturated green, for instance — can share nearly identical luminance and therefore produce a contrast ratio close to 1:1. The formula is defined in WCAG 2.1 as:

ratio = (L_lighter + 0.05) / (L_darker + 0.05)

where L is the relative luminance of each color after sRGB linearization. The additive 0.05 term models ambient screen flare, and it bounds the possible range: pure black against pure white yields exactly 21:1, and no pair can exceed it.

The full derivation, including the channel-by-channel linearization, is set out in the WCAG contrast complete guide.

What Both Levels Exempt

The exceptions are shared, and they are narrower than they are often assumed to be.

Incidental text carries no requirement — text that is purely decorative, invisible to the user, or part of a photograph or other image where the text is not the point of the image. A street sign appearing incidentally in a stock photograph is exempt; a promotional banner where the text is the message is not.

Logotypes are exempt. Text that forms part of a brand name or logo has no contrast requirement, which is why a wordmark set in a low-contrast brand color does not itself constitute a failure. This exemption is narrow: it covers the logotype, not body copy or interface labels that happen to reuse the brand color. A brand palette recorded on ColorFYI's brand pages will frequently contain a primary color that is entirely legitimate in a logo and entirely unusable as body text — the per-color contrast figures on those pages make the distinction measurable.

Inactive components are exempt. A disabled button or a greyed-out menu item has no contrast requirement, on the reasoning that the control is not currently actionable.

The Practical Difference: Policy, Not Pixels

The sharpest divergence between the two levels is not mathematical but regulatory. Legislation and procurement standards that reference WCAG — Section 508 in the United States, EN 301 549 in the European Union, and the accessibility regulations built on it — settle on Level AA. Level AAA appears in almost no binding requirement.

The guidelines themselves explain why. WCAG's conformance documentation states that Level AAA conformance is not recommended as a general policy for entire sites, because it is not possible to satisfy all Level AAA success criteria for some content. Contrast is a clear instance: a data visualization distinguishing eight categories cannot hold every series at 7:1 against the plot background while keeping the series distinguishable from one another. A photographic hero image with an overlaid caption may reach 4.5:1 reliably and 7:1 only by darkening the image past the point of recognition.

The workable posture, and the one most mature design systems adopt, treats AA as the floor that every text style must clear and AAA as a target applied selectively — to sustained reading surfaces such as article body copy, to error and validation messaging, and to any interface used under variable lighting.

Non-Text Contrast Has No AAA Level

Success Criterion 1.4.11 (Non-text Contrast) requires a 3:1 ratio for user-interface components and meaningful graphical objects: input borders, focus indicators, icon glyphs that carry information, and the segments of a chart that the reader must tell apart. It is a Level AA criterion, and no Level AAA counterpart exists.

This has a concrete consequence. A design system pursuing AAA for text gains nothing automatically for its form borders or focus rings, which remain governed by the 3:1 AA requirement. Interfaces frequently fail here while passing text contrast comfortably, because a 1px input border in a light grey is easy to overlook during review and easy to measure only after the fact.

Choosing a Level in Practice

A useful decision sequence runs as follows. Every text style clears 4.5:1, or 3:1 where it qualifies as large — this is non-negotiable and matches what regulation requires. Body copy in long-form reading contexts is then held to 7:1 where the palette permits, since that is where the AAA threshold repays the constraint most directly. Error states, form validation, and any text whose misreading has a cost are held to 7:1 regardless of length. Non-text elements are audited separately against 3:1, because no text-level improvement will cover them.

Palettes are worth testing before they are committed rather than after. A brand color that measures 3.9:1 against white will not become compliant through adjustment of the surrounding layout; it needs a darker variant reserved for text, with the original retained for fills, borders, and the logotype where the exemptions apply. Generating that darker variant early — and recording which token is the text-safe one — avoids a class of retrofit that tends to arrive late and expensively.

Specific pairings can be measured with the contrast checker, which reports the ratio alongside its AA and AAA verdicts for both normal and large text. Palettes intended for readers with color vision deficiency benefit from a second pass through the color blindness simulator, since a pair that clears 7:1 on luminance can still collapse into ambiguity under a hue-based deficiency.

Summary

Level AA sets 4.5:1 for normal text and 3:1 for large text, and is the level that legislation and procurement standards reference. Level AAA sets 7:1 and 4.5:1 respectively, and is best applied selectively rather than site-wide, a position the guidelines themselves endorse. The exceptions — incidental text, logotypes, and inactive components — are identical at both levels. Non-text contrast stops at Level AA with a 3:1 requirement and has no enhanced tier, which makes it the criterion most likely to be missed by a team otherwise focused on raising text ratios.

Related Tools