Designing for all users — why you should care about color-blindness

13 min readApr 7, 2017

In evaluating a dashboard tool for accessibility, I created this blog to help others at my company, Axway, understand how common color-blindness is, the different types of color-blindness, what the limitations are, how that impacts design and color palettes, and why that is important for businesses.

Why Should Businesses Care?

Well, WCAG 2.0, of course…
Government clients require accessible products, including color-blind friendly themes, styles, and displays
About 10% of the population is color-blind
But also…businesses may be missing out on about 5% of their target market because they are not aware of the effects of color blindness

How Common is Color-Blindness?

The most common, Deuteranopia and Protonopia (known collectively as red or green-blindness or weakness, although there are differences as will be detailed) is very common, affecting 1 of 12 Caucasian males (8%), 1 in 20 Asian males (5%), and 1 in 25 African males (4%), and 0.5% of women. In Britain, there are 2.7 million (4.5%). The rarer type, Tritanopia, or blue-blindness affects 0.03% (1 of ~10,000 people), while the most rare type, monochromacy, affects just 0.003%.

Color-blindness is everywhere! Note that data is not available for all places — that doesn’t mean there’s no color-blindness there! (http://www.targetmap.com/viewer.aspx?reportId=5161)

So Who All Is Color-Blind?

Mark Zuckerberg — That’s why Facebook is blue :)
Mark Twain (red and green color-blind). This is my all-time favorite author :).
Bill Clinton (US President)
Bing Crosby (singer)
Christopher Nolen (Batman producer)
Emerson Moser (blue-green color-blind, but molded Crayola crayons)
Howie Mandel (voice of Gizmo in The Gremlins :) )
John Dalton (pioneer of atomic and color-blind studies — this is how the name Daltonism became a common term for color-blindness)

Color-Blind Spectrums

Facts About Color-Blindness

Can distinguish brightness and saturation, but not hues. Blended and muted colors are difficult, but pure, strong colors are not. Thus, some reds and greens are distinguishable, depending on brightness and saturation of colors.
Red- and green color-blindness are both a genetic, sex-linked trait (carried on the X chromosome). More common in men than women since women have another X chromosome to compensate.
Strongly color-blind people might only be able to distinguish 20 different hues, while normal color vision is over 100

There technically isn’t a red-green color-blindness. Protanopia is red-blindness, while Deuteranopia is green-blindness. However, the whole color spectrum is affected by color vision deficiency.

Both protans and deutans have the same problem colors: red, orange, yellow, green, and brown. Confusion lines are yellow — spring green, orange — grass green, apple red — leaf-green, dark-green — brown, blue-green — gray — purple, dark blue — violet, and pink-blue.

Deuteranopia: Green-Blindness

1%
Genetic
Deuteranomaly is a milder & most common form of color-blindness: 5%

Traffic lights are particularly confusing!

Protonopia: Red-Blindness

1%
Difficult to distinguish
blue and green
red and green — traffic lights very difficult
Red is much darker
Studies show that protans have more road accidents.
Protanomaly is a milder form (can distinguish some reds and greens, but not as easily): 1.3%

Tritanopia: Blue-Yellow Blindness

About 0.03% (stats vary) or 1 in 10,000 people
Can be genetic, but also caused by severe head injuries
Since not on X chromosome, equal number of men and women have it
Mild tritanopia can be caused by aging
Confuses blues and green
Yellows seem like lighter shades of red
Fewer problems performing everyday tasks that those with red-green dichromacy.

Monochromacy or achromacy

Extremely small minority
Monochromatics can only see difference between light and dark
The only true “color-blind” — Achromatics see only black, white, shades of gray. Have poor visual acuity and aversion to bright light.

How Color-Blindness Affects Daily Life

Traffic lights are not the biggest issue! That’s because the colors are well-chosen and always arranged in a certain order.
Can’t tell if skin is sunburned
Can’t tell if meat is cooked
Can’t tell difference between vacant (green) and occupied (red)
Can’t tell if fruits or vegetables are ripe
Can’t always see fruits or flowers in foliage
Creating websites with good color balances
Pairing clothes for outfits
Colored maps and graphics can be a major source of frustration

Jobs Usually Closed to Color-Blind for Safety

Pilots — must recognize color-coded instruments, maps, landing strip approach lights
Air traffic controllers — colors represent different altitudes on radar screens
TSA officers — colors are crucial to explosive wires and X-ray screens
Law enforcement officers — identifications often rely on color of suspects’ clothes, cars, hair

How Most People Process Color

In a combination of bright and dark colors, bright colors will grab the user’s attention. If two colors appear similar, reader will perceive them as being related.

Okay, But What About Applications?

Poorly chosen colors affect speed of comprehension. In gaming, it’s difficult for gamers to tell a friend from a foe (Call of Duty). Although there is a symbol, color-blind gamers take a few more seconds to process it, often accidentally shooting allies. Using blue for friends would have been a better choice, since color-blind users can see many shades of blue.

Where is the hero in this display? Because Hyrule Warrior used blue instead of green for the good guys’ energy and good guy forces, it’s easy to tell for even color-blind users.

How This Impacts Analytics and Information Visualization

For gauges indicating error states, make sure that you use bright colors for red and green. Even consider blue for a success state, as red and green will show up as shades of brown for color-blind users, and will be processed less quickly. Make sure the positioning of the colors matches your users’ expectations. For example, red is usually on the right of the gauge (think car engines getting into the red), so it is a common mental model users have.
Make sure that the color hues you choose are not too close to one another, such as blue and purple and yellow and orange, which are very similar for red and green color-blind users.
Make the legend large enough to easily read and place it close to the chart.
Consider using colored backgrounds with patterns or symbols and always convey the information in a textual way as well. This will also ensure accessibility for your low- or no-vision screen reader users (here are some of my tips on that).
Use arrows to indicate something moving up, down, and a dash or just blank for no change.
Mark line graphs with numbers, especially where line intersects with others or splits
Mark pie charts with numbers and patterns
Use thick lines — makes it easier to interpret the color
Vary the intensity of colors

Color-Blind Accessible Maps

Maps are just another form of information visualization, so most of the bulleted items above also apply to maps.

Use stylized maps if possible, rather than a lot of geographical information
Use white frames around the lines — reduces confusion where colored sections intersect

Below, a color-blind user created a pattern concept for the London Underground, showing how this would make the map more readable and immediately comprehensible for all users.

Avoid colors of confusion with data

Annotating with no patterns is not as helpful as combining with patterns. The numbers in neon colors are very small and close to each other on the color wheel, making it even more difficult for all users.

Best practices for map points and lines

The best way to make a map point visible is to vary its shape, while the second best is to vary its hue:

For map lines, vary the pattern and hue for best results. Use patterns for second-best. Third best is just shifting hue, and fourth best is annotating.

What Can Color-Blind People Not See?

Test yourself on these Ishihara plates!

Recommendations

Simplify design. Annotate, label, use patterns to convey information instead of just color.
Do not use the combination of red and green. Replace red with magenta, vermillion (#FF2000), or light red (#FF1414).
Convey information using more than just color. Use patterns, shapes (solid and dotted lines, different symbols, various hatching, etc.)
Where colors merge into one another, use spectral color schemes: red, orange, yellow, green, blue, purple. Easier to read and interpret.
Vary lightness on red-orange-yellow end of rainbow
Do not use yellow-green (will be confused with orange)
Provide tooltips or labels that are ideally displayed in close proximity to the corresponding sections (pie/donut)
Allow user to customize own color schemes. Should be able to set by # (hex) or RGB values
When combining colors (as in a chart or even icon), use warm and cool colors alternately. If using multiple warm or cool colors together, make sure they have distinct differences in brightness and saturation.
Red does not appear as a bright and vivid color. Do not use red on dark background.
Use vivid colors (with higher saturation and/or brightness). Low saturation colors are especially hard to distinguish.
To compensate for the lack of red or green sensitivity, red and green color blind people are more sensitive to blue hues than non-colorblind people
Use thicker lines and bigger symbols to make it easier to distinguish
Don’t use separate legends. Connect legend information to charts with thin lines.
Use bold fonts such as Arial and Helvetica, rather than Times New Roman.
Ask actual color-blind people to assess whether your design works for them. Don’t just rely on automated proof tools.

So Do You Have to Use Something Like This?

No, you can still have something aesthetically pleasing AND accessible to all. :)

Safe Palettes for Red, Green, Blue-Blindness

What else is important in a pie/donut chart?

Proximity of category, percentage, and values to chart sections for ease of comprehension. Legends increase time and effort to understand the information. Using color with proximity ensures accessibility for normal and color-blind users.
Limiting number of categories to avoid display issues and reduced legibility of information. Use a bar chart if you need many categories.
Sans-serif font for labels for legibility and ease of scanning
Large enough font size to easily scan labels at a glance
Use dark to light colors

Pros and cons for pie chart label and value placement

These pie chart images were from testing an application we were considering, and are provided here as examples. They do not represent the best designs! :)

Percentage in segment, value and label outside

Pros:

Putting percentages inside the chart graphically associates the percentage with the chart.
Percentages have a fixed limit of digits, usually ensuring that the percentage will be wholly contained within the chart. Since values do not have a fixed limit (this example uses API calls, which can number in the thousands and tens of thousands), we ensure that a large value does not cause display issues, reducing the legibility of the chart.

Cons: Too many categories can cause display issues and will make scanning and comprehension difficult.

Value, percentage and label outside pie chart

Pros: Guarantees comprehension for all users

Cons: Too many categories can cause display issues and will make scanning and comprehension difficult.

Values in segment, label and percentage outside

Cons:

Values have no digit limit, thus could cause display issues in pie charts, especially with large values or many categories.
Doesn’t graphically associate the most important value for the dashboard (percentage) with the chart

Percentage in segment, label with legend on right or left, no value

Cons:

A left- or right-aligned legend enables screen reader users to read the values but since they cannot hear the colors, they won’t be able to determine which category is which.
The legend boxes and labels are small and far away from the chart, thus requiring the user to move their eyes right and left multiple times, increasing the time to fully comprehend the figures.
No values makes it difficult to understand the significance of the percentages and to act on them if necessary. Is this out of 10 API calls? 1 million?
Doesn’t graphically associate the most important value for the dashboard (percentage) with the chart
Any side or top/bottom legend suffers from distance, size, and time/effort to comprehend.

Percentage outside chart, label in legend to right or left, no value

Cons:

No values makes it difficult to understand the significance of the percentages and to act on them if necessary. Is this out of 10 API calls? 1 million?
Any side or top/bottom legend suffers from distance, size, and comprehension issues as detailed in the previous example.

Percentage outside chart, value in chart, legend to right or left

Cons:

Values have no digit limit, thus could cause display issues in pie charts, especially with large values or many categories.
Doesn’t graphically associate the most important value for the dashboard (percentage) with the chart
Any side or top/bottom legend suffers from distance, size, and time/effort to comprehend.

Bottom or top legend placement

Cons:

A bottom or top legend enables screen reader users to read the values but since they cannot hear the colors, they won’t be able to determine which category is which.
Non-standard legend placement which suffers from distance, size, and time/effort to comprehend.

Avoid These Anti-Patterns!

Legend that is too small to determine colors and too far away from the chart to keep color and label information in one’s head when moving eyes to chart.
Too many categories
3D pie charts. They don’t accurately represent the percentages and their 3d-ness combined with their display angle make them difficult to comprehend at a glance. They also don’t look modern nowadays.
Putting the legend too far away from the chart.
No shadows or treatments on text. If the color is light, show a dark value label on it, if the color is dark, show a light value label on it. If you can’t do that due to technical limitations, choose a color palette that is light enough that values are visible on all segments, and combine it with a clear legend that is in close proximity to the chart.

But I Have More Than 8 Categories!

That’s okay — I’ve got you covered. Remember that this many categories should not be used for pie charts!

Be Careful with Blue & Green!

Tritanopes have confusion between shades of blue:

Light green and blue
Aqua and sea green
Grass green and med blue
Blue green and dark blue
Aqua and sea green

There’s a lot of information here, but I wanted to make sure to cover the areas that were important in my research, in the hopes that they will also be helpful to you. Happy color-blind accessible designing! :)

References

Maps:

Designing for all users — why you should care about color-blindness

Written by Courtney Jordan