Accessibility Guideline on Chart Color Usage Needs to be Added

[heyethankim]

Requesting new features, enhancements, or design changes to PatternFly

Designers and engineers need to be better guided which color combination is best for users. For the "Alerts," we use green for success and red for failure but they are being used along with different icon sets and texts.

However, on the chart, there is a stark difference between Blue/Red and Green/Red in terms of accessibility.

According to the Color Blindness Simulator, the Red/Green color combination is weak for the chart. Although additional details could be provided on mouse hover, it may be a trivial task for color blind users to do it for every single data visualization.

This should be addressed in the "Colors for the Chart."

[heyethankim]

FYI. @mmenestr @mceledonia

[mcarrano]

@heyethankim I agree that our documentation in this area is pretty weak. Is this something that you would be willing to help us with?

[mmenestr]

I think there's definitely room for added color guidance in terms of when to use which color (ie: green for success, red for failure). But when it comes to accessibility issues, rather than advising the usage of different colors depending on the context (which could lead to confusion/inconsistency when it comes to "when" one should use green vs blue, for example) my suggestion would be to use other indicators on top of colors. That is to say, adding further details on top of color usage to show the data.

Here are a few suggestions:

• Adding a regular legend, or a legend tooltip with the words "Success" or "Failure" along with the usual status icons which users would already be accustomed to seeing
• Adding more text in the chart itself (ie, if it currently says "87", we could say "87 successful")

[heyethankim]

Yes, I agree. The PF template displays the second option ("adding more text in the chart"). I think we should add it to the PF chart section. The tricky part is that the visualization doesn't mean much for color blind people if we allow green/red color combination.

I am looking into some more detail suggestions on the color combination. I found this and plan to verify it (also discuss with @jessiehuff).

Color combinations to avoid for people with color blindness include: Red & green Green & brown Green & blue Blue & gray Blue & purple Green & gray Green & black

[heyethankim]

An initial findings were shared in the IxD meeting: Recording Accessibility findings on PF Chart Colors Raw data

[heyethankim]

Will discuss the followings with @mceledonia @dlabrecq

• Color & Texture association (35 +)
• Review Victory chart

Reference

• Trello Colorblind Friendly Mode
• HighChart

[heyethankim]

@dlabrecq gave us a demo to @mceledonia and me today.

• Created a POC (the Victory chart doesn't support this out of the box)
• Using 5 textures that are automatically rotated. @mceledonia will look into if he could add more textures. This could be used for Dark Theme because the texture paths have no colors
• The textures are turned on/off by developers for now. This leaves a question of if this could be an accessibility feature users could turn on and off just like Dark Theme Having this toggle on every single chart for users would be a waste of space. FYI @jessiehuff
• Plan to push this as a PR

[dlabrecq]

The PR below includes a link to live examples. https://patternfly-react-pr-7390.surge.sh/charts/patterns/

[heyethankim]

@dlabrecq

• Added 15 unique SVG textures (patterns)
• Didn't define the order and the textures repeat after 15th

@mcarrano

• Colors stand out more (than textures) in the legend
• Pattern is an approach to tackle red/green differentiation issue
• What's an effective approach for somebody has difficulty differentiating colors?
• Need further investigation on the design side (we should be able to recommend what works and what doesn't)

@mceledonia

• Need to figure out the best practice to present this
• We never use only color to indicate in the UI, gives additional element other than color

@heyethankim

• Licensing to use the textures Dan found?
• Any way we could apply textures only for certain color sets?

[dlabrecq]

The chart color themes do not contain any combination of red-green. In fact, the color themes don't use red at all. If you encounter a donut chart with red & green, it's likely someone overrode the default PatternFly colors.

In that case, devs provide charts with a custom hex value (e.g., #8bc1f7), so we really don't know what colors are in use. Therefore, we probably couldn't apply a pattern (automatically) for red-green.

Note that there are 3 main types of color blindness. In addition to red-green, there's blue-yellow, and complete color blindness.

Designing a pattern for red-green only would be very limiting. It wouldn't address color weakness with blue-yellow, green-blue, and complete color blindness.

Although red-green isn't in our theme, we definitely have more color combinations like green-blue, blue-yellow, etc. IMO, we should allow patterns to be enabled for the entire color scale. That is, in order to address accessibility for any color combination and complete color blindness.

[heyethankim]

@dlabrecq Red/Green is being used across products because PF doesn't restrict a certain color combinations. Here are a few products that use Red/Green.

Ansible

ACM

Quay

As you can see the document above, we identified Red/Green is the most problematic color set. Hence, we are looking for a way to distinguish a certain color sets. That's how the texture (pattern) came to the picutre.

[dlabrecq]

I understand products are using red-green, but the examples above display custom colors. I'm trying to convey that PatternFly's chart themes don't contain this red-green combination, so we cannot apply a pattern automatically (i.e., only for this one, specific scenario).

We do; however, have multi-color combinations of blue-yellow and green-blue color in our existing chart themes. It's important to note that these particular color combinations are also an accessibility issue, along with complete color blindness.

Like you said, we don't restrict color combinations. I'm simply suggesting to be truly accessible, we should consider more than just red-green.

[dlabrecq]

The patterns were pulled from v3.0.3 of the script below, which uses the MIT license. https://github.com/highcharts/pattern-fill/blob/master/pattern-fill-v2.js

[heyethankim]

@dlabrecq I totally agree. The issue is a bit complicated since there are many factors that don't accommodate for us. As I suggested, could we discuss what we could do in the short term? Since I brought up the issue, more products are using the Red/Green combination, which we wanted to avoid. Then we could discuss more robust solution in the long term without hurting 91.5% of customers. Here are a couple of suggestions:

(1) Add guidelines that we should avoid a certain color combination - Red/Green, Green/Brown, etc. (2) Apply the textures (patterns) only on specific color combination

Since we cannot do (2), I guess (1) is the only tangible option?

[dlabrecq]

A developer can certainly apply patterns to specific colors, but it may be a manual process for custom color combinations, like red/green. That is, if we remove the ability for charts to apply patterns to any color.

[mcarrano]

Wanted to capture the proposed guideline text from Slack post on May 31.

Colorblind-friendly chart colors 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.

[dlabrecq]

Please consider replacing the term "textures" with "SVG patterns". Our examples demonstrate how to create custom patterns using SVG pattern elements. Textures describe surfaces like rough, soft, bumpy, etc.

[heyethankim]

Here is the discussion we had: @heyethankim Two notes to discuss:

1. “… accessibility chart page …” above may be a hyperlink. @Dan Labrecque, which page should we use or should we create a new page? Or should we describe how on this page?
2. Which should we use: “textures” or “patterns”? The reason I used “textures” above is because of a possible confusion from the name “PatternFly.”

@dlabrecq Regarding 1, we don’t have an “… accessibility chart page …” for charts, but you can point to the pattern examples. For 2, the correct technical term is “pattern”, but you could call it an “SVG pattern” for clarity. If a developer created a custom pattern; for example, they would use the HTML pattern element.

@mceledonia I think that’s sounding great! Might be nice to show some examples for 2., maybe some alternate color choices for certain combinations (red/green -> teal/purple, etc.)

[heyethankim]

Here is the updated verbiage and, as we discussed, I think this should be added to "Colors for Charts."

@mcarrano Please open an issue to update that.

@dlabrecq Your PR adds a new page that has SVG pattern examples?

@mceledonia Any progress on the examples we could include to the Colors for Charts page?

================

Colorblind-friendly chart colors

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:

1. SVG patterns: Check out our accessibility chart page to learn more about how to apply textures.
2. 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.

=================

[dlabrecq]

@heyethankim Yes, the examples show how to create custom patterns using the SVG pattern element. Upon the next PatternFly milestone release, the page will be located here: https://www.patternfly.org/v4/charts/patterns

[swopebe]

Chiming in as recommended to @heyethankim over Slack:

• https://ncdj.org/style-guide/ will direct you about how to best discuss severity (not to write "severe") and why.

• Additionally, I recommend may or might instead of "will see." One cannot assume all will see the same.

• Recommend also active voice and conciseness. For example, see these edits:

**If you’re wondering how colorblind people might see the charts, review Coblis, a colorblind simulator that tests against different color deficiency examples.

Avoid the following additional color combinations:

And:

If you must use these combinations, consider the following options:

Textures: Check out our accessibility chart page to learn more about how to apply textures. Light versus 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.**

[dlabrecq]

FYI, each chart component has it's own design section on patternfly.org.

If you want to add guidelines related to a pie chart; for example, that page can be found here: https://www.patternfly.org/v4/charts/pie-chart/design-guidelines

Similarly, design guidelines for patterns would be located here: https://www.patternfly.org/v4/charts/patterns/design-guidelines

[mceledonia]

Example of using color brightness to better distinguish between items

Example of using SVG Patterns to better distinguish between items

[heyethankim]

Tried it on the simulator. I like the first option better because of the immediate feedback. Wonder if you would like to try it using gray as you said.

[mcarrano]

I agree that the first option is clearer.

[mcarrano]

@mceledonia I presented your proposal during the PF design share meeting today. The response to the first option was positive. Some questions/concerns were:

• Does this approach work for more than 2 colors or for other than red/green? Does it need to?
• Is the less saturated color created by modifying the base color (i.e. reducing the lightness or saturation) of do we need to specify RGB values? Note that chart colors work differently than other colors in PF and don't utilize our standard color variables (or at least that's my understanding).

[dlabrecq]

@mcarrano The charts do utilize the PatternFly color variables. PatternFly defines chart variables as an ordered list, which is applied as the chart's color scale. Each color scale is associated with a theme; blue, yellow, multi-color, etc.

Note that no color theme currently uses red and green together. (In fact, red does not appear anywhere in PF's chart color scales.) In order to use both colors together, a developer must provide custom colors to the chart.

[heyethankim]

ACM chart color combination research (November 2022): https://docs.google.com/presentation/d/1ZiDAXhEUE-PaX408mEkC70O4sCb78oxQ3kX5SrpibUo/edit#slide=id.g547716335e_0_220

[edonehoo]

Handle this as part of ongoing design guideline updates