Wednesday, August 13, 2008

10 colour contrast checking tools to improve the accessibility of your design

Colour Contrast / colour blindness: No need to feel paranoid, looks like there are tools out there that check it for you. Follow the link to the article in the heading.

To see a quick run down of what colour blindness or color blindness is go to this link:
http://www.vischeck.com/examples/
Basically to avoid problems in your design use lots of contrast and don't have red / green things on top of each other, or they will disappear, and don't use red/ green to differentiate something. Same goes for oranges, pinks, greens - they will look very similar.
I guessing you avoid problems too by using tints/ shades of a colour, since no matter what color a person is seeing, they can all see tints / shades of the black or white in the colour. Using white to highlight something is therefore always safe because everyone can see white on a darker background, whether that darker colour is meant to be green or red dosnt matter, so long as its dark enough green or red to provide contrast with the white.

I tested Sim Daltonism app (mac os x only) quickly and it was rad, you download the app and then it shows you whatever is on your screen around you curser with different colour blindness settings, so you can see webpages OR photoshop/ illustrator mockups. So you can rollover your links and so on in your browser and see what it looks like to colour blind people at the same time.
http://michelf.com/projects/sim-daltonism/

The one to remember to check is the most common form which they say is
"Deuteranomaly (partial red-green)
Complete or partial inability to see using middle-wavelength sensitive retinal cones making hard to distinguish between colors in the green-yellow-red section of the spectrum. This is the most common form of color blindness."

The only disapointing this is how aweful my designed looked to a colour blind person - the colours were icky! I guess they're used to this. But I'm going to try and check for Deuteranomaly (partial red-green) in new designs since it is the most common, I even know a few people who have it. I want the colours they see not to look like dogs breakfast even if the site is readable / useable.

For extra brownie points you could send screenshots using tools like this to your clients to show them you've tested it. Great to use at the (graphic) design stage aswell, run the tests on your mockups before presenting them so you dont have to change your design later for accessibility.

http://www.456bereastreet.com/ looks like it has much well written info on Accessibility and the like, read more there when time.