Design system contrast checker

Our content team needed a simple way to choose brand-approved colours that also meet AA/AAA contrast—inside the CMS, not in Figma. With the EAA deadline looming, manual checks were slow and error-prone. I quickly coded a small colour-contrast tool using AI-assisted prototyping (v0 + Lovable). In ~45 minutes, we had a working checker limited to our design-system palette that validates combinations against AA/AAA, suggests the nearest compliant alternative, and offers one-click copy for HEX/RGB. The tool removes guesswork for non-designers, nudges accessible choices by default, and shows how designers can ship functional helpers fast when interaction truth matters. The full article covers prompts, pitfalls, and next steps (e.g., CMS embedding).