Design Snap
Check the WCAG contrast of an entire page
Design Snap is a free Chrome extension that audits the text contrast of the whole page you are looking at against WCAG 2.1 — AA (4.5:1, or 3:1 for large text) and AAA (7:1). It measures the ratio actually rendered, compositing translucent backgrounds and semi-transparent text first, and suggests fixes that only adjust lightness, so your brand hue stays intact.
Rated 5.0/5 on the Chrome Web Store · read the reviews · Free plan · No account · 100% local analysis
How to check color contrast on a website
Checking a page's contrast takes three steps. Instead of picking two colors by hand, Design Snap walks every text element on the page, finds the background it actually sits on, and computes the ratio.
-
Install
Add Design Snap to Chrome from the Chrome Web Store. Free plan, no account.
-
Extract
Open the page and press Extract. The Contrast tab shows the page's score and its worst failing text/background pairs.
-
Fix
With PRO, see every failing pair with a suggested color that passes — same hue and saturation, adjusted lightness.
WCAG contrast ratios in 30 seconds
WCAG 2.1 success criterion 1.4.3 (level AA) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24px, or about 18.7px bold). Level AAA (criterion 1.4.6) raises this to 7:1 and 4.5:1. The ratio compares the relative luminance of the text color and its background, from 1:1 (identical) to 21:1 (black on white).
Why pair-by-pair checkers miss real failures
Most contrast checkers ask you for two hex codes. On a real page, the hard part is knowing which two colors actually meet: a light gray caption on a tinted card, white text on a rgba() overlay, a muted link inside a colored banner. Design Snap finds those pairs for you, on the rendered page.
- Translucency is composited before measuring, so
rgba(0,0,0,.6)text on a tinted card is measured as it actually appears. - Large text uses the 3:1 threshold automatically, based on computed size and weight.
- Text on images or gradients is reported as skipped, not guessed — a ratio there would be meaningless.
Fixes that respect the brand
The usual fix for a failing pair is “make it darker”, which often means picking a different color. Design Snap's suggested fixes (PRO) only move lightness: hue and saturation stay untouched, so the corrected color still belongs to the palette. You can try the fix on the live page with live theme editing before touching code.
What this is — and isn't
Design Snap checks color contrast, one criterion of accessibility, very thoroughly. It is not a full accessibility audit: keyboard navigation, ARIA, alt text and focus order need a dedicated tool such as axe DevTools or Lighthouse, plus manual testing.
Every pair on the page, measured as rendered
A contrast score for the whole page, the worst failures first, and fixes that keep your colors yours.
- WCAG 2.1 AA and AAA thresholds, large text handled
- Translucent backgrounds and text composited before measuring
- Text on images and gradients flagged as skipped, never guessed
- Free: page score + the 3 worst failures
- PRO: every failing pair with a lightness-only fix
Contrast checker — FAQ
Install the Design Snap Chrome extension, open the page and press Extract. The Contrast tab shows a score for the page and its worst failing text/background pairs against WCAG 2.1 AA and AAA.
WCAG 2.1 level AA requires 4.5:1 for normal text and 3:1 for large text (24px, or about 18.7px bold). Level AAA requires 7:1 and 4.5:1.
Yes. Translucent backgrounds and semi-transparent text are composited before measurement, so the ratio is the one actually rendered on screen.
The page score and the three worst failures are free. PRO (€4.99 once, lifetime) shows the full list of failing pairs, each with a suggested fix.
No. It checks color contrast thoroughly, which is one of the most common WCAG failures, but keyboard access, semantics and screen-reader support need tools like axe DevTools or Lighthouse and manual testing.