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

• No Related Post