Figma Accessibility Audit Checklist
For: Product designers, design system maintainers, design managers
Every accessibility bug found in Figma costs ~1 hour to fix. The same bug found in code costs ~1 day. Found in production after a user complaint, ~1 week including support, hot-fix, retro. This checklist is the design-time pass that prevents the latter two from ever happening.
References: WCAG 2.2 · Stark + Able Figma plugins
Want to audit color contrast against this checklist on real screens — instantly, from your phone?
Use AccessAudit AI — runs offline, captures photo evidence per item, exports a sharable PDF.
Color & Tokens
Every color combination in the design tokens passes WCAG AA at intended use case
Brand color tokens have an "accessible-text" variant for body copy use
Focus state tokens defined and have ≥3:1 contrast against unfocused state
Dark-mode color tokens defined alongside light-mode (not afterthought)
Typography
Body type ≥16px (no smaller for dense paragraphs)
Line height ≥1.5× font size for body text
WCAG 1.4.12
Paragraph spacing ≥2× font size
No text-as-image (use real text — even for stylized type if possible)
Components
Every interactive component has Hover + Focus + Active + Disabled variants designed
Disabled states have NO contrast requirement but should still be readable
Required-field indicator uses icon + color + text (not color alone)
Toast/banner components show icon + text (not color alone for severity)
Icon-only buttons have aria-label note in design hand-off
Layout
Layout reflows at 320px width (mobile) without horizontal scroll
Touch target hit areas ≥44pt even when visual is smaller (use invisible padding)
Heading hierarchy makes sense (H1 → H2 → H3, no skipping levels for visual reasons)
Hand-off Annotations
Every form field annotated with: label text, required state, autocomplete hint
Every icon-only button annotated with aria-label
Run this on your phone
Point your iPhone camera at any color pair to see WCAG contrast ratio + pass/fail in real time. 100% on-device.