Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsFigma Contrast Check — WCAG AA (Lite)
Checks every text node in a Figma frame against WCAG AA contrast — including text on photo and gradient backgrounds — before a single line of code gets written.
Free
Figma Contrast Check — WCAG AA (Lite)
Example session with this skill installed
Check the WCAG AA contrast on this Figma frame before I start building it: https://www.figma.com/design/saVgYY1herfOrXxnP7UNtA/figma-optimize_from_Claude?node-id=35-108
- Read your context and instructions
- Compiled the figma contrast check
Contrast check report (WCAG AA)
| # | Layer | Sample text | Size / Weight | FG | BG (resolved) | Ratio | Required | Verdict |
|---|---|---|---|---|---|---|---|---|
| 1 | hero > heading | "海とプール、ふたつの水辺を独り占めする" | 50px Regular | #FFFFFF | — | — | — | ⚠️ Manual check — background is a photo with a 35% dark overlay, not fully opaque |
| 2 | hero > cta-row tagline | "限定12室のプライベートヴィラ" | 12px SemiBold | #FFFFFF | — | — | — | ⚠️ Manual check — same photo background |
| 3 | header > logo | "CORAL TERRACE" | 28px Regular | #123F3B | #FFFFFF | 11.67:1 | 3:1 (large) | ✅ Pass |
| 4 | header > cta button | "宿泊予約について問い合わせる" | 12px Bold | #FFFFFF | #8A3F2B | 7.43:1 | 4.5:1 | ✅ Pass |
| 5 | villa-experience > section label (eng) | "VILLA SPACES" | 14px Medium | #B56A4A | #FFFFFF | 4.10:1 | 4.5:1 | ❌ Fail |
| 6 | villa-experience > section label (jp) | "水辺と対話するプライベート空間" | 21px SemiBold | #123F3B | #FFFFFF | 11.67:1 | 4.5:1 | ✅ Pass |
| 7 | location-graphic > badge | "海に囲まれた、静寂のトポグラフィ" | 12px Regular | #FFFFFF | #123F3B | 11.67:1 | 4.5:1 | ✅ Pass |
| 8 | location-text > note | "※詳細な道程とアクセスは、ご予約が確定したゲストへ..." | 14px SemiBold | #B56A4A | #FFFFFF | 4.10:1 | 4.5:1 | ❌ Fail |
| 9 | final-cta > eyebrow | "RESERVATION" | 14px SemiBold | #B56A4A | #123F3B | 2.85:1 | 4.5:1 | ❌ Fail |
| 10 | final-cta > heading | "12室だけの、静かな休暇へ" | 38px Light | #F5F1E8 | #123F3B | 10.35:1 | 3:1 (large) | ✅ Pass |
| 11 | final-cta > guidance | "※スムーズなご案内のため、お問い合わせ前に..." | 12px Medium, 70% opacity | #B8C5C4 | #123F3B | 6.59:1 | 4.5:1 | ✅ Pass |
| 12 | footer > brand subtitle | "12 PRIVATE POOL VILLAS IN OKINAWA" | 12px SemiBold | #B56A4A | #FFFFFF | 4.10:1 | 4.5:1 | ❌ Fail |
| 13 | footer > nav link | "プライバシーポリシー" | 14px Medium | #123F3B | #FFFFFF | 11.67:1 | 4.5:1 | ✅ Pass |
Summary: 7 passed / 4 failed / 2 need manual check (out of 13 total)
The same terracotta (#B56A4A) fails in four separate places — against white in three spots and against the dark green brand background once. One color-token fix would resolve all four failures at once.
The full figma-contrast-check skill can auto-fix the four failing rows (with confirmation) once installed.
Connects securely to your tools. The creator never sees your data.
About this skill
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
- Takes a Figma frame, section, component, or component set URL
- Scans every text node depth-first, including inside instances, skipping anything hidden or fully transparent
- For each text segment, resolves the foreground and effective background color, computes the contrast ratio, and classifies it against WCAG AA
- 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.
Supports WCAG AA text contrast only. Skips non-text elements like icons/borders. Read-only; cannot modify Figma files. Requires a Frame, Section, or Component URL.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
This skill has been used 5 times.
Trust & safety
Security scan
Security scan passed 1 month ago
- Free with an Agensi account
Requires
FigmaPermissions
Allowed Hosts
This skill's only external interaction is through the Figma MCP server the user's agent already has connected — specifically the read-only tools get_metadata, use_figma (executed in a read-only mode that only reads node/fill/text data, never mutates), and get_screenshot. There is no local file read/write, no direct network or HTTP calls, and no terminal use. It never writes to the Figma file either. How to connect the Figma MCP server varies by agent/client — see the setup guide for each at https://www.figma.com/mcp-catalog/