Automating Contrast Fixes in CI: A Design System Integration Case Study

Tech · 6 min read

The design system team added automated contrast checks to their component library's CI pipeline, denying merges that introduce tokens or components failing WCAG AA color contrast for text sizes in primary flows. Designers and engineers collaborated to set reasonable exceptions and an escalation path for edge cases.

Operationally, this required integrating color-contrast linters with token builds and ensuring pull requests included visual diffs. The team also created a lightweight appeal process for design exceptions tied to documented business reasons and proposed mitigations.

After six months, the company reports a 72% reduction in post-release contrast issues and faster remediation cycles. Teams caution that strict automation works best when paired with education and easy ways to propose token updates without blocking design iteration.