WCAG contrast ratio checker: what the numbers actually mean

WCAG doesn't round. A contrast ratio of 4.499:1 is a fail, not a rounding error away from a pass — which surprises most people the first time they run their actual brand colors through a checker and watch a color they'd shipped for months come back red.

Contrast ratio measures the difference in brightness between two colors — almost always text and whatever sits behind it — on a scale from 1:1 (identical, unreadable) to 21:1 (pure black on white, the maximum possible). The Web Content Accessibility Guidelines (WCAG) set minimum ratios so that text stays legible for people with low vision or color blindness. A WCAG contrast ratio checker is how you find out whether your specific colors clear that bar before real users find out for you.

This guide covers what the actual thresholds are, what almost everyone gets wrong about "large text," what a checker looks at besides body copy, and when it's worth aiming past the minimum instead of just barely clearing it.

Photo by Ron Lach on Pexels

WCAG AA vs AAA — the real thresholds

WCAG defines two compliance levels that actually matter for contrast, each with its own numbers for normal and large text:

• Level AA — 4.5:1 for normal text, 3:1 for large text. This is the standard most websites are built to, and the one regulators and accessibility audits generally expect.
• Level AAA — 7:1 for normal text, 4.5:1 for large text. Roughly 55% stricter than AA, and noticeably harder to hit with a typical brand color palette.

"Large text" has an exact legal definition, not a vibe: 18 point (24px) or larger at regular weight, or 14 point (18.66px) or larger at bold weight. Nobody has ever said "let me just bump this up to exactly 18.66 pixels" out loud, but that's the real cutoff a checker is applying behind the scenes.

And as covered above — no rounding. If your checker shows 4.49:1, that fails the AA text requirement just as surely as 2:1 would. The fix is to adjust the color, not to argue with the decimal.

It's not just body text

WCAG 2.1 added a separate rule most people miss entirely: non-text contrast. User interface components — button borders, form input outlines, icons, toggle switches — need at least 3:1 contrast against whatever sits next to them. A page can have perfectly compliant paragraph text and still fail an audit because its input fields are outlined in a pale gray nobody can actually see.

There are a few genuine exceptions. Logos and brand marks are exempt entirely — WCAG isn't asking you to redesign your logo. Purely decorative or incidental text (a disabled placeholder, watermark-style text) is exempt too. The requirement is aimed specifically at anything a user actually needs to read or operate to use the page.

The same 3:1 rule also covers focus indicators — the outline that appears around a button or link when someone tabs to it with a keyboard instead of clicking. It's easy to style that outline away for looking "cleaner" and forget that it's the only signal a keyboard user gets for where they currently are on the page. A focus ring that's technically present but too faint to see fails the same way a missing one does.

Photo by Josh Sorenson on Pexels

Should you aim for AA or AAA?

Everyone loves the idea of AAA compliance in a kickoff meeting. Fewer people love it once it's time to explain why the brand's signature pastel pink can't be used for body text anymore.

In practice, AA is the right default target for most sites — it's the level most accessibility audits and legal standards actually require, and it's achievable without gutting a brand palette. AAA is worth reaching for on text-heavy content aimed specifically at readers with low vision, but treating it as a mandatory baseline for every element tends to eliminate colors that would otherwise pass a perfectly reasonable standard.

For what it's worth, Cloistr's own dark-theme body text comes out to roughly 7.6:1 against its background — comfortably past AAA, not just the AA minimum. That wasn't the result of chasing the stricter number specifically; a genuinely dark background and a light, readable gray just happen to land there. Which is really the point: good contrast is usually a side effect of sensible color choices, not a separate problem you solve after the fact.

If you're picking colors from scratch, our color picker and contrast checker pair well together — adjust a color's lightness until the pairing passes, rather than guessing and checking after the fact.

Common contrast mistakes worth checking for

A few patterns show up constantly once you actually start testing instead of eyeballing:

• Placeholder text. Form placeholders are almost always styled lighter than real input text — often light enough to fail 4.5:1 against a white or light-gray background, even when the actual typed text passes fine.
• Disabled and muted states. A "disabled" button or grayed-out label is often designed to look faded on purpose, which is exactly the instinct that breaks contrast. If a disabled state still needs to communicate something — a price, a status — it still needs to clear a minimum, just not necessarily the same one as active text.
• Hover and focus states. A button's resting color can pass while its hover color quietly doesn't, since hover colors tend to get chosen for vibe rather than measured.
• Light mode and dark mode, separately. A color pair that passes in one theme doesn't automatically pass in the other — they're two different backgrounds. If a site ships both themes, each one needs its own check, not an assumption that light mode "should be fine" because dark mode already passed.

Frequently asked questions