Paste Data Visualization color suggestions

[smunozgonzalez]

The Voice and Messaging team has been working on Console Insights pages and using Paste data vis colors for a while. This has allowed us to stress-test the colors with realistic data and page layouts. We haven’t tested the colors specifically, but we have run usability tests on Insights prototypes using the data vis colors.

Some of the things we’ve struggled with:
Not having specific “positive” and “negative” colors for data that needs to highlight improvements or issues, similar to how we have statuses, icons, and badges
Colors themselves don’t work visually for certain graph types (ex. heatmap)
No color option to show “empty/null” data
Not having enough colors for the amount of data we need to display

Suggestions
We created 3 alternative color pallets to consider as an addition or replacement to the current data visualization. We’ve tested these with the current and future data sets displayed in Console, and we’d like to discuss with the design systems team any feedback about the colors and if this is a direction we want to move in (and how).

Colors
https://www.figma.com/design/ksaVLfQIsS92ZplBlg24g9/%5BWIP%5D-Twilio-Data-Visualization-Library?node-id=708-6499&t=JF088XhnObxGyj1j-1

The sets explored would operate the same as the data visualization colors today - in sequential order. They’re accessible against $color-background-body and next to each other. The red and green colors are meant to either be used on their own, or as an addition after exhausting the 8 colors. The grays are used as empty states, for example in a heatmap when there is no data to display, or a bar chart when there’s unknown data.

These 3 palettes for data visualization were selected in the User interface design because of its modern approach, brilliance and contrast between them. These colors not only bring an additional modern and attractive look, but also ensure a clear distinction between the regular UI colors and the data visualization. The brightness on the proposed palettes guarantee a good visibility under diverse conditions related to backgrounds and layouts. The contrast between the colors make the overall elements readability and comprehension of the presented information. These palettes enhance the user experience by making it more intuitive and effective.

Examples:

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Data Visualizations - Colors (updated: 07/01/2022, similarity score: 91%)
• Accessibility of data visualization colors in bar chart (updated: 12/08/2022, similarity score: 87%)
• Data Visualizations - Colors - Answer (updated: 07/01/2022, similarity score: 87%)

[roxanagomez]

Hi @smunozgonzalez thank you for reaching out and sharing your insights with us.

So as detailed in WCAG Success Criterion 1.4.1 (Level A), it is important not to use color alone as a means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Instead, convey such information with text and/or iconography, and use color only as a means to further enforce the meaning.

Considering this accessibility guideline, here are my suggestions:

1. Heat-map

Colors themselves don’t work visually for certain graph types (ex. heatmap)

I think these 2 are also related to heat-map (please correct me if no)

No color option to show “empty/null” data
Not having enough colors for the amount of data we need to display

For the heat-map, this demo on Highcharts illustrates an accessible approach to displaying heat-maps without relying heavily on colors. You can use any of the colors that are part of the Categorical Color Palette in Paste and create a Non-categorical Color Palette which is composed of varying intensities of a single hue of color at uniform saturation.

2. Positive vs. negative colors

Not having specific “positive” and “negative” colors for data that needs to highlight improvements or issues, similar to how we have statuses, icons, and badges

I didn't really see an example of this in the screenshots you shared, is there a specific use case for this? In statuses and badges we use colors and icons as a reinforcers to the text that actually drives the "positive" "negative" meaning. You can follow this same pattern for your use case if relevant.

3. Line chart

Regarding this line chart it isn't immediately clear to me that the lines are in sequential order or related in any meaningful way. Could you share more about this use case so I can give you better guidance?

I hope this was helpful, we encourage you to use Paste Color Palette since is fully 3:1 contrast-accessible against our $color-background-body token, if you end up using it please share with us your results and it can hopefully be part of our documentation.

[smunozgonzalez]

Hi @roxanagomez, thanks for answering!

1. Red/green colors:

Would it make sense to separate out red/green from the color palette to be used on their own in addition to text or icons to represent positive/negative in a graph? When red or green is used with the other colors, we’ve gotten feedback that it still implies a meaning. That’s why we felt they could be separated from the main palate and be used with an icon or text.

This is a possible use case for the red color in the Data Visualization meaning a negative connotation (In this case the robocalls are something negative where we can use the red color to reinforce the meaning and drive more attention to the bad insights here).

This is also an example of this same use case on messaging, where the green and red colors play an important role communicating positive and negative:

2. Non-categorical palettes:

We’ve tried applying two of the existing colors (color-data-visualization-1 & color-data-visualization-4) to our heatmap with the large amount of data we need to display as you suggested. We’ve chosen not to have the data displayed on each cell because there’s so many - do you think this works or any additional suggestions to improve?

Following your suggestions, we also created a non categorical palette using 3 colors from the Paste library (color-data-visualization-1, color-data-visualization-6 & color-data-visualization-7):

3. Empty/null color:

The empty/null color is for situations where we still want to show no data was captured for that time period, so we were looking for a standard color. We’re also using this on a stacked bar chart. Is this a concern with the existing gray color in the pallete (data-visualiztion-8)

4. Alternative palette:

The line chart shown before isn’t sequential or related, the key had a mistake that didn’t display all of the colors. This is an example of how we can use new colors to avoid using green and red to display the information. The colors shown here are grouped in a categorical palette that could be used in the same order of importance for the colors throughout all the graphs (the colors shown here are tested passing accessibility against each of them and also against the $color-background-body.

It would be great to have a working session to expose the reasoning behind our palettes proposals to find a version that best fits our use cases and the needs outside the Voice team too. Thank you!

[serifluous]

Hey @smunozgonzalez ! I'd encourage you to sign up for an office hours session so we can walk through how we're thinking about the data visualization palette and accessibility, and we can learn more about how you're approaching it too: https://docs.google.com/spreadsheets/d/10vD91zdwr9hjgDOV3HSGnoC0LgvYw-thmn3X_kvW0xk/edit?gid=664218049#gid=664218049

We're also prioritizing some of this work soon because we've had a lot of requests for an update to the palette over the past year or so, so we're happy to collaborate on this soon.

In response to your points:

Red/green

The use of the single color works fine in your "Potential robocalls" example because a customer isn't meant to distinguish between the 2 colors. However, if you were to run the 2nd example through a color-blindness simulator, you'll see it becomes pretty hard to distinguish between the 2 colors:

This is why we encourage people to use shapes, icons, and text as distinguishing elements, not just color: https://paste.twilio.design/foundations/data-visualization#shapes

Heatmap

Until we can ship a new update to the data viz palette, adding the numbers to each cell will be the most straightforward way to make sure the heatmap is accessible while still using the non-categorical palettes you're exploring.

Something that could be helpful is considering whether you need to represent each 10% difference in the heatmap. If you only use 5 steps, for example, that might make it easier to find a set of colors that are all accessible with each other than having 8-9 steps.

Empty/null color

The color itself seems reasonable. However for the "Answer rate" example, you'll want to make sure that color is distinguishable enough (3:1 contrast) with the other colors used, or add the number into the heatmap itself (like mentioned above).

For the "Answering machine detection" example, you'll need to add a border around where it shows up in the bar chart or else it's not distinguishable from the white background color.

Accessibility

Can I also ask how you're testing accessibility for the colors you're choosing? If I take just some of these colors, for example:

None of these are accessible on a white background / color-background-body: #C0C5D4, #B5BAD0, and #E9E16D are 1.72:1, 1.93:1, and 1.36:1 with a white background. Each color needs to be at least 3:1 with a white background.

[krisantrobus]

Hey @smunozgonzalez - just wanted to share the office hours recording with you in case you'd like to revisit any of our conversations. Here's the video, this shouldn't require a password if you are signed in with SSO. Thanks again for coming to office hours!