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.
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.
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.
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.
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.
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.
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 Used In This Workflow
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 Presentation Slide Decks with AI
Go from a topic and bullet points to a fully structured, visually designed slide deck in under 30 minutes using AI tools.
View workflow