Back in college I won a game of X-bugs against a friend. I was pretty proud of myself, until he revealed to me that he has colorblindness. My “team” was green and his “team” was red and the mats we were playing on were green as well. He couldn’t (or barely could) see our pieces! Besides being embarrassed for feeling pleased with myself, this moment reminded me just how important it is to take into account a wide audience; whether with a game, a comic, or a website.
One in 12 people in the world have some sort of color deficiency. The most common type is a problem with green color receptors, which reduces the ability to distinguish green from red and mutes other shades. Other types reduce the ability to perceive red and blue, up to a rare form that reduces colors to shades of gray. Website designs can help address accessibility for colorblind people by paying close attention to color contrast and well-labeled content.
Color Contrast
Color deficiency accessibility can be improved by paying attention to color contrast. Combining red and green in particular is problematic, but other colors become indiscernible when desaturated. Black and white naturally offer the most contrast, but you probably will want to play with other color combination as well. Consider making the most important parts of your site have the greatest amount of contrast possible. Then, even if minor aspects of the design are not visible to a colorblind person they can still use the site.
Well-Labeled Content
Clearly labeling content, especially buttons and links, makes your website more accessible for all your users, but for colorblind visitors it takes on extra importance. Clear labels and alt text can help you overcome potentially problematic color combinations and improve navigation. Of course it cannot overcome a really severe contrast problem, such as text that does not stand out sufficiently against the background.
Naturally if you are not colorblind yourself, you’ll want a way to test your website. The best option would be to get a friend or family member with a color deficiency to take a look at your site and walk through each part with them; noting what they can or cannot see. (This is a good chance to make sure your site is accessible in general too.) Lacking that option, there are a handful of tools online you can use to get an impression of what a colorblind person might see.
- iamcal.com Color Vision Palette: Allows you to simulate different types of colorblindness and compare the contrast of text on a colored background.
- Vischeck: Can test your image files and (sort of) your website for accessiblity.
- Colorblind Web Page Filter: Can test your website by putting in your URL. It ignores most images.
Check your Comic Too
If your webcomic is in color, you should check the saturation to insure that your characters are still distinguishable. Even if you’re not concerned about making your comic more accessible, desaturating your comic will help you know what the comic would look like if you ever choose to publish it in greyscale.
Photo is (cc) kaleid. Used under Creative Commons-Attribution via Flickr.
I’ve recently embarked on a 
