Simple WCAG Contrast Checker

About

Simple WCAG Contrast Checker helps web developers and designers verify color contrast compliance directly in the browser — no external tools, no login, no setup required.

HOW IT WORKS
Click the extension icon to open the inspector panel on any webpage. The extension automatically scans all visible text elements, calculates their contrast ratio, and highlights elements that fail the selected WCAG standard.

FEATURES
- WCAG AA and AAA standard toggle
- Full-page scan highlights all failing text elements with red overlay and contrast ratio
- Click any highlighted element to inspect and edit its colors in real time
- Live contrast ratio updates as you adjust foreground and background colors
- Copy CSS selector to clipboard with one click
- Draggable and resizable inspector panel
- Panel transparency control
- Remembers panel position, size, opacity, and selected standard across sessions
- Shadow DOM isolation — panel never conflicts with host page styles
- Press Esc to close

WHO IS THIS FOR
- Front-end developers building accessible web interfaces
- Designers verifying color contrast before handoff
- QA testers running WCAG compliance checks

WCAG CONTRAST STANDARDS
- AA: 4.5:1 for normal text · 3:1 for large text (24px+ or bold 18.6px+)
- AAA: 7:1 for normal text · 4.5:1 for large text

PRIVACY
The extension does not collect, store, or transmit any personal data. All contrast analysis runs locally in your browser. Preferences are saved locally via Chrome's storage API and never leave your device.

Privacy policy: https://hardawebpro.com/support/privacy-policy-simple-wcag-contrast-checker/