Skip to main content
Skills/Product & Design/figma-accessibility-checker

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

  1. 1Connect to Figma MCP and read the target frame or page
  2. 2Extract color values, text properties, frame sizes, and layer hierarchy
  3. 3Calculate contrast ratios for every text-on-background pair
  4. 4Check interactive elements against 44x44px minimum touch target
  5. 5Evaluate reading order from layer hierarchy and auto-layout structure
  6. 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.md

Claude Code — project-specific

.claude/skills/figma-accessibility-checker/SKILL.md

Cowork — skill plugin

Upload .skill.zip via Cowork plugin manager

Compatible 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