Contrast Checker

This Contrast Checker tool audits WCAG & APCA color contrast for ADA compliance — a color accessibility test for any website.

✅ What you'll get from this contrast checker: - WCAG 2.2 contrast ratio and APCA Lc, - elements with issues highlighted on the page, - CSS rules that produced the colors, traced through source maps (if available), - built-in color picker tool with a contrast analyzer and suggested alternatives, - live preview of fixes, - export of fixes to CSS (with source-locating comments). 🔍 Built as a website color contrast checker that walks pseudo-states, shadow DOM, same-origin iframes, and text over images and gradients — not just flat backgrounds. ⚠️ Debugger permission required. This contrast checker's coverage is only possible through the Chrome DevTools Protocol, which needs the 'debugger' permission. Once attached, Chrome shows an infobar across all tabs and does not hide it on detachment. ⚡ Highly optimized workflow: • See all elements with color accessibility issues highlighted at a glance. • Preview changes immediately, with contrast ratios and verdicts recalculated. • Apply custom CSS on the Stylesheet tab; affected issues are marked in the list. • To check color contrast manually, use the built-in color picker tool: left-click to set the foreground, right-click for the background, and the ratio updates instantly. • Use the Exclusions tab to hide everything but the elements you're fixing. 📐 Criteria behind the verdicts. This contrast ratio checker tests color accessibility against WCAG and APCA requirements. APCA Lc is graded against Bridge-PCA thresholds, which are stricter than the matching WCAG ratios — so a Bridge-PCA pass always implies a WCAG pass. 🔬 What is APCA? APCA (Accessible Perceptual Contrast Algorithm) is a model that tracks how people read text on a screen. Two color pairs with the same wcag ratio can look noticeably different, and their apca Lc (luminance contrast) reflects that: a pair can pass wcag yet feel hard to read. This website color accessibility checker calculates both numbers. 🚧 Limitations: 1. Like every other website accessibility checker, this one gives best-effort estimates, not a compliance certificate. 2. Coverage is text-only; checking of non-textual elements (wcag 1.4.11) is on the roadmap. 3. Cross-origin iframes are not stepped into. 4. Complex backgrounds and animations are sampled at a finite number of spatial and temporal points; the worst sample's ratio is reported but may still be optimistic; the sampler can also be misled by rendering artifacts. 5. Highly dynamic sites may produce spurious issues. 6. This color contrast checker does not run OCR on images automatically; test images with meaningful text via the included color picker tool. 🔒 Privacy and permissions. ▸ Runs locally; no webpage data ever leaves your machine. ▸ 'activeTab' only: the analysis script is injected when you click the toolbar icon. ▸ 'debugger' permission is required to step into Shadow DOM and iframes, trace CSS sources, and sample complex backgrounds. 🧮 Accuracy details. Semi-transparent text and ancestor opacity are handled correctly: the foreground is composited over its real backdrop before luminance is measured, so the reported ratio matches what users actually see. Wide-gamut color functions — oklch, lab, lch, color(display-p3) — are also supported, clamped to sRGB when out of gamut. 🎨 Text over images and gradients. Unlike most similar tools, this one does not give up on non-flat backgrounds or trust what 'getComputedStyle' / 'CSS.getBackgroundColors' report. It walks the browser's paint order to composite the real backdrop — opacity, blend modes, linear gradients, backdrop-filter — and when that is not enough, this color contrast tool samples the rendered pixels at the text's location. ❓ Q&A 📌 Why does the same color pair sometimes get different verdicts under WCAG and APCA? ↳ WCAG measures luminance; APCA measures perceptual contrast. A pair that clears 4.5:1 can still fall short of the Bridge-PCA Lc threshold — a stricter model. 📌 Does APCA replace WCAG? ↳ No — APCA is not a replacement, but a useful second opinion. This contrast checker reports both. 📌 Can I scan a local file or my dev server with this accessibility checker? ↳ Yes. Enable "Allow access to file URLs" in the extension settings. Open the file:// or localhost URL and click the toolbar icon. Only chrome://, the Chrome Web Store, and other restricted schemes are skipped. 📌 Does this tool certify ADA compliance? ↳ No. It checks color contrast only — one facet of accessibility. ADA compliance is a legal determination covering many standards and criteria (semantics, keyboard access, alt text, captions, and more) and should be assessed by a qualified professional.