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: #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.