A11y State Contrast Checker

On-demand WCAG contrast audit of interactive states (:hover, :focus, :focus-visible) using the Chrome DevTools Protocol.

Automated accessibility tools such as axe-core, Lighthouse and WAVE only check colour contrast on the page's resting state. They miss contrast failures that appear only when an element is hovered or focused — a faint hover text colour, a near-invisible focus ring, an icon that washes out on hover. A11y State Contrast Checker fills that gap. It uses the Chrome DevTools Protocol to force the real :hover, :focus and :focus-visible states on the page's rendering engine, then measures the resulting contrast — so specificity, !important, custom properties and media queries are all resolved correctly by the browser itself. What it checks: • 1.4.3 Contrast (Minimum) — text vs. background on hover/focus • 1.4.11 Non-text Contrast — the focus ring vs. its surroundings • 1.4.11 — icon-only controls (SVG fill/stroke) vs. background How to use it: open any page, click the icon, press "Run audit". Results show the element, the state, the measured ratio, the required ratio and pass/fail. Click a result to highlight that element on the page. Note: while a scan runs, Chrome shows its "started debugging this browser" bar — that is how the extension forces the interactive states via the DevTools protocol, and it disappears when the scan ends. Privacy: the extension collects no data and makes no network requests — everything runs locally. It is fully open source: https://github.com/conlaccento/a11y-state-contrast-checker