WCAG Contrast Checker

Find text that fails accessibility contrast standards — instantly. Click the toolbar icon and WCAG Contrast Checker examines every visible text element on the page, computes its exact contrast ratio, and checks it against the WCAG 2.1 thresholds: 4.5:1 for normal text and 3:1 for large text at level AA, 7:1 and 4.5:1 at level AAA. WHAT YOU GET • A worst-first list of every failure, with the measured ratio, the required threshold, and swatches of the exact text and background colors • Red outlines on the page for AA failures, orange for text that passes AA but falls short of AAA • Click any result to scroll straight to the offending element • Correct large-text rules applied automatically (24px+, or 18.66px+ bold) • A bundled demo page with labeled examples so you can see exactly how it works — one click from the popup MEASURES WHAT'S ACTUALLY RENDERED The checker resolves what your text really sits on: it composites semi-transparent backgrounds and rgba() text through the layer stack, follows modern CSS colors (oklch, lab — including Tailwind v4 palettes), honors -webkit-text-fill-color, and traverses shadow DOM. Text over images or gradients is flagged for manual review instead of being scored with a made-up number, and screen-reader-only text is correctly left alone. PRIVATE BY DESIGN Everything runs locally in your browser. No data is collected, stored, or transmitted — no analytics, no accounts, no network requests. The extension only touches the tab you click it on. Built for developers, designers, and accessibility auditors who want the answer in one click instead of a copy-paste round trip to a contrast calculator.