Color Contrast Checker
Check any text and background color pair against WCAG 2.1 AA/AAA and APCA, with a live preview, instant pass/fail badges, and one-click suggestions that fix a failing pair without changing its hue.
:root {
--text-color: #14213E;
--bg-color: #FFFFFF;
}
.contrast-pair {
color: var(--text-color);
background: var(--bg-color);
}How to Check Color Contrast
Features
Numbers Are Necessary, Because Eyes Disagree
Two designers can look at the same text on the same background and genuinely disagree about whether it's readable — screen brightness, ambient light, monitor calibration and a viewer's own eyesight all change the answer. WCAG's contrast ratio exists to replace that judgement call with a single number computed from the actual luminance of both colours, so "is this readable" stops being a matter of opinion.
This tool is built around that principle: type or pick two colours, and every number that matters — the WCAG ratio, five pass/fail thresholds, and an APCA score — updates instantly, next to a live preview so you can see the actual text alongside the maths behind it, not just a pass or fail label in isolation.
WCAG Ratio vs. APCA — Two Different Rulers
The WCAG 2.1 ratio you see everywhere — 4.5:1 for normal text, 3:1 for large text — is a symmetric formula: swap the text and background colours and the ratio stays exactly the same. It's well understood, required by most accessibility laws and audits, and this tool leads with it for that reason.
APCA, the algorithm being developed for WCAG 3, was built to fix a known weakness in that symmetry: human eyes don't actually perceive light-text-on-dark and dark-text-on-light the same way, so a single symmetric ratio can be misleadingly optimistic or pessimistic depending on which way round the colours are. APCA produces a directional Lc score with separate guidance for body text, large text and UI components instead of one AA/AAA cutoff. It's still a draft standard, which is why this tool shows it as a clearly-labelled informational reference next to the WCAG ratio — useful for getting ahead of where accessibility guidelines are heading, not a replacement for the ratio your current audit actually requires.
Fixing a Failing Pair Without Guessing
The usual fix for a failing pair is trial and error — nudge a hex code, check again, repeat. This tool skips that loop: the moment a pair fails your selected target, it searches for the closest lighter or darker version of either colour — keeping the same hue and saturation — that would actually pass, and shows both options side by side so you can pick whichever changes your original colour the least.
The Quick Apply row underneath the colour cards solves a different, equally common problem: testing one text colour against several likely backgrounds — white, a light grey card, a dark navbar — without retyping hex codes each time. Switch the target tab to Background or Text and click through the row to see the ratio update instantly against each one.
Who Actually Checks Contrast
Front-end developers and designers making sure a design system's text/background pairs pass before they ship, instead of finding out from an accessibility audit after launch.
Accessibility auditors and QA testers who need a fast, precise second opinion on specific colour pairs flagged during a manual review.
Marketing and brand teams checking that a new campaign palette still reads clearly for body copy and buttons before it goes into production assets.
Students and newer designers learning why some colour combinations that look fine on a bright monitor quietly fail in the real world.
From a Failed Audit to a Shipped Fix
Responding to an accessibility audit finding: paste in the flagged text and background colours, confirm the exact ratio and which levels it fails, then apply a suggested fix and export the corrected values as CSS variables to hand to a developer.
Building a new design system: lock your primary background colour, then randomise or manually test candidate text colours against it until you land on ones that clear AA for body copy and AAA for anything meant to be extra-legible.
Auditing an existing site's color palette: use the eyedropper to sample colours directly from screenshots of your live pages, rather than digging hex codes out of a stylesheet by hand.
Choosing between two close options: save both candidate pairs to My Saved Pairs, compare their ratios and APCA scores side by side, and pick whichever clears your target with the least visual compromise from the original brand colours.
Nothing Leaves Your Browser
Every contrast calculation, the APCA score, the live preview, and any pairs you save all run locally in your browser — there's no upload, no server round-trip, and no account required. That also means there's zero delay between changing a colour and seeing every number update, which matters when you're comparing several candidate pairs back to back.
Getting Contrast Right the First Time
- Check contrast before you finalise a palette, not after. It's far easier to nudge a colour's lightness while a palette is still a draft than to rework a finished design system later.
- Test large and normal text separately. A pair that only clears the 3:1 large-text threshold will fail for body copy — check the preview at the actual size your text will render.
- Don't forget UI components. Button borders, form field outlines and icons need 3:1 too, and it's the check most teams forget since it doesn't involve text at all.
- Use the suggestions as a starting point, not a final answer. A suggested fix guarantees the ratio passes — it doesn't guarantee it still matches your brand; treat it as the closest passing option to hand-tune from.
- Re-check after any brand colour update. A ratio that passed against an old shade of blue can quietly fail after a brand refresh — it's worth re-testing anytime a core colour changes.
- Want to explore color relationships, not just check one pair? The Color Wheel shows how hues relate to each other visually.
When the Numbers Don't Match What You See
The ratio passes but the text still feels hard to read. Contrast ratio measures luminance difference, not font weight, letter spacing or size — a passing ratio in a very thin, small font can still be genuinely harder to read than the number suggests.
APCA and the WCAG ratio disagree on which colour is "worse." This is expected — they're different formulas measuring different things. Treat the WCAG ratio as the one your compliance requirements reference today, and APCA as a forward-looking second opinion.
My saved pair loaded with a slightly different shade than I remember. Favourites store the exact HEX values at save time — if you fine-tuned a colour after saving, save the pair again to capture the update.
The eyedropper button isn't showing up. The EyeDropper API is currently only supported in Chromium-based browsers (Chrome, Edge, Opera) — the button is hidden automatically in Safari and Firefox rather than shown broken.
Where This Tool Stops
Don't treat a passing ratio as a full accessibility sign-off — colour contrast is one requirement among many (alt text, keyboard navigation, focus states, and more) that a complete accessibility audit needs to cover.
Don't rely on APCA numbers for a compliance claim today — it's a draft algorithm without official legal standing yet; use the WCAG 2.1 ratio for anything that needs to meet a current accessibility requirement.
Don't use it to check colour-blindness safety — a pair can pass contrast and still be indistinguishable for someone with colour vision deficiency if colour is the only differentiator; that's a separate check this tool doesn't perform.