Automating Contrast Verification in CI/CD

Color systems cannot rely on human visual inspection alone. When a designer edits a color token in Figma or an engineer tweaks a CSS variable, subtle contrast failures can slip into production.

Automated pipelines catch contrast bugs before release:

1. Token Linter (Pre-Commit): A script checks every Tier 2 semantic token pair (color-text-primary against color-bg-surface), calculating the mathematical contrast ratio and blocking the commit if it falls below 4.5:1.
2. Axe-Core in Cypress / Playwright: Automated accessibility scanners evaluate rendered DOM trees under both theme-light and theme-dark classes in CI.
3. Color Blindness Emulation Tests: Chrome DevTools MCP and Playwright emulate deuteranopia and achromatopsia to verify that status badges are distinguishable without color cues.