{"schemaVersion":"1.0","source":"The Workflow Finder","sourceUrl":"https://www.theworkflowfinder.com","license":"Free to use with attribution and a link to the cited page","generated":"2026-08-28","workflow":{"title":"Build an Automated Design QA Pipeline for Accessibility Compliance","slug":"build-an-automated-design-qa-pipeline-for-accessibility-compliance","url":"https://www.theworkflowfinder.com/workflows/build-an-automated-design-qa-pipeline-for-accessibility-compliance","description":"Catch a color-contrast failure before it ships, not after a user complains they can't read it.","difficulty":"Advanced","timeEstimate":"3 hours, one-time setup","schemaDuration":"PT3H","expectedResult":"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.","tags":["Design","Accessibility","Quality Control"]},"steps":[{"position":1,"title":"Pull the Real Color Values, Not a Screenshot Guess","instructions":"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.","input":"Workflow inputs: the topic, goal, or raw materials the user is starting from.","output":"Handoff artifact consumed by Step 2 (\"Compute the Actual WCAG Contrast Ratio\").","ioProvenance":{"input":"structural","output":"structural"},"toolSlots":[{"slug":"figma","name":"Figma","url":"https://www.theworkflowfinder.com/tools/figma","category":"Design","pricing":"freemium","capabilities":["Image generation","Code generation"],"hasApi":true}]},{"position":2,"title":"Compute the Actual WCAG Contrast Ratio","instructions":"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.","input":"Output of Step 1 (\"Pull the Real Color Values, Not a Screenshot Guess\").","output":"Handoff artifact consumed by Step 3 (\"Use the Model Only for the Judgment Calls Math Can't Make\").","ioProvenance":{"input":"structural","output":"structural"},"toolSlots":[]},{"position":3,"title":"Use the Model Only for the Judgment Calls Math Can't Make","instructions":"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.","input":"Output of Step 2 (\"Compute the Actual WCAG Contrast Ratio\").","output":"Handoff artifact consumed by Step 4 (\"Route on the Combined Verdict\").","ioProvenance":{"input":"structural","output":"structural"},"toolSlots":[{"slug":"claude","name":"Claude","url":"https://www.theworkflowfinder.com/tools/claude","category":"Writing","pricing":"freemium","capabilities":["Long-form writing","Code generation","Web research"],"hasApi":true}]},{"position":4,"title":"Route on the Combined Verdict","instructions":"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.","input":"Output of Step 3 (\"Use the Model Only for the Judgment Calls Math Can't Make\").","output":"Handoff artifact consumed by Step 5 (\"Know What This Checks and What It Doesn't\").","ioProvenance":{"input":"structural","output":"structural"},"toolSlots":[]},{"position":5,"title":"Know What This Checks and What It Doesn't","instructions":"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.","input":"Output of Step 4 (\"Route on the Combined Verdict\").","output":"Final workflow output: 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.","ioProvenance":{"input":"structural","output":"structural"},"toolSlots":[]}]}