Approximately 8% of North American males are deuteranopic: red-green colour blind. That means that they cannot tell the difference between the two hues, or will see them substituted for each other. Conditions of tritanopia (shown above) are far rarer, but still present in every population.

The condition of color blindness can’t be changed by the site designer, but it can be anticipated, and problems avoided, by applying a single simple rule and a few tools.

For designers, compensating for the most common form of color blindness means adhering to the simple rule “red and green should not be seen (together)”. This doesn’t mean that red and green can’t be used in a design, just that they should not appear in the same place: traffic lights are a real-world example of this principle.

This boils down to two best practices:

• Don’t swap UI elements from red to green to show a change in status
• Don’t overlap red and green elements that you intend to be seen as distinct.

There are other, more severe forms of color blindness, but they are very rare, and any designer who at least keeps deuteranopy in mind will tend to develop a site that can be used by everyone, regardless what form of color blindness they may have.

With these conditions in mind, creation of your site should proceed as normal, but with the use of tools to preview how the pages will look to the color blind. A selection:

• Vischeck is the classic go-to, with free plugins and simulators to preview how your site and images will appear to the color blind.
• Color Oracle, a free tool for Mac, Linux and Windows that can flip your display into simulations of color blindness independent of any application.
• Sim Daltonism (OS X only) allows color blindness simulation by area, rather than an entire screen.
• If you’re designing in the browser, extensions like Spectrum and See allow you to see the effects of color blindness in Chrome.
• colorfilter, Etre's simulator and coblis offer further utilities.
• lowvision offers not only an in-browser closer blindness simulation of your site, but also the effects of other visual deficits, such as cataracts.

As a general rule, don’t try to use colors specifically to appeal to the color blind: doing so will almost inevitably make the palette appear “odd” to everyone else. Rather, make sites that allow everyone to use the web as equally as possible.

Photo by Colin Logan, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.