Contrast Checker (Beta)

About this plugin

Contrast Checker scans any frame, component, or selection and instantly evaluates every text layer against its actual background color using WCAG 2.1 standards.

What it does:

• Scans all text nodes in your selection automatically

• Detects the real background color behind each text (traverses the layer hierarchy)

• Calculates the precise contrast ratio per WCAG 2.1

• Shows AA pass/fail status with a clear visual indicator

• Notes AAA compliance level for stricter accessibility needs

• Suggests the closest accessible color for both text and background

• One-click Apply to fix colors directly in your design

• Auto-rescans when you change your selection — no need to click Scan again

How to use:

1. Select a frame, component, button, or any element containing text

2. The plugin automatically scans all text layers and shows results

3. Failing items appear first, sorted by severity

4. Click any card to select that text node on canvas

5. Use the "Apply" button to fix a failing color instantly

6. Click any hex code to copy it to clipboard

WCAG Levels:

• AA: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold)

• AAA: 7:1 for normal text, 4.5:1 for large text

Features:

• Light, clean UI that fits naturally in Figma

• Live color preview showing text-on-background for each result

• Image and gradient background detection via pixel sampling

• Visual contrast meter with AA/AAA threshold markers

• Borderline warnings for ratios close to the threshold

• Works with any font, any color, any nesting depth

• No configuration needed — just select and go