Posted by Cliff on February 19, 2010 at 3:00am
At last night's Austin Drupal meetup, I promised to post the links to the tools I demonstrated for testing color schemes for sufficient contrast. I plan to share more about these in the Accessibility portion of Drupal documentation, but for now, here are the places to find the tools:
- Contrast-A can be used on their website or, if you can find the link (have they taken it down?), downloaded as an application for your Mac. It's great for finding out if a color pair you have chosen has enough contrast to function as foreground and background. If not, then you can use this tool to hold one color constant and adjust the other until you find a shade that does have sufficient contrast.
- The Paciello Group also has a Color Contrast Analyzer that produces similar results. The Mac version has a snazzier look and feel, but the Windows version has a feature the Mac version doesn't: You can select any open window on your desktop and see what it looks like to people with any type of colorblindness. But both versions are outstanding.
- Why is contrast important? This is all based on the Web Content Accessibility Guidelines version 2.0 (WCAG 2.0), an initiative of the Worldwide Web Consortium (W3C) to ensure that everyone, regardless of disability, has comparable access to the Web and can derive a comparable experience from what it offers. Even cynics should appreciate this initiative — after all, it's what lets Google find your content and, to some extent, lets mobile phones get to your pages.
- And you can find more tools to help you assess the accessibility of your websites, including the neat toolbars I was showing off, in Sean Aune's review of 12 accessibility tools in his blog at sitepoint.com.
And if the question is choosing good sets of colors, I'm the wrong person to ask, but I'm learning. One of the resources that is at least getting me into a reasonable ballpark is Steven Bradley's recent explanation of Color Theory, the Color Wheel and Color Schemes. I'll round this out into a 30-minute presentation eventually, but, in the meantime, there you go!
Comments
Permanent documentation?
Thanks for those links, Cliff! I think we should strive for a more permanent place of such important information in the Drupal documentation than only this groups's forum. What do others think?
Cheers,
Frank
Frank
My LinkedIn profile
That's the plan
Frank, this was just a quick post to make the links available to folks who had requested them after I did a 10-minute runthrough of these tools at our meetup. If someone wants to run with copying this to a more permanent location, go for it. I've been meaning to add this in a couple of different places for quite a while and never got anything complete. I'd be happy to contribute more information in a more central location later, but for now this is all I can do.
Thanks for the interest!
Thanks a ton!
Cliff,
Thanks a lot for posting this information up so quickly. I personally appreciate you spending the time to demo this stuff for us and provide all the documentation - especially since color contrast is something I am still extremely poor at eyeballing and can use all the help I can get.
Another aspect
Another aspect to consider is using accessibility guidelines for colorblind design. I've found that the design result ends up meeting my contrast and color goals as well as incorporating secondary and tertiary interface queues, all of which improve overall accessibility.
There's a nifty application, at least for Mac, called Sim Daltonism (link) that emulates how the design looks. On a base level its fun to play with, but also helps identify contrast issues.