Figma Contrast Check — WCAG AA/AAA + Auto-Fix

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 WCAG math against the Figma file itself, and can fix the failing colors right there once you approve, so problems are gone 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
• Checks against WCAG AA or AAA, with the correct threshold for large vs normal text
• Flags text on a photo or gradient as a manual check instead of guessing a ratio from one sample pixel
• Optionally adds an advisory pass on non-text UI elements such as borders and outlines (WCAG 1.4.11), reported for a human decision and never auto-fixed
• Shows a table of proposed fixes first — current color, proposed color, new ratio — and changes nothing until you say yes, or pick individual rows
• Fixes text colors by adjusting lightness only, so hue never drifts, or adjusts a solid background fill instead when that is safe

How it works

1. Takes a Figma frame, section, component, or component set URL and asks two questions: AA or AAA, and whether to include non-text UI elements
2. Scans every text segment depth-first, resolves foreground and effective background, and computes each ratio
3. Reports a table: layer, sample text, size and weight, resolved colors, ratio, required minimum, and pass, fail, or manual-check verdict
4. If anything fails, offers to fix text color, fix background color, or leave it as a report
5. Applies only the rows you approve, then tells you to re-run to confirm the result

Safe by design

Colors bound to a Figma variable are never overwritten: the skill skips them and names the variable, because editing the fill would silently unbind it. Fixes inside component instances are applied as local overrides and flagged as diverging from the main component. Nothing is written without your confirmation.

What it is not

It checks color contrast only — not font size, focus states, or the rest of WCAG. Results are calculated from fill colors, so text on photos, gradients, or blend modes is flagged for a human check rather than judged. If you only need a read-only AA check, the free lite edition covers that.

Requirements

Runs inside an agent connected to the official Figma MCP server — the same connection used for implementing Figma designs as code. Needs edit access to the Figma file only if you choose to apply fixes. No local file access and no arbitrary network calls.

Works well with

Figma Contrast Check Lite (the free, read-only edition) and Tailwind Review (the same contrast idea applied to implemented Tailwind markup).

More from KMRVID

The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills