Snook.ca

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.

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.

@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.

Sorry, comments are closed for this post. If you have any further questions or
comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested? Get in touch.