University of Missouri

Interface

Skip to search and archives

Green Orion woman from Star Trek

Is your site color blind accessible?

Published on by Joshua Nichols | Posts by This Author

Color vision deficiency, or color blindness, is a very common disease that affects about 8% of the population. For the MU home page that equals about 2,000 visitors a day. That’s a significant number of users, so it’s important that we add a color blind test to our regular set of accessibility checks.

Why would you want to do this? Here’s a conversation I had with my color blind co-worker:

Me: “Hey, Paul, did you see the new Star Trek movie? What did you think about the green girl?”

Paul: “She was green? I thought she just had a bad spray-on tan!”

Not being able to tell that the Orion girl was green doesn’t really detract from the movie experience, but if 8% of your users can’t see something important, like blue text links next to black text, you are in trouble.

Since Cynthia Says doesn’t check for color deficiency, this test is often overlooked. There’s no reason not to test since there are a few handy, free tools that make checking your site easy.

Check your site design

Color Oracle
An application that will simulate the different types of color blindness on your computer. I like this option because you can test your design at the Photoshop mock-up stage before you begin to code.

Photoshop CS5
Under the View/Proof Setup menu, you can now simulate a few different types of color blindness on your document.

Colorblind Web Page Filter
A Web-based service where you submit your site URL and it will return a version as it appears to a color blind person. It’s a bit slow, but easy.

More color blind resources

Are Your Web Pages Color Sensitive?
This site has a few good tips on designing your site. One tip I’d add is making sure your embedded links are distinguishable from the rest of the text by using something other than a different color, like underlines.

As Seen By The Color Blind
A good article that explains color blindness and gives plenty of examples.