Color Contrast Checker

Check accessibility in one click.

Color Contrast Checker lets you instantly verify whether text on any webpage meets WCAG 2.1 color contrast standards. Just activate the checker, click any text element, and see the contrast ratio with pass/fail results for AA and AAA compliance.

How it works:

1. Click the extension icon and hit "Activate Checker."
2. Click any text element on the page.
3. See the foreground color, background color, contrast ratio, and WCAG results in a clean overlay.
4. Click another element to check it, or dismiss the overlay.

Features:

- One-click inspection — Click any element to instantly check its contrast ratio.
- Full WCAG 2.1 coverage — Shows pass/fail for AA Normal, AA Large, AAA Normal, and AAA Large thresholds.
- Smart background detection — Walks up the DOM tree to resolve the actual visible background, even through transparent layers.
- Live preview — See a sample of the text/background color pair right in the overlay.
- Font size detection — Automatically determines if text qualifies as "large text" for relaxed WCAG thresholds.
- Hover highlighting — Elements highlight as you move your cursor, so you know exactly what you're about to check.
- Non-intrusive overlay — Uses Shadow DOM so the checker never breaks the page you're inspecting.
- 100% local — No data leaves your browser. No accounts, no tracking, no servers.

Who is this for?

- Web developers checking accessibility compliance
- Designers verifying color palette choices
- QA testers auditing sites against WCAG standards
- Anyone curious about the readability of text on a webpage

WCAG thresholds:

- AA Normal text: 4.5:1
- AA Large text: 3:1
- AAA Normal text: 7:1
- AAA Large text: 4.5:1

Privacy:

Color Contrast Checker does not collect, transmit, or share any data. Your settings and last check result are stored locally using Chrome's built-in storage. No analytics, no telemetry, no third-party services.