WCAG Contrast Inspector

Reading the verdicts: AA, AAA and large text

The report shows five thresholds simultaneously, and each one answers a different compliance question. AA normal text (4.5:1) is the baseline every body paragraph must meet — it is the level most accessibility policies and lawsuits reference. AAA normal text (7:1) is the enhanced tier that readability-focused products like reading apps and government services target. The large-text thresholds (3:1 for AA, 4.5:1 for AAA) exist because bigger glyphs have inherently higher legibility — 24px regular or 18.66px bold qualifies as 'large' under WCAG. UI components (3:1) applies to buttons, input borders, icons and focus indicators: a white icon on a light-gray button fails this even though no 'text' is involved. Seeing all five at once turns the tool from a pass/fail oracle into a design instrument — you learn that your #767676 gray hits AA but misses AAA, and that darkening it two steps clears everything.

The luminance math behind the ratio

Contrast is computed from relative luminance, not from brightness or hex distance — which is why intuition fails so often. A channel value is converted from sRGB (the gamma-encoded space screens use) to linear light: values at or below 0.03928 divide by 12.92, everything else applies the standard 2.4-gamma expansion. The three linear channels are then weighted 0.2126, 0.7152 and 0.0722 — green dominates because human vision is most sensitive to it, which is why #00FF00 green feels blinding while #0000FF blue at identical hex luminance feels calm. The ratio divides the lighter luminance plus 0.05 by the darker plus 0.05, yielding the 1-to-21 scale. This is why pure black on pure white is exactly 21:1, why #777777 on white lands at 4.48:1 — agonizingly below the 4.5 threshold — and why #767676, a single step darker, squeaks past at 4.54:1. The tool exposes both luminance values in the report so you can see the weights at work.

Live preview and practical design workflow

Numbers need context, so the tool renders your actual pair as live text: a paragraph at body size and a heading at large size, using the exact colors you picked. That immediately surfaces the real-world cases the thresholds were written for — light gray placeholder text that technically passes AA but looks ghostly, or a dark-mode pair that passes on paper but vibrates visually because hue contrast is high while luminance contrast is low. The workflow most teams settle into: paste the foreground and background from your design tool, read the five verdicts, and when a pair fails, adjust the lighter color darker or the darker color lighter until AA clears — the ratio updates live with every keystroke. When you are stuck, the tool suggests black or white as the highest-contrast partner for your background, a fast fallback for badges and overlays. Everything updates locally as you type; there is no request, no rate limit and no upload.

Where contrast requirements apply beyond text

Text is the obvious case, but WCAG's 3:1 non-text requirement reaches across the interface: input field borders against their background, icon-only buttons, chart series against the canvas, focus rings, toggle tracks, and the state of disabled versus enabled — all must distinguish themselves for low-vision users. This is where the tool's UI-components verdict earns its place: test the button background against the page background, the icon against the button, the focus ring against both. Real failures are common — a brand's signature light-blue focus ring on white frequently sits at 2.7:1 and needs a two-step darken. Auditing these pairs before implementation is dramatically cheaper than remediating after a VPAT review or an ADA demand letter. Because the inspector accepts hex and rgb() input, you can sample directly from Figma's inspector panel and verify each pair in seconds, keeping the whole palette audit inside one browser tab.

Step by step: how to use Contrast Check

1. 1

   Enter your foreground (text) color as a hex value like #0EA5E9, or use the color picker to sample visually.

2. 2

   Enter your background color the same way — the page, card or button surface the text sits on.

3. 3

   Read the contrast ratio and the five verdicts: AA normal, AA large, AAA normal, AAA large, and UI components.

4. 4

   Check the live preview to judge real-world legibility, not just the number — perception includes hue and context.

5. 5

   If a verdict fails, darken the lighter color or lighten the darker one and watch the ratio update live until it passes.

6. 6

   Copy the passing hex pair back into your design system or CSS custom properties, then repeat for the next pair.

Frequently asked questions