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.
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…
The bonus about using range inputs is that the contrast checker now works on mobile devices, too. (Well, any device that supports range inputs.)
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.
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!