Contrast Checker (Beta)

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 againHow to use:

1. Select a frame, component, button, or any element containing text2. The plugin automatically scans all text layers and shows results3. Failing items appear first, sorted by severity4. Click any card to select that text node on canvas5. Use the "Apply" button to fix a failing color instantly6. Click any hex code to copy it to clipboardWCAG 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 textFeatures:• 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