We Audited 400 Figma Components for Accessibility in 8 Minutes

The Problem

Accessibility audits are expensive, slow, and usually happen too late.

The typical pattern: you build a product, ship it, then someone (a customer, a lawyer, a compliance officer) points out that your buttons have a 2.8:1 contrast ratio when WCAG AA requires 4.5:1. Now you're retrofitting. Retrofitting accessibility is 10x more expensive than building it in.

We have a design system with 400+ components in Figma. Buttons, inputs, cards, modals, navigation elements, data tables — each with multiple states. A manual accessibility audit of that system means a specialist opening every component, checking color contrast with a picker tool, measuring touch target sizes, verifying text readability, and documenting every failure.

Agency quote: $10,000. Timeline: 2 weeks. And that's just the audit — fixes not included.

We needed a way to scan the entire system in one pass, get a prioritized list of failures, and fix them before they ever reach production.

The Solution

We used an Mr.Chief agent to read our Figma design system via API, analyze every component against WCAG 2.1 AA and AAA criteria, and generate a compliance report sorted by severity.

The agent doesn't just flag failures — it tells you exactly what's wrong, what the current value is, what it should be, and which components are affected.

The Process (with code/config snippets)

The agent receives a simple instruction:

Audit this Figma design system for WCAG 2.1 accessibility:
https://www.figma.com/file/xyz789/PyratzLabs-Design-System

Check:
- Color contrast ratios (AA and AAA)
- Touch target minimum sizes (44x44px)
- Text readability (font size minimums)
- Focus state presence
- Color-only information encoding

Output: prioritized report with fix recommendations

The agent walks the Figma file tree and performs these checks programmatically:

Color contrast analysis:

For each text node:
  1. Get text fill color
  2. Get parent background color (walking up the node tree)
  3. Calculate relative luminance ratio
  4. Compare against WCAG thresholds:
     - AA normal text: 4.5:1
     - AA large text (18px+ or 14px+ bold): 3:1
     - AAA normal text: 7:1
     - AAA large text: 4.5:1

Touch target sizing:

For each interactive component (buttons, inputs, links, toggles):
  1. Get bounding box dimensions
  2. Flag if width < 44px OR height < 44px
  3. Check spacing between adjacent targets (minimum 8px)

Focus state detection:

For each interactive component:
  1. Check if variant set includes "focused" or "focus" state
  2. If yes, verify focus indicator is visible (border or outline change)
  3. If no focus state exists, flag as critical

The output report looks like this:

## Accessibility Audit Report — PyratzLabs Design System
**Scanned:** 400 components | **Time:** 8m 12s
**Overall Score:** 72/100 (AA), 41/100 (AAA)

### 🔴 Critical (14 issues)
1. **Button/Secondary** — Contrast ratio 2.9:1 (requires 4.5:1)
   - Text: #9CA3AF on background: #F3F4F6
   - Fix: Darken text to #6B7280 (achieves 4.6:1)

2. **Input/Placeholder** — Contrast ratio 2.1:1
   - Text: #D1D5DB on background: #FFFFFF
   - Fix: Darken to #9CA3AF (achieves 3.2:1, meets large text AA)

3. **NavLink/Default** — No focus state variant
   - Fix: Add focus variant with 2px outline offset

### 🟡 Warning (23 issues)
...

### 🟢 Passing (363 components)
...

The Results

The manual audit sampled 100 components and found 8 issues. The agent scanned all 400 and found 37. That delta — 29 issues that would have shipped to production — is the real story.

The other killer feature: rerunning. After the design team fixes the flagged issues, we rerun the audit in 8 minutes to verify. No rebooking the agency. No waiting 2 weeks for a follow-up report. Fix, scan, verify, ship.

Try It Yourself

Point an Mr.Chief agent at any Figma file with a read-only token. Ask for a WCAG 2.1 audit. You'll get a report in minutes that would take a human specialist days.

The components you think are accessible probably aren't. We were at 72% compliance and we thought we were good. Now we're at 96% and climbing.

Run the audit before your users file the complaint.

Accessibility isn't a feature. It's a legal requirement that most teams treat like a suggestion. We stopped guessing and started measuring.