Colour Contrast Check

Based on a tool that I use fairly often from HP, I wanted to make something that was easier for myself to use. Plus, it improves on some bugs that exist in the HP version. My Colour Contrast Check Tool.

Published February 13, 2004 · Updated September 17, 2005
Categorized as Usability
Short URL: https://snook.ca/s/144

Conversation

12 Comments · RSS feed
Kamil said on October 28, 2006

Very, very nice tool. I will sure use that.
Thanks!

Ewout Winkelman said on April 02, 2007

Nice post AND tool!
Used it for some projects lately.

On my blog I made a post about Contrast Checks, including a link to your tool. Hope you don't mind ;-)

http://mysticearth.wordpress.com/2007/03/28/contrastcheck-voor-je-websites/ (dutch)

bill said on May 01, 2007

dude, the link to the downloadable color contrast analyser doesn't work, found a working link:
http://www.visionaustralia.org.au/info.aspx?page=628

see ya

Michael said on May 07, 2007

That's really a useful tool.
But there are possibly lots of other tools for picking colors for the design of a webpage. Does anybody know if there is a list of colorpicker tools around the net somewhere? Or which tool do you normally use when design a new site or is it just looking around the net and copy color combinations of other sites?

Jonathan Snook said on May 08, 2007

@Michael: the tool isn't really meant to pick colours but rather to ensure that the colours you have picked have enough contrast. For choosing colours, I use Kuler.

Kaleem said on July 22, 2007

Search brought me to this great tool but it would have been better to have a bigger output area.

But Very Good tol and work.
Thank You

Alexander Kasper said on August 26, 2007

Hello Jonathan,

Thank you very much for your tool.
It helps to design, or better said, check the design and accessibility a lot!

Tad Chef said on September 07, 2007

In fact it's a a neat little helper. I revied the tool at SU:
http://onreact-com.stumbleupon.com/review/12424642/

David Hopkins said on October 30, 2007

This is not only a useful tool for accessible web developers, but also for SEOs. If the text is easier to read more people will read it.

Chase Martin said on November 14, 2007

Great tool!
I've been using the Universal Access control panel on my mac book pro to check color contrast visually (by viewing in grey scale). But it is nice to have a tool for that.

Your tool inspired an idea... wouldn't a code-sense-like tool to check color contrast be useful? I don't use IDEs but anything to help Dreamweavers et al NOT snub the ADA would be useful.

OR... a firefox extension... I think scripting the comparison of the top textural elements on a page with their respective background-colors shouldn't be TOO difficult...

Let me know if the idea interests you. Thanks again.

Sam Logon said on November 21, 2008

Excellent tool, thanks a lot.
I have used it on a lot of my recent projects!
Sometime developers underestimate the importance of contrast between colors, to me it has always been a fundamental accessibility know how. If people can't read you text, what is your site good for?

Lening said on December 10, 2008

This is a great tool for checking colour combinations to determine if they provide good colour visibility. Definitely one of my favourites I have found so far. Thanks, Lening.

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.