three color blind Ishihara test plates

Designing for Color Blindness

the facebook log in screenHere’s a question fit for trivia night: Facebook’s logo and blue color scheme was specifically selected for a reason. Do you know why?

The answer is: Mark Zuckerberg is red-green color blind. He sees blue the best.

Color blindness affects approximately 1 in 12 men and 1 in 200 women. Potentially, for every 100 website visitors, 8 people could be experiencing your website content in a way you hadn’t anticipated. Now consider your other communications collateral, such as brochures, flyers, annual reports, data visualization, and more. How might people with color blindness experience these documents?

 

This video helps explain color blindness
(Note: there may be an ad before the video)

the opening screen of a youtube video on color blindness

Remember, better design helps all users. Here are some great resources to help you learn more about color blindness and creating better designs which work for everyone: 

Don’t do the design work yourself? Share this information with your design team.

an example of a color key on a graph

Main Points to Keep in Mind:

  1. Use both colors and symbols to convey information. A key is also helpful in providing content.
  2. Keep the color palette minimal. Fewer colors means less confusion.
  3. Be careful with contrasting colors and hues.
  4. Pick color combinations which reduce confusion.

Here are some color combinations which can be difficult for folks with color blindness:

  • These Combinations Present High Difficulty for People with Color Blindness
    • Green and Red
    • Green and Brown
    • Blue and Purple
    • Green and Blue
  • These Combinations Present Medium Difficulty for People with Color Blindness
    • Light Green and Yellow
    • Blue and Gray
    • Green and Gray
    • Green and Black
  • These Combinations Present Low Difficulty for People with Color Blindness 
    • Blue and Yellow
    • Yellow and Violet
    • Dark Blue and Black
  1. Don’t rely on color to convey a message. One example we see a lot is the emphasis of important information using a color that is not optimal for color blindness.
  2. Carefully select contrasting colors and hues (shade of a color). High contrast is desired.