Color Spector

About

Color Spector is a Chrome extension for designers, frontend developers and accessibility auditors who need to instantly inspect, test and edit colors on any live webpage — without opening DevTools.

────────────────────────
HOW IT WORKS
────────────────────────

Activate Color Spector and color-coded overlays appear across every element on the page, showing hex values for text color, background and border. Switch to Hover Mode to keep the page clean — hover any element to see a floating tooltip with full color details.

────────────────────────
LIVE COLOR EDITOR
────────────────────────

The tooltip is not just for reading. Click any element to pin the tooltip open, then click the color swatch to open the native color picker and change the color live on the page. See the result instantly without editing any code. Copy the updated CSS value in one click.

────────────────────────
WCAG CONTRAST CHECKER
────────────────────────

Every tooltip shows the contrast ratio between text and background — with WCAG AA and AAA pass/fail status. The built-in contrast checker automatically updates with the colors of whatever element you hover, so you can check accessibility on any part of the page in seconds. Manually pick any two colors to test combinations before implementing them.

────────────────────────
FEATURES
────────────────────────

- Overlay mode — see all element colors labeled at once across the page
- Hover mode — inspect one element at a time with a clean floating tooltip
- Live color editor — click any color swatch to change it live on the page
- Copy hex — copy individual hex values directly from the tooltip
- Copy CSS — copy all color properties as CSS in one click
- WCAG contrast checker — automatic AA / AA Large / AAA pass/fail indicators
- Auto-updates contrast checker — hovering any element instantly updates the checker
- 4 filter layers — toggle Text Color, Background, Border and Contrast independently
- Ignore selectors — exclude icon fonts, images or any element from overlays
- Dark and Light mode — switch the popup UI to match your workflow
- Zero data collection — nothing is tracked, stored or transmitted

────────────────────────
COLOR LEGEND
────────────────────────

● Indigo  — Text color
● Orange  — Background color
● Green   — Border color
● Red     — Low contrast warning (below WCAG AA 4.5:1)

────────────────────────
WHO IS IT FOR
────────────────────────

Color Spector is built for UI designers checking color consistency across a live site, frontend developers verifying design token implementation, and accessibility auditors catching contrast failures before they reach production.

Works on any website. No configuration needed. No DevTools. Just activate and hover.

────────────────────────
PART OF THE SPECTOR SUITE
────────────────────────

Color Spector is part of the Spector design inspection suite. Also available:
- Space Spector — inspect padding, gaps and spacing
- Type Spector — inspect fonts, size, weight and line height