Advice on Digital Design for the Color-blind

Estimates say that about 8% of men and 0.5% of women are born color-blind. These numbers may seem low, but if you have your digital signs in high traffic areas, you need to consider the probability that some in your audience may be color-blind. As such, we thought we’d give you the rundown on color-blindness and some digital design tips to help.

The idea that color-blind people only see grey is a myth. Color-blindness is the reduced ability to distinguish between certain colors, and only a tiny percentage of people are born with monochromatic vision. The most common types of color-blindness are the inability to recognize blue/yellow or red/green, with the latter being more common.

Plan on more than 99% of your audience being able to see colors. With over 16 million colors displayed on each digital sign, though, the trick is to use the right ones in the right way.

We’ve talked about color perception and contrast in a previous digital signage design tips article, and this might be a good time to read it if you already haven’t.

For color-blind viewers – contrast is the most important design element. Contrast, or using different shades of colors, creates separation for someone who can’t perceive the entire color spectrum. Color-blind people can’t perceive as many shades of particular colors as most of us can. If you use two shades of green in your design, one needs to be bright and one needs to be dark. The same goes for using red and green – if they’re both the same shade, color-blind viewers won’t see the difference.

We found this great list of design tips from 99designs.com, and we suggest you read their entire article, because it has more information and terrific visual examples:

  • Avoid the following color combinations, which are especially hard on color-blind people: Green & Red; Green & Brown; Blue & Purple; Green & Blue; Light Green & Yellow; Blue & Grey; Green & Grey; Green & Black
  • Make it monochrome: Using various shades of a single color instead of multiple colors is of course the most surefire way to avoid color-blindness issues.
  • Use high contrast: Color-blind people can still perceive contrast, as well as differences in hue, saturation and brightness. Use these to your advantage. (Hint: many color-blind individuals report being able to better distinguish between bright colors rather than dim ones, which tend to blur into one another.)
  • Use thicker lines: Some mildly color-blind people are able to see a color, but only if there’s a sufficient “mass” of it. If a line of color is too thin, it won’t show up as the right color.
  • Don’t assume colors will signal emotions in and of themselves: If you’re using red to signal “bad,” “warning,” or “watch out,” consider adding another symbolic element to get the point across to color-blind viewers.

Tools:

  • Want to take the color-blind test? https://colormax.org/color-blind-test/
  • If you are not suffering from a color vision deficiency it is very hard to imagine how it looks like to be colorblind. The Color BLIndness Simulator can close this gap for you. Just play around with the sample picture or upload your own images. Please make sure that you just use JPG, GIF or PNG images with a size below 600kB. https://www.color-blindness.com/coblis-color-blindness-simulator/
  • Color Oracle is a free color blindness simulator for Window, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see. https://colororacle.org/