Grow your CSS skills. Land your dream job.

Accessibility Basics: Testing Your Page For Color Blindness

Published by Chris Coyier

By some estimates, up to 10% of the male population of the world suffers from some form of color blindness. The most common being Protanopia, or Red-Green color blindness, the inability to distinguish between red and green hues. There is also Blue-Yellow color blindness and Total Color blindness.

Good web designers spend an awful lot of time tinkering and tweaking websites to accommodate users using a huge variety of web browsers and even screen readers. This type of work involves tons of testing, hair-pulling hacks, and sleepless nights, all to accommodate small percentages of viewers here and there. Of course, accessibility is important, so it's worth it. Why not take it a few steps further and make sure that your perfect layout is actually able to be read by those with visual impairments?

Here are some tools, links, and ideas to help you get there:

Jeffrey Zeldman has a good article on the subject of testing designs for color blindness where he metions Sim Daltonism. Sim Dalonism is a lightweight OS X app which opens a little "portal" window which shows you a view of the screen whereever your mouse is of what that area looks like to a person with different user-selectable color blindness afflictions. I've downloaded it and have been playing with it and it's quite a nice little app.

simdalonism1.png

He also mentions the Colorblind Web Page Filter, which allows you to input a URL and pick a type of color blindness and it generates the page how it would look for that type of color blindness. Very useful for seeing your whole page at once.

A lot of what designing for the colorblind comes down to is contrast. Go MediaZine has a good article on good and bad contrast with some examples.

goodbadcontrast.png

If you are using OS X, the Universal Access control panel is something to check out. Not only is it potentially useful for the color blind to boost the contrast throughout the entire operating system, it's tools can be useful for testing as well. There is an option to "use grayscale" which is an easy way to grab a look of your page with total color blindness.

universalaccess.png

If you don't want to mess with your settings, you could always just grab a screenshot of your page (sorry about all the OS X specific stuff, but it's Command-Shift-4 and then the Space Bar to screen shot a window). Then open the screenshot in Preview, go to Adjust Colors, and drag that saturation slider all the way to the left.

saturationdown.png

Perhaps my favorite tool for testing color contrast is the simple Colour Contrast Check by Jonathan Snook. There are two simple sliders for setting the foreground and background colors and a results panel to show you what that would look like as well as if that contrast is compliant, as in, at an acceptable level of contrast.

colorresults.png

Hopefully this has been a useful roundup for ya'll. Let me know if you have any other thoughts on this, I'd love to hear them.

Comments

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".