WCAG & Accessibility·4 min read

WCAG Contrast Ratios Explained: AA, AAA, Real Fixes

Low contrast is the most common accessibility failure on the web, and the fix is pure arithmetic. This guide covers WCAG contrast ratios explained from the formula up: what the ratio measures, why body text needs 4.5 to 1, where large text gets a break, and how to nudge a failing color until it passes without abandoning your palette. You'll work through a real example with #767676 on white, meet the shades that fail by a hair, and pick up the review habits that stop unreadable gray text from shipping in the first place.

Open the tool All insights

Why contrast ratios decide who can read your page

The audience is bigger than you think.

Picture a pricing page where the feature captions are set in a fashionable light gray. On the designer's calibrated display, in a dim office, they read fine. On a three-year-old laptop at half brightness, outdoors, or through the eyes of someone with even mild low vision, they're gone. Nobody files a bug that says the text is invisible; they just leave.

There's a legal angle too. Insufficient text contrast is among the most frequently cited issues in web accessibility complaints and lawsuits, partly because it's trivial to detect and measure. A number either clears the threshold or it doesn't, which also means it's one of the easiest failures to fix before anyone finds it.

WCAG contrast ratios explained: where the number comes from

A contrast ratio compares the relative luminance of two colors: (L1 + 0.05) / (L2 + 0.05), with L1 the lighter of the pair. The scale runs from 1:1, identical colors, to 21:1, pure black on pure white. Luminance is a weighted mix of the red, green, and blue channels that approximates how bright a color appears to the human eye, with green counting most and blue least.

The surprise for most designers is that hue barely matters. A saturated red on a saturated blue can compute out nearly as unreadable as gray on gray, because what the formula rewards is a lightness gap. That's why every reliable fix ultimately makes one color lighter or the other darker.

A worked contrast example: #767676 on white

Put #777777 text on a #FFFFFF background and the ratio comes out at 4.48:1, a fail for body copy by two hundredths. Darken it a single step to #767676 and you get 4.54:1, a pass. That one-value gap is why #767676 is famous as the lightest gray allowed for normal text on white, and why eyeballing contrast is hopeless: no human can see the difference between those two grays.

Need AAA? Keep darkening. Around #595959 the same gray reaches roughly 7.0:1 on white and clears the stricter tier. The Color Contrast Checker automates exactly this walk: it takes your failing color, shifts its lightness step by step while keeping the hue, and hands you the first shade that passes, so the corrected color still reads as yours.

The 4.5 to 1 rule and its large text contrast exceptions

Level AA sets 4.5:1 as the floor for normal text, and that's the number most audits enforce. But WCAG carves out large text contrast exceptions: anything rendered at 18pt (about 24px) or at 14pt bold (about 18.7px) only needs 3:1, because thicker, taller strokes stay legible with less separation. A #949494 gray on white measures 3.03:1, which passes as a hero headline and fails as paragraph text.

Two more thresholds round out the picture. UI components and meaningful graphics, think input borders, icons, and chart strokes, need 3:1 under criterion 1.4.11. And Level AAA raises text targets to 7:1 for normal size and 4.5 to 1 for large, a tier worth hitting for reading-heavy products even when nobody requires it.

Contrast mistakes that slip past design review

Most failing pairs aren't chosen carelessly; they leak in through gaps in the process:

Testing only the resting state. Hover, focus, and visited styles each create new pairs, and a button that passes idle can fail on hover.
Forgetting placeholder text. Browsers render it lighter than the input's real value, and it still has to meet the same threshold.
Setting text over photos or gradients. The ratio changes across the image, so measure against the lightest region the text can land on, or add a scrim.
Trusting rgba() and opacity. A 60 percent black on an unknown surface has no fixed ratio; compute the flattened color against each background it sits on.
Reviewing on a bright, calibrated monitor. If the design team never sees a dim, low-quality panel, marginal pairs feel safer than they are.

Habits that keep contrast passing after launch

First, tokenize your approved pairs. Instead of letting every feature choose grays freely, publish text-on-surface combinations that already pass, and make new pairs go through a check before they enter the system. One afternoon of tokenizing prevents years of one-off regressions.

Second, test your lightest gray and your darkest surface together whenever a theme changes. Dark mode redraws every pair, and a palette that passed on white can quietly fail on #1A1A2E. Re-measuring the extremes catches most of the damage in minutes.

When a contrast check alone isn't enough

The Color Contrast Checker answers one question extremely well: does this pair pass? For adjacent jobs, switch tools. If you need a whole set of colors that clear a ratio against one background, the Accessible Color Palette Generator solves them all at once instead of pair by pair. If your palette passes on contrast but relies on red versus green to convey meaning, the Color Blindness Simulator will show you where it collapses.

And when the question widens from colors to the whole page, run the WCAG Accessibility Scanner for a full-site report or the Instant Accessibility Checker for a single URL; both test contrast alongside dozens of other criteria.