How to Check Your Text Passes WCAG Contrast (AA and AAA)

The contrast checker shows a result before you've done anything: two default colors, a ratio, and four pass/fail badges, live on page load. Pick your own text and background color and every number updates immediately, no button to press.

Step 1 - pick a text color

Use the color picker or type a hex value directly into the paired text field next to it. Typing a partial value - say, halfway through retyping a hex code - doesn't do anything destructive: the field just waits until what's typed parses to a valid 3 or 6-digit hex value before it updates the ratio, so an in-progress edit never flashes a wrong result at you.

Step 2 - pick a background color

Same mechanism, second field. The two colors default to dark text on a light background - a passing combination - so the page never opens on a red "fail" state before you've touched anything.

Step 3 - read the ratio and the four badges

The ratio shows as a number - the default pairing loads at 17.40:1, well clear of every threshold - and four badges below it read Pass or Fail against WCAG's four thresholds at once: Normal text AA (4.5:1), Normal text AAA (7:1), Large text AA (3:1), and Large text AAA (4.5:1). Checking all four together matters because a color pair can legitimately pass for a large heading while failing for the same pair used as small body text - the two use different minimums by design, and picking one number instead of checking all four would hide that difference.

A live text preview sits alongside the badges, rendered in your actual chosen colors at both a normal-text size and a large-text size, so you're not just trusting a number - you can see what the pairing looks like in practice, at the size it would actually be used.

Step 4 - adjust until it passes

If a badge reads Fail, nudge the color that's more flexible - usually the text color, since backgrounds are often fixed by a brand palette - darker against a light background, or lighter against a dark one, and watch the ratio climb in real time. There's no need to guess a target hex value up front; adjust and watch the number, the same way the quality slider on other tools here works by feedback rather than by formula memorized in advance.

A Swap button exchanges the two colors in one click, useful for checking a design that uses the same two colors in reverse somewhere else on the page - a dark header with light text, then a light footer with the same colors used the other way around.

Checking something that isn't body text

WCAG's contrast rules aren't only about paragraphs. A separate part of the spec sets a 3:1 minimum for meaningful non-text elements too - icons that carry information on their own, form input borders, and other UI components a person needs to actually see the edges of. That's the same number as the Large text AA threshold, so a color pair that passes the large-text badge is also clearing the bar WCAG sets for a button border or an icon, even though this tool's badges are labeled for text. Worth knowing if what you're actually checking is a border color against its background, not a sentence.

Typing a value versus dragging the picker

Both fields stay in sync - drag the native color picker and the paired hex text updates to match, or type a hex value directly and the picker swatch follows once it's a complete, valid value. Typing is usually faster if you already know the exact hex you want to test (copied from a design tool or a CSS file); the picker is faster for exploring nearby shades to find one that passes without knowing the target hex ahead of time. Neither one is the "real" input - they're two views onto the same color state, and changing either one updates the ratio and every badge the same way.

What it means when every badge fails

If you swap in two colors that are nearly identical - or, for a quick sanity check, the exact same color twice - every badge reads Fail and the ratio sits at exactly 1:1. That's not a bug in the tool; it's the correct, expected result for text that's genuinely illegible against its background, and it's the same math the rest of the badges rely on, just at its worst-case value.

Reading the four badges as a set, not one at a time

It's tempting to stop at the first badge that reads Pass and call the pairing done, but the four badges answer four genuinely different questions, and which one actually matters depends on what you're placing the color on. A pairing that passes AA large but fails AA normal is fine for a big heading and wrong for a caption underneath it in the same color - the same two hex values, two different verdicts depending on where they're used. Checking all four before deciding is the whole reason the tool shows all four at once instead of asking you to pick a level first.

Once you land on a pairing that passes, a Copy button next to the ratio puts the number on your clipboard - handy for pasting into a design doc or a code review comment alongside the two hex values. Everything here runs on your device; nothing about your color choices is sent anywhere.