Train-the-Trainer: Adapting for Color Blindness in an Online Environment

If about 10 percent of the male population is color-blind, should that affect how you design your online learning environment? Does the common red-green or less common blue-yellow blindness play a part online also? You bet! How do you accommodate for that?

According to an article by Paul Hoffman entitled "Accommodating Color Blindness" in Usability Interface, here are some tips you can utilize to make sure those with a color-identification deficiency are not at a disadvantage in your classes:

When mixing colors in programs like PhotoShop, don't dilute the colors. Desaturated colors are harder for the color-blind to distinguish. Colors with similar brightness are also harder for the color-blind to distinguish.

When grouping items, don't rely solely on color-coding. Many web addresses are blue, which is the universally recognizable color; however, they also are underlined.

Use colors that have a high-contrast factor so they are easier to tell apart. "A very light green and a very dark red will be easier to distinguish than a red and green that are similar in brightness," Hoffman writes.

A quick approximation of what a color-blind person sees can be done using this test from Hoffman: "take a snapshot of the environment (a 'screen grab') and remove the color so you are looking at it in grayscale.

In Photoshop, select the Adjust menu and then Desaturate. In PaintShop Pro, select Colors and then Grey Scale. The result does not represent what a color-blind person sees, but does give you a chance to see how much brightness contrast there is in the screen shot."

For contrast, Hoffman suggests selecting light colors from orange, yellow, green or blue-green and selecting dark colors from blue, violet, purple and red; he also warns against colors that have similar hues, saturation or brightness. 

Incidentally, less than 1 percent of women are color-blind.

   A few of the references used by Hoffman that might also be useful to you:

  • Computer Generated Color by Richard Jackson, Lindsay MacDonald and Ken Freeman
  • Color Contrast and Partial Sight. This site has some useful visuals to better explain hues, saturation and brightness as well as some additional tips on good design, especially for those with vision loss. 

Never miss a post! Get blogs and more delivered directly to your inbox.

arrow-right Sign Up