Back to my work

Colour Contrast Checker

An accessibility tool for checking multiple colour's contrast against WCAG.

My Role.

UX Designer, Front-end Developer.

I designed and developed a tool to make checking multiple colour combinations faster and more visual for designers. I led the UX, created the UI design, and collaborated on the front-end build using Tailwind and accessibility testing tools to ensure the results were reliable and easy to understand.

Collaborators.

What I did.

  • Led UX design and interface layout
  • Designed and prototyped the tool’s functionality
  • Collaborated on front-end development using Tailwind
  • Performed accessibility testing to meet WCAG standards
  • Helped bring the beta version to launch in May 2024

Tools.

  • Figma
  • Tailwind CSS
  • WebAIM WAVE
  • Axe DevTools

Check it out:

Visit Contrast Checker

About this project.

The idea for this has been in my head for at least a couple of years. I often use online colour contrast tools to check whether the colours in my design are easily readable. However the problem I found was not being able to check multiple colours at once, which made it a bit of a time consuming feat when your project has dozens of colours. I was making manual checksheets in Figma to display to clients which combinations would work.

I had put together a design for what I wanted the contrast checker to look like, and then I got talking to Zoe Aubert at one of my Freelancer meetups and showed her my designs. Turns out she had been working on something that used the same logic. Within a couple of weeks we had a working beta, which we’ve now shared with you. We launched in May 2024.

The site is built using React and Tailwind for a super fast experience. So without further ado, take a look at our Contrast Checker!

Project Showcase.

Showing the export options for Hex, RGB and HSL