Color Contrast Checker

I built this because I wanted a contrast checker I could use quickly on my phone without fighting a cluttered interface. WebAIM's checker is the industry standard, but I find it visually overwhelming — I wanted something simpler.

The tool checks text and background colour combinations against WCAG AA and AAA requirements and gives a clear pass/fail result. It works offline as an installed PWA, which is how I use it day to day.

The main design challenge was laying out the colour inputs, results, and live preview so that everything remained readable and usable across screen sizes. I went through a few iterations before landing on something I was happy with.

One deliberate decision: the dark mode toggle overrides your system theme rather than following it. A contrast checker that locks you into your system's background colour can interfere with the task — if you're checking colours for a dark interface, you want to see them on a dark background.

Scores a perfect 100 across Performance, Accessibility, Best Practices, and SEO on Lighthouse.