Figma Contrast Check — WCAG AA (Lite)

Color accessibility usually gets caught late — after a page is built, when a contrast fix becomes a design-vs-code back-and-forth. This skill runs the same WCAG math against the Figma file itself, so contrast problems get caught at the design stage, before implementation starts.

What it does

• Walks every text node inside a Figma FRAME, SECTION, COMPONENT, or COMPONENT_SET — including text inside component instances, which a surface-level check would miss
• Resolves each text segment's real foreground color individually, instead of guessing one color for a mixed-color text run
• Resolves the true effective background by compositing through covering siblings, parent fills, and opacity stacking — not just the nearest parent's fill
• Flags text sitting on a photo or gradient background as a manual check instead of guessing a ratio from one sample pixel
• Classifies large vs normal text per the WCAG point-size rule and checks against the correct threshold (3:1 or 4.5:1)

How it works

1. Takes a Figma frame, section, component, or component set URL
2. Scans every text node depth-first, including inside instances, skipping anything hidden or fully transparent
3. For each text segment, resolves the foreground and effective background color, computes the contrast ratio, and classifies it against WCAG AA
4. Reports a table: layer, sample text, size and weight, resolved colors, ratio, required minimum, and pass, fail, or manual-check verdict

Why this beats prompting it yourself

Standard LLM prompts cannot "see" the raw hex values or the stacking order of Figma layers without direct API access. This skill resolves effective colors through nested instances and opacity levels, giving technical accuracy that visual inspection lacks.

What it is not

This is a read-only report — it never edits the Figma file. WCAG AA only, text contrast only. AAA conformance, an advisory pass on non-text UI elements like borders and icons, and confirmation-gated auto-fixing of failing colors are covered by the full figma-contrast-check skill instead.

Requirements

Runs inside an agent connected to the official Figma MCP server — the same connection used for implementing Figma designs as code. No local file access, no arbitrary network calls, and it never writes to your Figma file.