Build an Automated Design QA Pipeline for Accessibility Compliance
Catch a color-contrast failure before it ships, not after a user complains they can't read it.
Download workflow config (JSON)How the data moves
This is a handoff plan, not an automatic integration. Review outputs before the next step. Unlabeled arrows show order, not a verified data format. Use the capability links to explore tool substitutions.
Step 1
Pull the Real Color Values, Not a Screenshot Guess
Use Figma's Dev Mode to read the exact hex or RGB values behind any text and background layer in a design file, since a script needs the real numbers to check contrast, not a vision model's impression of a rendered image.
Step 2
Compute the Actual WCAG Contrast Ratio
Run the real WCAG formula against those color values: relative luminance from each color's linearized RGB channels, then contrast ratio as (L1 + 0.05) divided by (L2 + 0.05). Check the result against 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and up), the actual WCAG 2.1 AA thresholds. This step is pure math, no model call needed, and it's what actually catches a real violation instead of a guess.
Tools
No catalog tool specified
Step 3
Use the Model Only for the Judgment Calls Math Can't Make
Send the rendered asset to Claude's vision API with a narrow question: does this design rely on color alone to convey meaning (a red versus green status dot with no label or icon), and would two colors used as different signals still look distinguishable under a color-vision deficiency simulation. These aren't contrast-ratio questions, they're genuinely judgment calls, which is exactly the kind of check a model call is worth spending on.
Step 4
Route on the Combined Verdict
Pass if the contrast math clears both thresholds and the model finds no color-only-meaning or color-blind-safety issue. Needs revision if the contrast math fails outright, since that's an unambiguous, fixable problem. Manual review if the math passes but the model flags a genuine judgment call, since that's exactly the case worth a human's five-minute look rather than an automatic block.
Tools
No catalog tool specified
Step 5
Know What This Checks and What It Doesn't
This catches contrast and color-only-meaning problems, not every accessibility issue: it says nothing about alt text, keyboard navigation, or screen-reader structure, which live in the code that renders the design, not the design file itself. A design that passes this gate is more readable, not fully accessible.
Tools
No catalog tool specified
Time Required
3 hours, one-time setup
Expected Result
Every new design asset checked against real WCAG contrast math and a color-blind-safe review before it goes out, with a clear pass, revise, or manual-review verdict.
Related Workflows
Build an Automated Brand-Compliance Gate for AI-Generated Design Assets
Catch off-brand colors, banned imagery, and logo violations in generated assets automatically, before a human reviewer ever opens the file.
View workflowGenerate Professional AI Headshots
Use AI image generation tools to create polished, professional headshots for LinkedIn, company websites, and personal branding, without a photographer.
View workflowBuild a Clear Presentation from an Approved Outline
Turn a defined audience, key message and checked facts into a coherent deck with supporting visuals and speaker notes. Plan 30–45 minutes for a short, familiar presentation, then allow additional time for original research, accessibility checks or custom design.
View workflow