Designing for the color blind
Color blindness affects 7 to 10 percent of the male population. It is a large enough demographic that you should be spending some some time making sure that your designs are still usable by those affected.
The most common types of color blindness are protanopia (can’t see red) and deuteranopia (can’t see green). About one third of the color-blind are completely blind to red or green. The rest generally have a milder form of color blindness.
What can you do to improve your designs? Here are a few basic things:
Pay attention to your link color
Blue is the safest color. If you make your link color red or green, or even just tint it, you need to underline it as well or people may not realize it is a link. Take a look at this screenshot from CrunchBase. It is not clear at all that you can click on the names of people.
Invision’s primary calls to action, normally pink, fall completely flat and fade into the background. The signup button in the top right corner is practically invisible.
Google, on the other hand, is largely unaffected. The primary link color stays the same, and the url in green underneath turns gray and matches the link to its right.
Don’t depend on red and green to indicate status or error state
Red and green may as well be the same color, so don’t depend on either. Look at the Devices tab in Google Chrome. Which port is forwarding correctly and which is failing?
If you want to use red and green make sure to combine them with a label or icon so color is not the only indication of what is going on.
Be careful when using color legends
Frequently chart legends depend on the user matching the color of a bar or line with a color swatch next to a label. Colors like purple and blue will become eerily similar when viewed by a color-blind person.
Unsure? Simulate color-blindiness in Photoshop
Photoshop provides a built in way to preview what designs look like to somebody with protanopia or deuteranopia. Simply turn on proof colors with ⌘Y and go to View > Proof Setup and select the color blindness type you want to simulate.