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

Published March 30, 2009 · Updated March 30, 2009
Categorized as Other
Short URL: https://snook.ca/s/936

Conversation

14 Comments · RSS feed
Andy said on March 30, 2009

Thanks Jonathan :)

Damon said on March 30, 2009

Very nice.. Thanks for the update!

Chris Wallace said on March 30, 2009

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

Dave McNally said on March 30, 2009

Definitely an important tool and one I should be using more. The update is appreciated, much better than the windows application alternative :)

Pete said on March 30, 2009

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

Andrew Woods said on March 30, 2009

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.

3stripe said on March 30, 2009

Cheers for the update!

Daria said on April 01, 2009

Thanks a lot for the tool! Very useful

John Foliot said on April 03, 2009

Jonathan - would love to see the sliders "ARIA"ed, but cool tool bud!

Lenen said on April 08, 2009

Thanks for the update Jonathan. I have been using your tool for years and it's one my favourite bookmarks.

Cyprian Gwóźdź said on April 09, 2009

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.

Thomas said on April 09, 2009

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!

Matthias Willerich said on April 18, 2009

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

Jonathan Snook said on April 19, 2009

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