For every 100 people that view your website, read a quarterly report, or review your pitch deck, 8 or more may be experiencing the content differently than you’ve anticipated. If your results and messages aren’t being communicated in a way that everyone can understand and absorb, that could have negative consequences for your firm.
What Is Color blindness?
Color blindness or color vision deficiency is the inability to distinguish certain shades of color. The most common type of color blindness is red-green, where people mix up all colors that have red or green as part of the whole color. People with this type of color vision deficiency are often surprised to learn that peanut butter is not green.
Blue-yellow color vision deficiency makes it hard to tell the difference between multiple colors including shades of yellow and blue. Both red-green and blue-yellow deficiencies have multiple sub-types. Finally, there is complete color blindness which is very rare. People with this condition typically see things in black and white or shades of grey only.
While it may seem daunting to select a brand palette with such a broad spectrum of color blindness in mind, good design choices are the place to start. Designing for accessibility doesn’t sacrifice aesthetic integrity of your design. In fact, the design practices that support colorblind users also happen to be good general design practices.
It is best to consult a professional when making major color and design decisions. For everyday use, here are a few simple tips to ensure your content appears as intended for all users:
- Texture: Use texture, as opposed to multiple colors for elements that require emphasis. This is particularly useful for charts and graphs. A contrasting pattern in a bar chart will be easier to perceive than different shades of green. For graphs, consider using a mix of dashed lines and lines with various stroke thicknesses.
- Outlines and Labels: When working with charts and graphs add an outline or spacings around chart elements to distinguish one element from the other. Direct labels in graphs and charts as opposed to legends that rely on color are also helpful.
- Symbols: Avoid using color alone to convey a message. Symbols or other visual cues are also important. For example, an online form that changes text color to red when information is not entered correctly will not be distinguishable for a colorblind user. Instead make sure a symbol such as an “!” is included.
- Color Palette: Selecting an appropriate color palette for your brand is the best way to help people with color vision deficiency navigate your content. Because color blindness affects people in different ways, it is hard to simply identify a list of “safe” colors to use. There are however a few color combinations that can make things more difficult for people with color blindness including: green and red, green and brown, blue and purple and light green and yellow. If your brand palette includes a combination of these colors, ensure that the contrast used in your content is appropriate.
Here is an example of how a brand color palette looks to people with various forms of color blindness. Notice how it works for most types of color blindness but appears significantly different.
For significant color decisions or high-traffic collateral, it is always best to consult your design team for recommendations. Color blindness is one of the many considerations your creative services partners will keep in mind when recommending a brand palette or design choices for brand materials.
To check out the performance ofyour existing images and content or simply learn more, here are tools that canhelp:
- ColorBlind Simulator ( from the Colorblindor website).
- IshiharaColor Blindness Test: One of the two recognized tests for color blindness
- MobileApps: here’s 3 Android and iOS apps specifically developed to help colorblind users.
- Adobe Illustrator tools: Access it under View > Proof Setup >Color-Blindness - Protanopia-type or Deuteranopia-type.