Sep 27th 11 Posted by Randy in Web Design

Color Blindness -
Web Design Resources

Models for simulating the severe forms of color blindness are well developed. Not so for the milder and much more common types of colorblindness, the so-called anomalous deficiencies. These are tougher to model because they vary on an individual basis and can actually change over time. This is a far more common condition than any type of complete color blindness. Most of these resources focus on modeling the severe types of color blindness. Nevertheless, they provide a good indication for the less severe types.

Here’s how they work: they model how the human eye perceives color based on the retina’s cone responses. Then, they adjust the model to mimic the modified cone responses of a color blind individual, thus allowing those of us with normal vision to get a better idea of what the world looks like to them.

If you want to get a better idea of what the your color blind web visitors actually see, I recommend looking at at least 50 different side-by-side examples. (I feel another blog post coming on.) Once you start to get an idea of what’s happening here, play with the tools that let you calibrate the degree of various color vision deficiencies. A few are listed below.

Color Blindness Simulator lets you upload an image file and see how it looks to those with any one of the three color blindness disorders.

Color Matrix Library is a free javascript library that can be used to simulate color blindness. There are several other interesting items that may be of interest to designers as well.

Accessibility Color Wheel shows you how text looks under different color blindness models. And, it lets you modify the contrast ratio. How cool is that? Just mouse over the unque color wheel and let the Javascript do it’s thing. I like this page a lot.

Visicheck has several interesting color blindness simulation tools (some online and even an Adobe Photoshop plugin you can download free) and copious amounts of great information.

You ever heard of John Dalton (1766-1844)? A fascinating character. He was a color blind scientist and one of the first men to research color blindness. He thought his color blindness was caused by a discoloration of his ocular fluid. Wrong, John! Perhaps that’s why he’s better known for his pioneering work in the development of modern atomic theory. On 21 October 1803, John Dalton presented the first table of atomic weights at a small gathering of the Manchester Literary and Philosophical society. He proposed that the properties of all materials were determined by the atoms of which they were made. His ideas laid the foundations of modern chemistry and inspired today’s nanotechnologists.

Color Oracle is a downloadable color blindness simulator for Windows, Mac and Linux. Windows and Linux users will need Java 6.

Color Doctor v2.1 from Fujitsu is a free download for Windows XP and Vista that simulates the display content according to grayscale and various color characteristics.

Sim Daltonism v1.0.3 is a free color blindness simulator for Mac OS X. It filters in real-time the area around the mouse pointer and displays the result as seen by a color blind person in a floating palette. It also works if the color blind person is not in a floating palette. What?

ColorSelector v5.1 is free software for judging the legibility of background and text colors. It runs on the Windows® and Mac OS X operating systems.

Web Accessibility Toolbar is provided free by the Accessible Information Solutions (AIS) team of Vision Australia. It runs on Windows XP, comes in several languages and is available for IE and Opera.

Huetility Colorblind Simulator let’s you “see what color blind people see using your iPhone” as they put it. I’m not sure I want other people looking at my iPhone, however.

Contrast Analyser, v2.2 is primarily a tool for checking foreground & background color combinations to determine if they provide good colour visibility. It also contains functionality to create simulations of certain visual conditions such as colour blindness.

W3C Contrast Ratio Guidelines A bit dry, but it informative. BTW, contrast becomes an issue for almost everyone as we age. That’s why older people need more light to see stuff.

ColorSchemer Studio is a software program for creating color schemes (duh) that has many useful features. Use the Color Blindness Simulation to see what your color schemes will look like to users with any one of 8 different types of color deficient vision.

Here’s a good article describing how to design web pages for color blind people.

The Facebook Awarness for Color blindness group can be found here. It isn’t very active, but it is a great way to meet color blind people on whom you can test your page designs.

There’s even a monitor, the Eizo SX2462W that “Simulates two types of red-green color vision deficiency – ptotanopia and deuteranopia – for verification of how color schemes appear to those with color blindness. Simulation is done in real time for still and moving images, making it a practical alternative to software-based tools.” You do have to download some free software from them to make it do that, however.

Also, check out Eizo’s Color Universal Design Handbook. The handbook is about design in general but it contains lots of interesting suggestions that can be adapted to web design. It’s very short and an easy read. I highly recommend it.