About figma-audit-accessibility
figma-audit-accessibility is a Figma skill for auditing one component or component set and producing a weighted accessibility scorecard with prioritized fixes. It examines variants and visual properties, and adjusts scoring based on whether a component is interactive or presentational.
Key features
- 01Weighted 0–100 accessibility scorecard
- 02Prioritized recommendations with WCAG criteria
- 03Interactive or presentational classification
- 04Variant-tree and visual-property inspection
- 05Configurable tap-target minimum
Use cases
- 01Reviewing accessibility of a single component
- 02Prioritizing component fixes by severity
- 03Rechecking a component after applying recommendations
MCP support
It runs through `use_figma` and inspects Figma components using the Plugin API. The audit is read-only; the README distinguishes it from tree-wide linting and code-side accessibility checks.
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/figma-audit-accessibilityin Claude Code to confirm it loaded.
Bundled filesreferences/audit-categories.mdscripts/audit-accessibility.js
Details
From the project READMEfigma-audit-accessibility — per-component a11y scorecard
Run a deep accessibility audit on a single component or component set and get a weighted 0–100
scorecard with prioritized fixes. Where figma-lint-design sweeps a whole tree for many rule
violations, this skill goes deep on one component: it understands variant axes, classifies the
component as interactive vs presentational, and scores each a11y dimension accordingly.
All via use_figma, on any plan — it inspects the real variant tree, fills, strokes, effects, and
the component description.
Skill boundaries
use_figmarules — load the officialfigma-useskill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-levelawait+return(no IIFE, nofigma.closePlugin();console.logis not returned), inputs inlined asconstat the top of each script, colors in 0–1 range, load fonts before any text op,await figma.getNodeByIdAsync(...), and atomic errors (a failed script applies nothing — read the error, fix, retry).- Tree-wide WCAG + design-system lint → use
figma-lint-design. - CODE-side a11y (axe-core over HTML) → use
figma-scan-code-accessibility. - Design-vs-code drift → use
figma-check-design-parity.
Workflow
- Target a component. Set
NODE_IDto a COMPONENT_SET, COMPONENT, or INSTANCE id (the script walks INSTANCE → main component → parent set automatically). Leave itnullto audit the current single selection. - Set the tap-target minimum.
TARGET_SIZEdefaults to 24 (WCAG 2.5.8 minimum); pass 44 or 48 for stricter mobile targets. - Run
scripts/audit-accessibility.jsviause_figma(skillNames: "figma-audit-accessibility"). - Read the scorecard.
overallScoreis a classification-weighted blend of the six category scores. See references/audit-categories.md for each category, its weight, and how to raise it. - Work the recommendations.
recommendations[]is already sorted bypriority(high/medium/low) with the WCAG SC named. Fix, then re-run to confirm the score moved.
Key rules
- Interactive vs presentational is auto-detected from the component name and variant axes. It changes which categories are scored and their weights — a badge is not penalized for lacking a focus state; a button is.
- Colors are 0–1 floats. Contrast uses sRGB luminance; color-blind simulation uses Brettel/Viénot dichromat matrices.
- Coverage means interaction states for interactive components, and variant-axis completeness (actual variants ÷ expected combinations) for presentational ones.
- The audit is read-only — apply fixes with
figma-manage-variables/figma-use, then re-audit.