Instant WCAG Contrast Check

About

A lightweight Chrome extension that shows WCAG contrast ratios on hover. No panel to open, no full-page audit. Point at any text and see if it passes.

FEATURES
  • Hover to inspect: Move your cursor over any text element to see its contrast ratio instantly
  • WCAG 2.1 compliant: Shows pass/fail for AA and AAA, with large text detection
  • Background resolution: Walks up the DOM to find the true effective background color
  • Background image detection: Flags elements over background images instead of guessing
  • Copy colors: Click any element to copy foreground and background colors to clipboard
  • Minimal permissions: Only uses activeTab and scripting, no persistent access

HOW TO USE
  1. Click the Contrast Check icon in the toolbar to activate
  2. Hover over any text element to see the contrast tooltip
  3. Click an element to copy its foreground and background colors
  4. Press Escape to deactivate, or click the toolbar icon again

EDGE CASES HANDLED
  • Semi-transparent text colors composited against background
  • Semi-transparent background layers composited down to root
  • Large text detection (≥24px, or ≥18.66px and bold)
  • Background images and gradients (flagged, not guessed)

PERFECT FOR
  • Web developers and designers
  • Accessibility auditors
  • Anyone who cares about readable interfaces

PRIVACY
This extension does not collect, store, or transmit any user data. It runs entirely locally in your browser.