The fourth color in the color blind viz palette does not work in dark mode

[cchaos]

It's really the only color that has this issue. Is there any kind of quick tweak we can do to make it better? This tool might be helpful in finding another color.

[cchaos]

I've been messing around with the visualization color palette using 3 different tools.

1. Leonardo as a starting point for better contrast steps between colors
2. Chroma.js Color Palette Helper for checking colorblind safeness
3. Viz Palette for ensuring that even though they're color blind safe, they're actually differentiable from each other in a chart

I started with our original palette and plugged it into [1] which gave me back a slightly better stepping of colors. These ten colors I then put into [2] which told me I wasn't completely color-blind safe, so I adjusted individual colors until I got safe across the board. Then I added these into [3] where I tweaked two more colors that weren't quite differentiable from one another. I even checked dark mode [4].

P.S. our current palette isn't actually fully safe, it fails the trit test.

Edit: The links to the tools referenced above are not working because it's changing special characters, copy/paste the links from below

[1] https://leonardocolor.io/?colorKeys=%2300b3a4%2C%233185fc%2C%23db1374%2C%23490092%2C%23feb6db%2C%23e6c220%2C%23bfa180%2C%23f98510%2C%23461a0a%2C%23920000&base=ffffff&ratios=1.6%2C1.78%2C2.21%2C2.78%2C3.50%2C4.40%2C5.48%2C6.77%2C8.29%2C11.16&mode=CAM02 [2] https://vis4.net/palettes/#/10|s|eeafcf,e59145,baa066,3594d6,4dac93,3a5c7d,b45899,c71555,840000,471184|000000|0|0 [3] https://projects.susielu.com/viz-palette?colors=[%22#eeafcf%22,%22#e59145%22,%22#baa066%22,%22#3594d6%22,%22#4dac93%22,%22#3a5c7d%22,%22#b45899%22,%22#c71555%22,%22#840000%22,%22#662fa2%22]&backgroundColor=%22white%22&fontColor=%22black%22&mode=%22normal%22 [4] https://projects.susielu.com/viz-palette?colors=[%22#eeafcf%22,%22#e59145%22,%22#baa066%22,%22#3594d6%22,%22#4dac93%22,%22#3a5c7d%22,%22#b45899%22,%22#c71555%22,%22#840000%22,%22#662fa2%22]&backgroundColor=%22#1d1e24%22&fontColor=%22#ffffff%22&mode=%22normal%22

The final palette

#eeafcf,#e59145,#baa066,#3594d6,#4dac93,#3a5c7d,#b45899,#c71555,#840000,#471184

It's not a major departure from our current palette (on purpose) but we do have to decide if we want to re-order the palette to be more sequential.

Sequential

Original order

Text

The issues we still have are with text but we're no worse off than we were before. I think it just means that we shouldn't be using these colors for the text itself but more like badge colors where we can control the text contrast (isItLightOrDark) like it shows in the Chroma.js helper:

[snide]

@VijayDoshi would probably be interested in tracking this. Complaints that we've got on the palette is that it is very saturated and "hot". Might be an opportunity for us to lower the lights a bit if we're messing with this stuff anyway.

My vote would be to keep the same ordering as before if possible, if for no other reason then I can't see Kibana with pink charts by default. It would be nice if they started by matching our branding and the UI around it, but that's just an opinion.

[cchaos]

Complaints that we've got on the palette is that it is very saturated and "hot". Might be an opportunity for us to lower the lights a bit if we're messing with this stuff anyway.

The new color set is already less saturated than the current set, do you think this needs to change even more?

[cchaos]

Based on the desaturation feedback, I've manipulated the last few colors which are the hottest to be, well, less hot. This is the resulting palette.

#4DAC93,#3594D6,#D15D75,#9170B8,#EEAFCF,#ADB6DD,#BAA066,#E59145,#B46F5F,#47688A

[VijayDoshi]

Was looking at this again this evening, I do like the direction! It feels much more balanced. We'd probably need to get others involved in getting to a decision on a new default pallet. Do we need to consider a similar treatment for gradients?

[cchaos]

@VijayDoshi Who do you include in 'others'? I have socialized this a few times to the other designers within the org including CS.

I am working adjusting the current and creating more quantitative palettes to match these colors. However, single color palettes tend to need more extremes in order to create more distinguishable steps and so these tend to be slightly more saturated at the ends, though I tried to use the same colors from the color blind palette.

I should have a PR up sometime this week that anyone can review.

[cchaos]

The PR is up here: https://github.com/elastic/eui/pull/2686

[cchaos]

There was mention that breaking a few of the colors to be completely different from their original value may not be idea. So here is a palette option that keeps the same "value".

https://vis4.net/palettes/#/10|s|5bbaa0,6092c0,d36086,9170b8,eeafcf,fae181,cdbd9d,f19f58,b46f5f,e7664c|000000|0|0

cc @formgeist

[formgeist]

@cchaos I really like this updated palette that keeps the same range as the previous

[cchaos]

Posting @VijayDoshi's comment surrounding the saturation issue.

I do like the direction though, would be interested in seeing a 20 color pallet with a less saturated version of each color if that can be safely achieved from an accessibility perspective.

[ryankeairns]

While I agree that there were some hot (saturated) colors in the original set, they also happened to be the first 3-4 colors which means they were used most predominantly. Given that, my caution here is that we don't tone down (desaturate) too much across the board if there were really only a few culprits.

[johnbarrierwilson]

After thinking about it during my drive to ATL, I'd have to agree with @ryankeairns. I don't think modifying all the colors is necessary. I'd personally love to know a little more about where the term "hot colors" originated from and get some more context around that piece of feedback.

[snide]

It's due to some degree to some lazy handling of the default graphs. As an example. These are live views in the Metrics app.

Which come from default values being passed from Elastic Charts

http://snid.es/c0deb7da0721

When @formgeist uses the palette within APM, he's often using opacity on top of the coloring, which naturally mutes them.

Obvioiusly there is much more at play than just the coloring. In many cases, engineering needs to be more considerate in how they present these charts. But if our aim is to solve accessibility it's likely complicated. My guess is that opacity has some factor in this stuff.

[VijayDoshi]

I'd personally love to know a little more about where the term "hot colors" originated from and get some more context around that piece of feedback.

@johnbarrierwilson There is a ton of research on color contrast. My observation is regarding something called "extension contrast" and "Simultaneity of color." When you place highly saturated opposing colors they appear to "vibrate" - this distraction can lead to over-weighting the involved colors and over time (imagine a SOC dashboard) fatigue.

Look at the following two and compare how much more you focus on the bottom three segments of the one on the right; whereas, your brain gives more equal weight to the ones on the left (at least mine does)

This is a good article that provides some context for how impactful the pallet can be and some foundational concepts of color theory - this is a really deep topic though. Here is an excerpt/example:

Figure 6: These images show the principles of simultaneity and extension contrast. Simultaneity of color causes vibration between saturated color complements as can be seen in the top left square. Contrast of extension causes a misperception of the area ratio between colors, as is seen on the top right. Both of these issues are mitigated by muting the colors, as is seen in the bottom two squares.

[johnbarrierwilson]

That's a fantastic summary and research article. Thanks for sharing @VijayDoshi!