Context-aware checks
Reads computed text color, background color, inherited styles, and layered transparent backgrounds from the DOM.
Chrome extension
Accessibility
WCAG 2.1
Contrast Check
Hover text on any webpage and see its contrast ratio, computed colors, and WCAG AA/AAA status without leaving the page or running a full audit.
01 · Problem
Contrast checks should fit the work in front of you.
Full-page accessibility reports are useful, but they are heavy when the task is a single color decision. Contrast Check is built for quick spot checks during development, design QA, and manual accessibility review.
Activate the extension, hover text, and inspect the exact foreground and background colors the browser is rendering. The result includes the contrast ratio and the relevant pass or fail status.
What it handles
Computed styles matter more than design-token guesses.
Automatic thresholding
Uses font size and weight to decide whether normal text or large-text WCAG thresholds apply.
Manual-review flags
Photographic backgrounds, complex gradients, and video are flagged because they cannot be reliably reduced to one background color.
02 · Standards
The thresholds are explicit.
| Text type | AA minimum | AAA enhanced |
|---|---|---|
| Normal text | 4.5:1 |
7:1 |
| Large text (18pt+ or 14pt+ bold) | 3:1 |
4.5:1 |
03 · Audience
Built for people making and reviewing interfaces.
Developers can check hover, focus, and component states while coding. Designers can validate color choices against rendered UI instead of static assumptions. QA and accessibility reviewers can move through pages without re-running broad scans for every individual text element.
The extension uses minimal permissions and only evaluates the active tab when the user turns it on. It does not create accounts, send audit data to a service, or collect browsing history.
Related
More accessibility and color work.
Government website design
Notes on practical standards, trust, and usability in public-service interfaces.
Save Image As
Another small Chrome extension focused on a specific browser workflow.
Visual Chromatics
Extract image palettes into CSS custom properties for design work.