Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 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
- Generated the UI component
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.
figma-contrast-check-wcag-aa-lite.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
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.More from KMRVID
This lite edition is free and open source: https://github.com/gaspanik/figma-contrast-check-lite-skill . The complete Claude Code skill bundle for web design workflows, including the full figma-contrast-check with AAA conformance and auto-fix, is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskillsHow to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean today
- Free to download with an account