Figma Accessibility Checker Skill
Checks Figma designs for WCAG 2.2 compliance before they reach code. Reads frames through Figma MCP and flags contrast failures, missing alt text, small touch targets, and focus order issues.
A reusable skill package for Claude Code and Cowork.
When to use this skill
- Checking color contrast in Figma designs before handoff
- Validating touch target sizes for mobile designs in Figma
- Reviewing a Figma prototype for keyboard navigation and focus order
- Running a pre-development accessibility gate on design files
What this skill does
Reads Figma frames and components through the MCP server. Extracts fill colors, text styles, frame dimensions, and layer ordering. Evaluates each against WCAG 2.2 criteria: contrast ratios (AA and AAA), touch target minimums (44x44px), text sizing, and logical reading order. Produces a checklist with pass/fail per criterion and fix suggestions.
How it works
- 1Connect to Figma MCP and read the target frame or page
- 2Extract color values, text properties, frame sizes, and layer hierarchy
- 3Calculate contrast ratios for every text-on-background pair
- 4Check interactive elements against 44x44px minimum touch target
- 5Evaluate reading order from layer hierarchy and auto-layout structure
- 6Output a WCAG 2.2 compliance report with pass/fail per criterion and fixes
Full Skill Definition
---
name: figma-accessibility-checker
description: "Checks Figma designs for WCAG 2."
---
# Figma Accessibility Checker
## Overview
You are an accessibility specialist focused on WCAG 2.2 compliance, assistive technology support, and inclusive design.
## Purpose
Help teams identify and fix accessibility barriers to ensure products are usable by everyone, including users with disabilities.
## When to Use
When a user needs a WCAG 2.2 compliance check, accessibility audit, or guidance on making a feature accessible.
## Accessibility Review Process
## Step 1: Identify Compliance Level & Legal Requirements
Determine the target WCAG 2.2 level (A, AA, or AAA) and any legal requirements (ADA, Section 508, EN 301 549, European Accessibility Act). Clarify the scope of the audit and which pages or components are prioritized.
## Step 2: Automated Checks
Run through automated-checkable criteria: color contrast, alt text, heading hierarchy, form labels, link text, and language attributes.
## Step 3: Manual Testing Criteria
Evaluate keyboard navigation, focus management, screen reader announcements, motion/animation controls, and touch target sizes. Include user testing with assistive technology users (screen reader, switch access, voice control) where possible to catch issues automated and manual heuristic checks miss.
## Step 4: Remediation Guide with Prioritization
For each issue, cite the specific WCAG 2.2 success criterion, explain the user impact, and provide a code-level fix. Categorize remediations into tiers: Quick Win (low effort, high impact), Moderate (medium effort, clear compliance value), and Complex (requires architecture changes). Validate fixes with retesting.
## Error Handling
## Technology Stack Matters
Accessibility implementation varies by framework (React, native iOS, Android). Ask about the tech stack before recommending specific ARIA patterns.
## Automated ≠ Complete
Always note that automated checks catch ~30% of issues. Manual testing and user testing with assistive technology users are essential.
## Legal Landscape Awareness
Accessibility law is evolving. Flag relevant deadlines (e.g., European Accessibility Act enforcement starting June 2025) and recommend legal consultation for organizations with regulatory exposure.
Summary
Checks Figma designs for WCAG 2.2 compliance before they reach code. Reads frames through Figma MCP and flags contrast failures, missing alt text, small touch targets, and focus order issues. Install this skill by placing the package in ~/.claude/skills/figma-accessibility-checker/ for personal use, or .claude/skills/figma-accessibility-checker/ for project-specific use.
FAQs
Does this catch all accessibility issues?
It catches visual and structural issues visible in the Figma file: contrast, sizing, ordering. It cannot test keyboard behavior, screen reader announcements, or dynamic states. Pair it with the a11y-compliance-checker skill for code-level testing.
Which WCAG level does it check?
AA by default. You can request AAA checking, though AAA is rarely required and significantly more restrictive (7:1 contrast ratio for normal text).
Can it fix issues automatically?
It suggests fixes with specific values (e.g., 'change text color from #999 to #767676 for 4.5:1 contrast'). Applying changes requires Figma MCP write access or manual updates.
Download & install
Install paths
Claude Code — personal (all projects)
~/.claude/skills/figma-accessibility-checker/SKILL.mdClaude Code — project-specific
.claude/skills/figma-accessibility-checker/SKILL.mdCowork — skill plugin
Upload .skill.zip via Cowork plugin managerCompatible with Claude Code, Cowork, and any SKILL.md-compatible agent platform.
Skills in the registry are community starter templates provided as-is. skill.design and Designless do not guarantee accuracy, completeness, or fitness for any purpose. Always review, customize, and validate skills for your specific use case before deploying to production. You are responsible for the behavior of skills you install and use.
Figma Skills vs skill.design — Side-by-side comparison of Figma's built-in skills and open alternatives
How Figma Skills Work — Architecture deep dive: MCP server, 16 tools, SKILL.md format, use_figma
Working with design systems? See the W3C token spec at designtoken.md →