Colour Contrast Check Tool Updated
Over five years ago, I put together a really simple tool that let you specify a foreground colour and a background colour. The tool would spit out whether it met the W3C guidelines for acceptable levels of contrast as part of AERT. A year later, I added convenient sliders for adjusting the red, green and blue (RGB) values.
I decided to take a moment to update the tool with a couple new features.
WCAG 2.0
The first of these is having the tool be able to calculate the contrast ratio as defined within WCAG 2.0. The guidelines appear to be less strict than what was defined previously. Smartly, it differentiates between smaller and larger text and the CCC Tool will display the passing grade for either text size.
HSV
The second thing I added were HSV sliders. HSV stands for Hue, Saturation and Value. If you're looking to pick out some safe colours for your design, this will make it easier to adjust the values across different axes to get the colour you want.
Bugs?
As a result of adding the additional sliders, much of the code got rewritten to avoid infiinite loops where slider values changed other slider values and callback would call callback. The code isn't idyllic but I tried to avoid rewriting the whole thing from scratch. Of course, it's quite likely I introduced a bug somewhere along the way. If you run into anything, let me know.
Check out the new Colour Contrast Check tool
Conversation
Thanks Jonathan :)
Very nice.. Thanks for the update!
That's a nice tool. I've seen a couple of those around and it is something people rarely remember to check while they design. I particularly enjoyed "Colors compliant: sort of..."
Definitely an important tool and one I should be using more. The update is appreciated, much better than the windows application alternative :)
Thanks for sharing this great tool. I will definitely add it to my bag of tricks. This will come in handy when I need to generate a color palette.
Maybe I should spend some time and read the W3C specs, I might find some goodies in there.....
Good job. It makes comparing colors easy, and promotes accessibility for the ultimate end user - a great find. I'd like to see 2 features added.
1. A palette of known valid color combos. Click a combo, and it populates the tool so we can see the values.
2. To see a visual indicator (a green check, yellow triangle, or red X) next to the values in the Results as they get updated.
Cheers for the update!
Thanks a lot for the tool! Very useful
Jonathan - would love to see the sliders "ARIA"ed, but cool tool bud!
Thanks for the update Jonathan. I have been using your tool for years and it's one my favourite bookmarks.
Hi,
This tool one of the first I was using for searching best colors as web designer.
I use it till now.
Thanks for your job.
Cool tool, tried it and it works great. To be honest I never knew there were any guidelines for this.
Put it in my favorites!
Years ago I wrote a best practise paper regarding color contrast (and luminosity and whatnot) for a freelance job, and built an excel tool for them based on your tool.
The idea was that instead of only comparing 2 colors, you could set up a matrix of foreground and background colors, and excel would tell you which combinations would pass.
It's great to see you've updated it, so I can wonder again if maybe one day I'll find the time to set this up as a web tool...
@Matthias Willerich: I've had a number of people request a "best of" list but I've always felt that a design would normally be fairly set and that people are more apt to take two values that they want to use and want to adjust across a particular spectrum to get something closer to what they want. For example, if they have a green selected, they may just want a lighter shade of green that maintains a similar RGB space. But I don't actually know how people use it so I'm just theorizing at this point.