ContrastGuard feature guide
What the numbers mean and how they are produced, so you can trust them and know their limits.
The ratio
Contrast is computed exactly as WCAG 2.1 defines it: the relative luminance of each color in sRGB, then (lighter + 0.05) divided by (darker + 0.05). The result runs from 1:1 (identical) to 21:1 (black on white).
- Name
AA- Type
- 4.5:1, or 3:1 for large text
- Description
The legal bar in most jurisdictions and the target for body text.
- Name
AAA- Type
- 7:1, or 4.5:1 for large text
- Description
The enhanced level; a good goal for long-form reading.
- Name
Large text- Type
- 24 px, or 18.66 px at weight 700 or more
- Description
WCAG's 18 pt and 14 pt bold thresholds converted to pixels. A layer with mixed sizes is judged at its smallest size and lightest weight, which is the strictest reading.
How the background is found
The plugin walks up from the text layer through its ancestors collecting their fills, nearest first, until it reaches a fully opaque one. Translucent fills are composited over what lies beneath, so a 20 percent white overlay on a dark card is measured as the color you actually see. A gradient fill contributes every stop, and the row reports the worst case with a "gradient, worst stop" note. Text with its own opacity is blended the same way. When nothing opaque is found the base is white.
Overlapping sibling layers and image fills are not evaluated; see troubleshooting for what that means in practice.
Typography flags
Each row also shows a flag when the smallest text in the layer is under 12 px, or when the line height is below 1.2 times the font size. These are readability warnings, not WCAG failures.
Pair check
With two layers that have solid fills selected, the pair card shows their ratio live and updates as you change either color. Typing hex values into the two fields does the same without touching the canvas. The swatch previews the text color on the background color.
Fixing a failing row (Pro)
- Name
Nearest shade- Type
- default
- Description
Nudges the text color toward black or white, step by step, until it passes AA against its background. Reliable, but it drains saturated brand colors.
- Name
Keep hue- Type
- Pro
- Description
Adjusts only lightness, keeping hue and saturation, until the target passes. When no lightness of that hue can pass (a mid-grey background, for example) the plugin falls back to the nearest shade and tells you.
- Name
Fix all failing- Type
- Pro
- Description
Applies the current fix mode to every failing row in one go and reports how many kept their hue.
A fix changes the text layer's first solid fill. Re-scan to confirm the new ratios.
Export CSV (Pro)
Downloads the scan as contrast-report.csv with layer name, text, foreground, background, ratio, required ratio, verdict, size and weight. Attach it to a ticket or paste it into an audit sheet.
Vision simulation
The selected frame is rendered once at up to 1000 px and re-colored with the standard dichromacy matrices for protanopia, deuteranopia and tritanopia, plus a luminance-only achromatopsia view. These are widely used approximations, good for catching red-green confusions and charts that depend on hue alone. About 8 percent of men have some form of red-green color blindness.
Tap targets
Every layer with a prototype interaction is measured. WCAG 2.2 requires at least 24 by 24 px; Apple and Google recommend 44 and 48 px. Layers without interactions are not listed, so wire up your prototype first.