How to Check WCAG Color Contrast for Free

You picked a soft gray text color on a white background because it looked clean in the mockup, and then an accessibility audit — or a real user — flags it as unreadable. Low-contrast text is one of the most common accessibility failures on the web, and it’s easy to miss during design because a designer’s calibrated monitor in good lighting makes almost any contrast level look fine, right up until someone views the same page on a phone in sunlight or has low vision.

This isn’t a subjective design opinion — WCAG defines exact contrast ratio thresholds, so it’s checkable with a formula, not a guess. The problem is that most people don’t carry that formula around in their head, and eyeballing “does this look readable” is an unreliable substitute.

What contrast ratio actually measures

WCAG contrast ratio is a mathematical relationship between the relative luminance of a text color and its background, expressed as a ratio from 1:1 (identical, invisible) to 21:1 (pure black on pure white, maximum contrast). The standard defines minimum ratios for passing: 4.5:1 for normal text at AA level, 3:1 for large text at AA, and stricter 7:1 and 4.5:1 thresholds at the higher AAA level.

The practical requirement is simple to state and easy to get wrong without a tool: pick your text and background colors, and know immediately whether that pair passes AA, passes AAA, or fails outright — for both normal and large text sizes, since the threshold differs.

Why people get stuck here

• Contrast isn’t visually obvious. Two colors that look “different enough” on a good monitor can still fail the 4.5:1 threshold — human perception of contrast doesn’t map cleanly onto the WCAG formula.
• Normal vs. large text thresholds differ. A color pair that fails for body text can legitimately pass for a large heading, and mixing these up leads to either over-correcting or shipping a real failure.
• Brand colors don’t always cooperate. A brand’s signature light color often fails contrast requirements against white, forcing a real design conversation about accessibility vs. brand consistency.
• Late discovery. Contrast issues are often caught in a late-stage accessibility audit rather than during design, making the fix more disruptive than it needed to be.

What a good contrast checker looks like

Instant pass/fail against real thresholds

Enter a text and background color and immediately see the ratio plus a clear AA/AAA pass or fail for both normal and large text.

Live updates as you adjust colors

Being able to nudge a color and watch the ratio update in real time makes it much faster to find a compliant variant that’s still close to your original intent.

Covers both AA and AAA

AA is the common legal/practical baseline; AAA is stricter and matters for certain contexts (some government and healthcare requirements) — a good tool shows both.

Common mistakes to avoid

• Judging contrast by eye on a well-lit, well-calibrated monitor instead of checking the actual ratio.
• Applying the normal-text threshold to large headings (or vice versa) — the required ratio genuinely differs by text size.
• Only checking contrast for primary text and skipping secondary elements like placeholder text, disabled states, and icons, which are common failure points.
• Assuming a color pair that passes AA automatically passes AAA — the AAA threshold is meaningfully stricter.

How to do it with Contrast Ratio Checker

Online Tool Store’s Contrast Ratio Checker gives you a live pass/fail against WCAG AA and AAA, right in your browser.

1. Open the Contrast Ratio Checker tool.
2. Enter your text color and background color.
3. Read the live contrast ratio and pass/fail result for both normal and large text, at both AA and AAA.
4. Adjust either color until you find a ratio that passes at the level you need.

Frequently asked questions

What contrast ratio do I need to pass WCAG AA?

4.5:1 for normal-size text, and 3:1 for large text (defined as 18pt regular or 14pt bold and larger). These are the most commonly required thresholds for web accessibility compliance.

What’s the difference between AA and AAA?

AAA is a stricter standard, requiring 7:1 for normal text and 4.5:1 for large text. AA is the more commonly targeted baseline; AAA is required in some specific contexts but is a higher bar that not every design can realistically meet across an entire brand palette.

Can a color pair look fine but still fail the contrast check?

Yes, this is common — human contrast perception doesn’t map linearly onto the WCAG luminance formula, so a pair that reads as “readable enough” on a good screen can still mathematically fail the threshold, especially for smaller text.

Final thought

Check contrast during design, not after an audit flags it — fixing a color pair before it’s baked into a whole design system is far less disruptive than reworking it later.

Try the free Contrast Ratio Checker tool