WCAG Contrast Ratios Explained: What AA and AAA Actually Require

The ratio isn't a vibe check — it's a formula

WCAG contrast is a precise calculation, not a subjective judgment. Each color's relative luminance is computed by converting sRGB channels to linear light and weighting them (0.2126 for red, 0.7152 for green, 0.0722 for blue — green contributes far more to perceived brightness than red or blue). The contrast ratio between two colors is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker one. The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).

What AA and AAA actually require

WCAG 2.1's Level AA — the level referenced by most accessibility laws and procurement standards — requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). Level AAA is stricter: 7:1 for normal text, 4.5:1 for large text. There's also a separate, less-known requirement (Success Criterion 1.4.11) for non-text elements like icons and UI component borders: a flat 3:1 minimum, with no AA/AAA split.

Why 4.5:1 specifically

The 4.5:1 threshold isn't a round number chosen for convenience — it comes from research on low-vision readers, roughly approximating what's needed to compensate for a person with 20/40 vision (the boundary WCAG's working group used as a benchmark for "low vision but not legally blind"). Large text gets a lower 3:1 threshold because bigger glyphs remain legible at lower contrast — the same reason large text and bold text get grouped together as one WCAG category.

Practical thresholds worth remembering

Pure black on white is 21:1 — the ceiling. Mid-gray text (#767676) on white lands almost exactly at 4.5:1, which is why that specific gray shows up constantly in accessible design systems as a "safe default" body-text color. If you're picking a brand color for body text, checking it against both a white and black background (and comparing which one wins) is the fastest way to know whether it needs a lighter or darker variant for accessible text.

What "large text" means, precisely

The lower 3:1 bar applies to text at 18 point (24 px) and larger, or 14 point (18.66 px) and larger if bold. The pt–px conversion trips people up constantly: WCAG's thresholds are written in points, and 1 pt = 1.333 px on the web, so "18 px counts as large" is false — 18 px regular-weight text still needs the full 4.5:1. When in doubt, treat anything under 24 px as normal text unless it's bold and at least 19 px.

What's exempt — and what isn't

Logos and brand wordmarks are explicitly exempt, as is purely decorative text, text in inactive or disabled controls, and text that happens to appear inside a photograph. Placeholder text in form fields is not exempt — a common failure, since default placeholder grays hover around 2.5:1. Neither is text over background images, which must pass against the actual pixels behind it — in practice, against the lightest or darkest region it can land on.

Non-text contrast is where modern UIs fail

Success Criterion 1.4.11 extends a flat 3:1 floor to the visual information that makes interfaces operable: input borders against the page, icons that carry meaning, focus indicators, the selected state of a tab, adjacent chart segments. Hairline gray borders (#DDDDDD on white is about 1.35:1) and subtle focus rings are the most common failures in otherwise polished products. The rule of thumb: if a user must see it to use it, it needs 3:1 against whatever it sits on.

Common failure patterns (and how to fix them)

White text on saturated brand colors fails far more often than intuition suggests — white on pure orange (#FF8C00) is roughly 2:1, and yellow backgrounds almost never work with white text. The fix is rarely "change the hue": darken the background a step or two while keeping the hue, or flip the text to a near-black. Because the ratio is computed purely from luminance, the contrast checker shows both fixes live, and every color page on this site precomputes which text colors pass on that background.

Thin font weights deserve a special warning: the formula only sees color, so a 100-weight font can "pass" 4.5:1 while being genuinely hard to read. The ratio is the floor, not the finish line.

What about WCAG 3 and APCA?

The draft WCAG 3 replaces the ratio with APCA, a model that accounts for polarity (dark-on-light vs. light-on-dark), font size, and weight together — fixing known quirks like the current formula's leniency on dark backgrounds. It is not yet a standard, and every current legal and procurement requirement references WCAG 2.x, so ship against 4.5:1 and 3:1 today and treat APCA as a preview of where the field is heading.

Contrast is necessary, not sufficient

A palette can pass every ratio and still communicate poorly: if color alone distinguishes an error from a success state, users with color-vision deficiencies are excluded regardless of contrast. That's a separate WCAG rule with its own logic — our Use of Color guide and color-blindness playbook cover it, and the simulator shows your palette the way roughly 8% of male users see it.