Why does this exist?

Two reasons. Firstly, this is the tool that I, Matt D. Smith mds, have always wanted ever since I learned about color contrast accessibility and started testing color ratios as part of my design process.

Secondly, Sam Soffes soffes was in town at my studio for a few days in Athens and we decided, rather impulsively, to build a little app together. It seemed simple enough, and it's hard to beat the dopamine rush that comes from a new idea getting immediately executed.

We designed and built the whole thing—icon, app UI, the actual app, the website, etc. in roughly a week or so.

Ok, maybe there's a third reason that's not so self-absorbed.

There are a lot of designs with really light text with not enough contrast. A lot of my early designs were like this too. You get into the habit of critiquing your own design as if it's going to be framed as a composition and forget that people actually have to read the text.

Early on I never really knew how light was too light, but now I know. And you can know too. This is literally the exact thing you need to use to measure the color contrast in your designs.

If you've got some questions about color contrast and the whole WCAG guideline thing is new to you, head over to the Support page where we'll attempt to answer your questions.


Special Thanks

Brent Jackson's Colorable Demo has been my long time favorite color contrast checker on the web. His demo was always the inspiration for making a little menu bar app. I even asked him about it over a year ago...

Download on the Mac App Store