Colour (Color) Contrast Check

I had put together a JavaScript-based colour contrast checker a while back but I thought I'd revisit the code and hopefully improve on it. And that I have. Check out the Colour Contrast Checker.

I've improved it by adding some nice HTML sliders and revising the interface. I had also noticed a small bug in detecting my thresholds which has now (hopefully) been fixed.

For those not familiar, what the Colour Contrast Checker does is check two colours for, um, contrast. There's actually a formula that compares the difference in the colour and brightness.

It's important to have sufficient contrast to the colours on your page. Not only for people with colour deficiencies but also for people who are viewing it on screens that may not have great contrast, such as older CRTs or LCDs.

Lastly, this tool shouldn't be taken as gospel ("hey, look at me, I'm one of the disciples!") but rather should help guide you towards better colour choices. In the end, nothing beats actual user testing.

Published January 11, 2005 · Updated September 17, 2005
Categorized as Usability
Short URL: http://snook.ca/s/312

Conversation

27 Comments · RSS feed
Agustin said on January 11, 2005

Brilliant. Bookmarked for future reference.

Roger Johansson said on January 12, 2005

Excellent stuff. This is one I'll be sending to the designers I work with.

Andrew Hume said on January 12, 2005

Excellent work. All bookmarked up... Cheers.

Lovely site too.

r00ts said on January 12, 2005

great work! little ironic that 'Colour Contrast Check' in the green (8FBF00) isn't compliant with the white BG tho. heheh :)

Jonathan Snook said on January 12, 2005

r00ts: oh, so true. I actually darkened it a smidge from the original colour (99CC00) to make it a little more readable. I didn't want to get too far away from the green in the logo. Anyways, I'll just hope everybody else overlooks that little detail! :)

Fran?ois Palaci said on January 13, 2005

Hi Jonathan,

The tool you designed is really nifty! That's a pretty valuable contribution to a more universal Web.

Thanks a lot!

Malarkey said on January 13, 2005

Jonathon, that is a very nice piece of work. Looks like a tool for almost daily use.

Zaine Ridling said on January 14, 2005

This is great! Now when's the software coming out? Throw in a pixel/hex unit like Pixel or Pixeur and I'm buying!

Jonathan Snook said on January 19, 2005

Jehiah: Neat stuff! My only recommendation is that it wasn't instantly clear what to do once I had added foreground and background colours to the editor. I didn't know to then click on the colours in the left and right columns to compare.

You may also want to check out Juicy Studio who has a stylesheet checker.

Clifford Sheppard said on January 20, 2005

Excellent tool - would be good if you could also include RGB values as we have publishers who use Word, PowerPoint etc

Sebastian Redl said on May 24, 2005

You say this thing is also for color deficits. Yet it calls "pure red on pure green" "sort of" compliant, when this is a big NO for everyone with the most common color deficit, red-green colorblindness.

Jonathan Snook said on May 24, 2005

The checking is based on a formula from the W3C and uses a weighted calculation for each colour to determine whether it provides enough contrast. Contrast is a reasonable test for a number of colour-deficit scenarios but in the end, and like I mention in the article, user testing is by far the best.

My guess is that it would be extremely difficult to accomodate all colour deficiencies and still provide an aesthetic design to the average user.

Nick said on May 30, 2005

Dude thats awesome

hotcurls said on June 07, 2005

your site is gorgeous.

me said on September 07, 2005

Your site rocks my world!!! I wanna code just like you when I grow up!

nano said on December 16, 2005

is it possible that there is a problem in the coding of this blog?

I can only see the first paragraph when i select it (from the green title "Colour (color)..." to "nothing beats actual user testing.")

nice job!!!

Rune Bjerke said on March 06, 2006

Handy utility!

It would be really neat if you added a feature so that you can link to the page with 2 colors as url parameters and get those as the default colors displayed, e.g.

http://www.snook.ca/technical/colour_contrast/colour.html?fg=FFFFFF&bg=FFFFFF

Would be fine in proving to people that their color choices are wack :)

(Should be easy by inspecing the location object in JS and extracting things..)

mjwillis said on April 22, 2006

I love this tool and use it almost everyday. Thank you very much.

If you ever plan on modifying or updating it, I'd suggest creating a "link sliders" function, so the same levels of red, green, and blue can be maintained while trying to find sufficient contrast.

John said on December 11, 2006

WOW, the contrast checker is wonderful. I have bookmarked the page. It will so easy to pick up colors for the web pages now.
Thanks

MC said on February 04, 2007

hmm tryed to paste 'FFFFDE' value in/ENTER , and expected that sliders would move acordingly and calculations would changed. Did not.

This feature would be a must.

Otherwise, the greates peace of contrast calculator I could find

Regards

MC said on February 08, 2007

correction, this does not work in IE 7.0 at least, works on FF

Bob said on June 24, 2007

Great tool!

sangesh said on September 14, 2007

this is a great tool for designers

just awesome.

Malcolm said on October 22, 2008

It's a great tool for sure to help those with poor vision read text better.

However, what's the point in worrying about contrasting colours if your site doesn't allow those with poor vision to resize their text using the browsers default settings?

Hmmm... :)

Jonathan Snook said on October 22, 2008

@Malcolm: The current version of all major browsers have mechanisms for increasing the size of elements (either via page zoom or text resizing). The percentage of people still using IE6, using a site with a reasonable font size to begin with, and that still require text to be resized larger is—speculatively, of course—quite small.

If you're in an organization that still uses IE6, you could always lodge a request requiring Firefox or IE7 be installed for accessibility reasons. Many organizations cater to those with accessibility needs (such as wheelchair access, keyboards and trackballs to minimize RSI, etc).

Sean Phelan said on November 05, 2008

Excellent tool. Can I confirm whether you consider this tool valid for all contrast checking or specifically text. The reason I ask is we are trying to work out whether these rules apply to graphs as well.

Malcom said on November 18, 2008

@Jonathan : I know browsers have mechanisms that resize the text. I was mentioning it because this website doesn't allow the text to be resized in any browser. "Zoom" was created as a cheat by browsers to get around the fact that most sites don't work properly. It also means that by forcing people to zoom you also create a horizontal scrollbar for them. Have you tried browsing your site at the popular resolution of 1024x764 at 120% zoom?

"Quite small" is still more than nobody and still a minority to discriminate against.

Anyway, the reason I mentioned the font size was because... well... if you're going to be that worried about contrasting colours then you may aswell be equally worried about those small number of people you can't view the site :)))

If you're not, you can just use them same excuse for not doing it...
e.g.

"The percentage of people with major colour blindness is quite small. If you're in an organization you can always lodge a request to have a browser that allows for stylesheet overriding. This way, you can view ALL sites on the internet using the colour scheme you prefer and not just the ones who predicted what your type of colour blindness is".

But yes, your site is very pretty and well thought out graphically.
Well done :)

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