Ten Years in Contrast

Ten years ago today I wrote a colour contrast checker. I put together this tool because, at the time, I needed to check the contrast between two values and the tool I used to use was buggy and then stopped working.

The code I put together was extremely hacky—a combination of 3rd-party scripts and ill-architected JavaScript. I just needed something that worked.

In the beginning, you could set RGB values or a hex value and it’d tell you if it passed, didn’t pass, or sort of passed. Since then WCAG introduced different guidelines and I updated it to show whether it definitively passed each of those checks.

Eventually, I added HSV sliders, as well. Once you get a colour you like, you usually just want to tweak the lightness of it to get it to where you want.

I’ve had some requests over the years to be able to pass in foreground and background colours via the URL. I added it in maybe 3 years ago but a subsequent server crash (and a poor backup strategy) meant that I lost that version and never fixed it.

So today I jumped in and decided to add that code…

Sliders!

Over the past ten years, browsers have gotten better. After checking caniuse.com, I decided to scrap the custom JavaScript-based sliders and just use the range input type. Go go HTML5!

After stripping out unnecessary JavaScript and CSS, most of the code for changing RGB to Hex to HSV remained intact. That was a good sign.

The bonus about using range inputs is that the contrast checker now works on mobile devices, too. (Well, any device that supports range inputs.)

Bookmarking colours

The previous iteration of being able to pass in colours was only one way. You could send someone a URL but it didn’t update the URL if you made any changes.

I was able to use window.location.hash to update the URL whenever the foreground or background colours changed.

10

After making the changes, I went to update the modified date and suddenly realized that it had been 10 years—to the day! That caught me by surprise. In that time, the page has been viewed more than 1,000,000 times since I started tracking with Google Analytics back in 2007.

I’m glad it has been useful to so many people for so many years. Here’s to the next 10!

Try it out now.