It is important to keep people who are color-blind in mind when we design our content. This does not mean we cannot use color.  We just need to provide additional cues to people who are color-blind. 

Poor example
(Uses color only)

Image
User interface that uses red and green colors alone to differentiate between the availability of iphones

This is a poor example because the colors red and green are the only way to communicate iPhone availability. No other visual indicators are available. 

 

Example as color-blind
(monochromacy)

Image
User interface that uses red and green colors alone to differentiate between the availability of iphones except in black and white

This example shows how the use of color alone is not effective for people who are color-blind.

Good alternative option
Using color and other visual cues:

Image
User interface that uses red and green colors plus checkmark and x icons alone to differentiate between the availability of iphones

Using icons with color is very effective for all people.

Prevalence of color-blindness

There are many types of color-blindness.  Most people who are color-blind can see colors, they just see them differently. Check out this resource to see examples.

Color-blindness is a common accessibility issue. Approximately...

  • 1 in 12 males 
  • 1 in 200 females

... have some type of color-blindness.

Deep dive

Web accessibility assessment example of how using color alone to identify required form fields causes problems for people who are color-blind as well as a problem for screen reader users.