Accessibility of PF Chart Colors
Background
Colors play a central role in data visualization. Optimizing the graphics can help make them more accessible. The current PatternFly color combinations for charts are in need of more detailed guidelines on how designers and engineers should use the colors to appeal to a wider range of users.
Colors for Chart in PatternFly
https://www.patternfly.org/v4/charts/colors-for-charts
- 8 base colors (blue to gray) including lighter and darker hues of the base
- Organized in a way that increases contrast while still looking visually appealing
- A few ways to use the colors for one to multiple variables
Challenges
Lots of flexibility means you have lots of decisions to make. For example, the green family and the red family introduce a few challenges to consider:
- “Consistency” vs. “Unification”
- Cultural prejudice - “Christmas” effect
- Visual heaviness, especially on many data visualization pages
- Accessibility - Jessie Huff & Mark Riggan shared a few tools
Color blindness
It is a deficiency in distinguishing between different colors. Color blindness is primarily an inherited condition. 99% of all color blind people suffer from Red/Green color blindness.
Color blindness affects 1 in 12 men (8%) and 1 in 200 women (0.5%). There are an estimated 300 million color blind people worldwide, including Christopher Nolan, Bill Clinton, and Prince William.
- Red/Green Color Blindness:
- Protanopia - red weakness
- Deuteranopia - green weakness
- Blue/Yellow Color Blindness: Tritanopia
- Complete Color Blindness: Monochromacy
Color blindness in Red Hat
43 people were identified through memo-list@redhat.com over a day.
- About 70% (30 out of 43) are experiencing Green & Red deficiency
- 26% (11 out of 43) couldn’t recognize the difference between Green & Red
- Blue & Red combination was preferred over Green & Red combination by 100%
- A few remarks
- “If I look closer, the difference is more visible.”
- “I see green highly depending on brightness (luminance) and saturation.”
- “When management asks us to fill out spreadsheets with Red, Green, Yellow and do not provide a sample, it is hard. Usually I have to get my wife to help.”
- "Size matters to me. Small dots of color are VERY hard to tell apart.”
- “I can't see the difference between Red, Green, and Orange LED lights.”
- “Solving a Rubix cube … my wife had to put painters tape over each of the Orange squares so that I could differentiate them from the Green squares.
- “Mobile apps present more of a problem because of the smaller amount of space to identify contrasts.”
- “Normally I do not use the GUI, I normally use the command line because I don't see the colors.”
Testimonials
“At a glance they are indistinguishable.”
“If it is smaller or thinner, it becomes an issue.”(x3)
“I see zero difference between the left and right images here.”
“I can differentiate the right.”
“The right one … the right one stands out more.”
“The right image clearly has 2 colors.”
Questions
“Which products have you found challenging to understand due to the color issues?”
References
Rubix Cube for Color Blind
Color combination to avoid (Need to be validated further)
You should avoid using problematic color combinations. It makes your charts or infographics inaccessible to color blind people.
- Green & Red
- Green & Brown
- Blue & Purple
- Red & Black
- Green & Blue
- Blue & Gray
- Green & Gray
- Green & Black
- Purple & Pink
- Pink & Gray
- Green & Yellow
Final Thoughts
Avoid using a red/green combination of colors in charts as the only distinguishing difference. People with color vision deficiency see both colors as brown. If they have severe conditions, both colors look like the same shade of brown.
Here are additional color combinations to avoid:
- Red/Green/Brown/Orange
- Blue/Purple
- Pink/Gray
- Gray/Brown
If you must use these combinations, you should consider two options as follows:
- Textures - Check out our accessibility chart page to learn more about how to apply textures.
- Light vs. Dark - The problem is primarily with color hue and not with the color weight. Most people can see the difference between a light color and a dark color.