Contrast Checker & Auto-Fix Tool (WCAG + APCA) — Free, No Signup

Check WCAG 2.x and APCA contrast between any two colors, then auto-fix one color to hit a target ratio while keeping its hue. Free, runs entirely in your browser.

What it does

Paste in a text color and a background color — hex, rgb(), hsl(), or a plain color name — and this tool tells you exactly how readable that pairing is. It checks the classic WCAG 2.x contrast ratio against every relevant threshold (AA and AAA, for normal text, large text, and UI components), and also shows the newer APCA (Lc) score that’s being developed for WCAG 3, since APCA predicts real-world readability more accurately, especially for dark-mode designs where the old formula tends to be misleading.

If a pairing fails, you don’t have to eyeball a fix. Pick which color to adjust and a target ratio, and the auto-fix engine finds the closest lightness change that hits your target — without shifting the hue, so a “fixed” brand red stays red instead of drifting toward brown or gray.

How it works

Contrast is computed with the official WCAG relative-luminance formula, and APCA uses the current 0.0.98G-4g constants from the Myndex reference implementation — both are worked out from your colors’ linearized sRGB values, and a semi-transparent text color is composited over the background first so the numbers reflect what actually renders.

The auto-fix feature converts your color to OKLCH, a perceptually uniform color space, and searches along the lightness axis only — holding hue and chroma fixed — until the resulting color’s relative luminance produces your target ratio. If the color would fall outside what a screen can display at that lightness, chroma is reduced just enough to bring it back in gamut before the search continues, so you always get a real, displayable hex value back.

How to use it

1. Enter your text color and background color (any format — hex, rgb(), hsl(), or names like navy).
2. Adjust the text opacity slider if your text is semi-transparent over the background.
3. Read the ratio, the pass/fail badges, and the APCA score.
4. If it fails, choose whether to adjust the text or the background, pick a target (AA, AAA, or a custom ratio), and click Auto-fix.
5. Review the suggested color and click Apply, or copy the hex value directly.
6. For a whole palette at once, paste multiple #foreground, #background pairs into the batch checker.

Color-blindness preview

Below the main result, three simulated swatches show roughly how your pairing looks under protanopia, deuteranopia, and tritanopia, using standard full-severity simulation matrices. It’s an approximation for a quick sanity check, not a substitute for testing with real users.

FAQ

Why does this tool show two different contrast numbers? WCAG 2.x’s ratio (the “4.5:1” you’ve probably seen referenced in accessibility guidelines) is what’s currently required by law and standards. APCA (Lc) is a newer, more perceptually accurate model that’s expected to replace it in WCAG 3 — it’s shown here as a preview, not as a compliance requirement yet.

Does auto-fix guarantee the result still looks like the same color? It keeps the same hue and, where possible, the same chroma (saturation) — only lightness changes. For very saturated colors at extreme lightness targets, some chroma has to be reduced to stay within what a screen can actually display, but the hue never shifts.

What if auto-fix says a ratio isn’t achievable? Every color has a maximum possible contrast against a given background — pure black or pure white against it. If your target exceeds that ceiling, no lightness adjustment can reach it; you’ll need a different background or a lower target.

Does the opacity slider affect the background color too? No — only the text/foreground color’s opacity is supported, since that’s the common real-world case (text rendered over a solid background). The background itself is treated as fully opaque.

Is my color data sent anywhere? No — every calculation, including the batch checker, runs locally in your browser.