WCAG & Accessibility·5 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 starts at the formula: 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 free Color Contrast Checker 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 practical angle too. Contrast is one of the easiest issues for an automated audit to flag, so it turns up in almost every accessibility report and complaint. A number either clears the threshold or it doesn't, which also makes it one of the easiest failures to fix before anyone else 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 comes down to making one color lighter or the other darker.

Under the ratio, the Color Contrast Checker also shows an APCA Lc score. APCA is the contrast method in the WCAG 3 draft, and it weighs dark text on light backgrounds differently from light text on dark. Treat it as a second opinion. Audits and legal standards today still use the WCAG 2 ratio, so that is the number that decides pass or fail.

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 known 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 checker automates this walk. When a pair fails, it darkens or lightens your own text color step by step, keeping the hue, and shows the first shade that passes AA and the first that passes AAA. Copy either value or press Use to apply it, and the corrected color still reads as yours.

The 4.5 to 1 rule and the large text exception

Level AA sets 4.5:1 as the floor for normal text, and that's the number most audits enforce. Large text gets a break: 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. The checker shows all five results as separate pass or fail badges, so you can see at a glance which uses a pair is safe for.

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.

Third, test what actually shipped. Press Upload image in the checker, add a screenshot of the live page, and click Text or Bg under any extracted color to load it into the pair. The screenshot stays in your browser, and you measure the colors users see rather than the ones in the design file.

When a contrast check alone isn't enough

The Color Contrast Checker answers one question 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 carry meaning, the Color Blindness Simulator will show you where it collapses.

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