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.
Conversation
Brilliant. Bookmarked for future reference.
Excellent stuff. This is one I'll be sending to the designers I work with.
Excellent work. All bookmarked up... Cheers.
Lovely site too.
great work! little ironic that 'Colour Contrast Check' in the green (8FBF00) isn't compliant with the white BG tho. heheh :)
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! :)
Hi Jonathan,
The tool you designed is really nifty! That's a pretty valuable contribution to a more universal Web.
Thanks a lot!
Jonathon, that is a very nice piece of work. Looks like a tool for almost daily use.
This is great! Now when's the software coming out? Throw in a pixel/hex unit like Pixel or Pixeur and I'm buying!
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.
Excellent tool - would be good if you could also include RGB values as we have publishers who use Word, PowerPoint etc
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.
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.
Dude thats awesome
your site is gorgeous.
Your site rocks my world!!! I wanna code just like you when I grow up!
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!!!
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..)
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.
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
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
correction, this does not work in IE 7.0 at least, works on FF
Great tool!
this is a great tool for designers
just awesome.
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... :)
@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).
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.
@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 :)