I built accessible color tooling for Figma and VS Code—WCAG and APCA on real layers.

The problem

Accessibility still sits at the end of the color workflow. VS Code has plenty of pickers; almost none tell you whether `#888888` on `#212121` passes WCAG or how it reads under APCA.

In Figma, the native checker is web-only. You copy hex out, check elsewhere, paste back—slow, and the first thing teams skip when the deadline hits.

Legal conversations need WCAG 2.x. Perceptual quality needs APCA. Most tools pick one, or none, and almost none run on the canvas pairs that actually ship.

• URL auditors miss Figma layers and design-system tokens
• Color-only state and weak component contrast stay common failure modes
• Monorepo deploy blocked shipping until an isolated weable-color-only build

My role & scope

I founded and built weableColor end to end—product, UX, core algorithms, Figma plugin, VS Code extension, weable.pro site, and launch docs. The proof is the live product, not a slide deck.

• Published `@weable-tools/a11y-color-utils` v0.1.1 — contrast, APCA, palette fix, license hooks
• Mission Control + Live Inspector on `selectionchange` — value on first open, not after Analyze
• VS Code: DocumentColorProvider, hover diagnostics, quick fixes, CSS/Tailwind export
• weable.pro on isolated Vercel build (51 → 16 pages, zero build errors)

Solution overview

One engine, three surfaces. The npm package powers VS Code, the Figma bundle, and colorStudio on weable.pro—a fix in Figma uses the same math as the extension nudging your pair toward AAA.

Docs and exports live on weable.pro; the plugin stays in-file. CSV, CSS variables, and Tailwind output match what I deliver on Fiverr contrast audits.

How it works — WCAG + APCA

WCAG 2.x ratios are the compliance baseline. APCA (Lc) adds perceptual context when type size, weight, or background complexity changes. weableColor shows both—I report numbers, not legal sign-off.

• WCAG: AA/AAA thresholds on real foreground/background pairs
• APCA: Lc with Bronze-tier guidance — see the APCA guide on weable.pro
• Live Inspector: suggested hex, not red/green badges only
• CSV export for design reviews and Fiverr deliverables (same plugin output)

Figma plugin — Mission Control & Live Inspector

I designed for zero-click context: selection changes update the panel—page score, failing pairs, fixes without leaving the file. That beats the empty-room pattern: sparse UI, Analyze friction, no value on open.

• Dynamic score and auto-scan on the current page
• Layer failures with suggested hex and one-click apply
• CVD simulation and in-plugin APCA
• In-file scan, fix, and export—vs Figma’s web-only checker

Design & accessibility (SACA)

Every surface uses SACA—stable `saca-wc-*` BEM hooks, WCAG 2.1 AA+ from day one. This portfolio uses `saca-portfolio-*` with the same rules so handoff stays predictable.

• Human-readable class names — no MUI hash selectors
• Keyboard paths, focus rings, contrast on chrome—not only customer content
• Marketplace copy: measure and report; never promise legal certification

Engineering highlights

Packaging was product work: tsup (CJS/ESM/types), vitest, semver, README. Isolated weable.pro deploy unblocked velocity—the focused tree cut scope and shipped clean.

• Core: `calculateContrastRatio`, `checkContrast`, `calculateAPCA`, `generatePalette`, `deltaE`, `initLicense`
• VS Code v0.0.2 published; early reactions validated native picker integration
• License flow designed: Gumroad webhooks, Resend, Supabase (Pro staged)
• ~18k lines of panel duplication removed in the broader program refactor

Shipped outcomes

weableColor is the first WeAble product shipped as a package: library, IDE extension, Figma plugin, and weable.pro. VS Code hit 900+ downloads before I leaned hard into Figma MVP—traction de-risked the bet.

• Live: weable.pro, VS Code extension, colorStudio Phase 1
• Figma: dynamic score, auto-scan, CSV, APCA, CVD, Mission Control fixes
• Fiverr contrast audits use the same CSV export as the plugin
• EU Accessibility Act timing documented as market context in launch docs

Competitive context

Figma’s flow sends you to the web. Generic pickers skip accessibility math. Stark set the bar for in-canvas contrast; my wedge is dual-metric depth (WCAG + APCA), dev-ready exports, and one engine across VS Code and Figma.

Try it · contact

Install from the VS Code Marketplace or read the Figma plugin docs on weable.pro. colorStudio runs in the browser on the same library.

I run Figma-first contrast audits—WCAG + APCA Lc, PDF summary, fix-ready CSV from weableColor. See /contact for packages ($45 / $95 / $195).

The APCA guide and WCAG vs APCA posts on weable.pro explain why I ship both metrics.

• weable.pro/products/weable-color — product hub
• /contact — contrast audit packages
• weable.pro/resources/apca-guide — perceptual contrast primer

weableAccess (paused)

weableAccess is the consulting layer—Fiverr deliverables, design-system reviews, enterprise accessibility work. Same SACA discipline and CSV outputs as the plugin.

• Active: weableColor surfaces + Fiverr contrast audits
• Consulting brand launches with Figma Community publish
• Same engine: plugin CSV matches audit deliverables

Roadmap

Figma Community publish, Pro licensing, and continued polish on Live Inspector and VS Code token workflows.

• Figma Community listing
• Live Inspector dual-metric refinements
• Tailwind and token resolution in VS Code
• Pro tiers on weable.pro

Reflection

Function before form got me live without dropping SACA baselines. Dynamic UX beat Analyze-button patterns. Packaging, deploy path, and marketplace copy are part of the product—over-claiming kills trust in accessibility faster than a missed swatch.

WCAG for compliance, APCA for perception—both in one panel is the moat. Next time: Figma Community in parallel with VS Code traction, not after checklist perfection.