How to Design for Color Blindness

Ishihara color blindness test (combinations of various colored dots which create hidden numbers)

Color blindness is the decreased ability to see color or to see the differences in color.  1 in every 12 men and 1 in 200 women are affected by color blindness. Does color blindness impact digital resources such as websites and educational materials?  Absolutely!  When designing online materials, consider accessibility best practices - this will make your website or online resource accessible to all users.  How to Design for Color Blindness by UXBlog shares information and examples to consider when designing websites favorable for colorblind users.

  1. Use both colors and symbols
  2. Keep it minimal
  3. Use patterns and textures to show contrast
  4. Be careful with contrasting colors and hues
  5. Avoid bad color combos

Teacher Hint:  When creating materials such as charts and other graphics, be sure to consider the above 5 points.  Following the color blind best practices will help students who are color blind, low vision, and possibly students who have other print disabilities.

Want to learn more about colorblindness?  Colorblind FAQ (scroll down to see the sections on questions and comments from parents).

Free Color Blind Test

There are several free websites and apps that can help identify color blindness; below are a few examples.  These products are for general information and do not provide a qualified medical diagnosis. 

EnCroma color blind test (website with basic color blind tests)

PseudoChromatic Color Test iOS app (free color blind app with explanations)

Chromatic Vision Simulator iOS app (free app that simulates different types of color blindness)

Comments

Posted by Diane BraunerJul 12, 2017

Thanks for sharing the link to CanvasFlip, a color blind sumulator!

Diane