More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
Manus
Grok
Grok Bot+18 agentsFigma Contrast Check — WCAG AA/AAA + Auto-Fix
Checks every text node in a Figma frame against WCAG AA or AAA, flags text on photos as manual checks, and — only after you confirm — fixes failing colors in the file itself.
$9
Figma Contrast Check — WCAG AA/AAA + Auto-Fix
Example session with this skill installed
- Read your context and instructions
- Compiled the figma contrast check
Check parameters: WCAG AA · text + non-text UI elements (advisory) — the two questions the skill asks up front.
Scan: 53 text segments across the KUUKI editorial page.
44 pass · 7 fail · 2 manual check. Two hero texts sit on a photo, so they were flagged for a human look instead of getting a guessed ratio.
| # | Layer | Colors | Ratio | Needs |
|---|---|---|---|---|
| 1 | Lighting (category pill) | #8FA98B on #3D4F4F | 3.38:1 | 4.5:1 |
| 2 | Selected Works | #8FA98B on #F7F9F6 | 2.41:1 | 4.5:1 |
| 3 | Body copy, "Living Landscape" | #626E6E on #E5EAE4 | 4.33:1 | 4.5:1 |
| 4–7 | Footer: Categories, Contact, © line, tagline | white at 50% on #3D4F4F | 3.51:1 | 4.5:1 |
Non-text UI (advisory only, never auto-fixed): the pill outlines and header rule measure 1.24:1 against the page, and the footer divider 1.4:1. Reported for a human decision — a decorative rule may be exempt under WCAG 1.4.11.
Fix candidates (hue preserved, lightness only; semi-transparent text gets its opacity raised instead):
| # | Layer | Current | Proposed | New ratio |
|---|---|---|---|---|
| 1 | Lighting | #8FA98B | #AFC1AC | 4.55:1 |
| 2 | Selected Works | #8FA98B | #5E795A | 4.55:1 |
| 3 | Body copy | #626E6E | #5F6B6B | 4.55:1 |
| 4–7 | Footer text | white @ 50% | white @ 63% | 4.58:1 |
→ yes — applied 7 / skipped 0.
Re-run after fixes: 53 segments ·
51 pass · 0 fail · 2 manual check. Nothing bound to a variable, so nothing was skipped; a color bound to a variable would have been left alone and reported with the variable's name instead of being silently unbound.
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 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
- 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
- Scans every text segment depth-first, resolves foreground and effective background, and computes each ratio
- Reports a table: layer, sample text, size and weight, resolved colors, ratio, required minimum, and pass, fail, or manual-check verdict
- If anything fails, offers to fix text color, fix background color, or leave it as a report
- 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).
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for UX & UI Design.
Checks color contrast only (WCAG 1.4.3 and 1.4.6, with 1.4.11 as an advisory pass). Text on photos, gradients, or blend modes is flagged for manual review rather than judged. Colors bound to Figma variables are not auto-fixed. Not supported on FigJam or Slides files.
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 buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 1 month ago
- Accounts
Figma
Permissions
Allowed Hosts
This skill's only external interaction is through the Figma MCP server the user's agent already has connected: get_metadata, get_screenshot, and use_figma. Scanning is read-only. The only write target is the connected Figma file, and only after the user reviews a table of proposed fixes and approves it — text fill colors or a solid background fill are changed, nothing else, and colors bound to variables are skipped. There is no local file read/write, no direct network or HTTP calls, and no terminal use. Connection steps differ by agent/client — see https://www.figma.com/mcp-catalog/ for setup guides.