Color blindness itself obviously can’t be changed by the site designer, but it can be anticipated, and problems avoided, by applying a single simple rule and one tool.

Approximately 7% of North American males are deuteranopic: red-green colour blind. That means that they cannot tell the difference between the two hues: to give you some idea, the banner above shows an image as seen by those with normal vision, and the same image to the right for the deuteranopic.

For designers, compensating for color blindness means adhering to the simple rule “red and green should not be seen (together)”. Red and green can certainly be used in a design, but just as in traffic lights, they should not appear in the same place. Don’t swap a button from red to green to show a change in status, and 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 this rule at hand, creation of your site should proceed as normal, but with the use of tools during the design phase to preview how the pages will look to the color blind. Vischeck is the classic go-to in this regard, with free plugins and simulators to preview how your site and images will appear to the color blind, but there is also colorfilter and coblis (part of the Colblindor site, which contains many more resources on color blindness, as does the WebAIM site). Also notable: Color Oracle, a free Java-based tool for Mac, Linux and Windows that can flip your display into simulations of color blindness independent of any application or device.

Unless you are making a specialized site like Colblindor, don’t try to change the colours you use to make them more aesthetically pleasing for the color blind: doing so will almost inevitably make the palette appear “odd” to everyone else. Rather, follow the process I have emphasized throughout this blog in regards to accessibility: make valid, appealing pages with features that allow everyone to use your site as equally as possible.