miharekar / visualizer

A visualizer for .shot files
https://visualizer.coffee/
MIT License
97 stars 11 forks source link

Add option to use colors that color blind people can make sense of #68

Closed MayorJustin closed 2 years ago

MayorJustin commented 2 years ago

As a colorblind user, the graphs are very hard to read. Specifically, it is very hard to tell the difference between the various series in the graph. Additionally, the temperature graphs are extremely hard as it seems they are similar shades of the same color.

Here’s a good document that shows best practices:

https://davidmathlogic.com/colorblind/#%23D81B60-%231E88E5-%23FFC107-%23004D40

As a new decent owner, it has been extremely frustrating to try to analyze the graphs. Please make this a better experience for color blind users!

simonyun commented 2 years ago

+1! 🙏

miharekar commented 2 years ago

Chart colors are entirely customizable already. However, that setting is only enabled for premium users.

I'll look into having another color mode. One problem is that there are so many chart lines, and it's hard to keep them all apart and readable. So if you have any actual color suggestions for each line, I'm very open to it. Also, remember that the colors have to work on white and black backgrounds.

MayorJustin commented 2 years ago

I wonder if you should consider a more accessible default palette rather than letting basic users pick between two options. For an accessible default, I propose the 7 Color Palette from here:

https://davidmathlogic.com/colorblind/#%23000000-%23E69F00-%2356B4E9-%23009E73-%23F0E442-%230072B2-%23D55E00-%23CC79A7

For the temperature graph, I’d propose reusing the same Palette. I would think it is ok to reuse between the graphs and wouldn’t cause confusion.

One final note…I can see that changing the default colors for current users could be viewed as disruptive and unwelcome, but it may be a win overall for most people. My non-color-blind family members had a tough time with the temperature chart when I showed them.

miharekar commented 2 years ago

The default palette is picked from Insight/DSx skins which are used by over 80% of users. And most other skins follow in their footsteps deviating only slightly. So from the least surprise UX principle I still consider it the best default.

I 100% agree that it's not a great color scheme, but I do believe the skin and default Visualizer experience should be as similar as possible. But please, feel free to propose changes in the DE1 skins as well! We'll all be better off in the long run.

My non-color-blind family members had a tough time with the temperature chart when I showed them.

That's weird though. What were you viewing it on? Maybe your display colors are miscalibrated. To me they look completely different on any device I own.

miharekar commented 2 years ago

I went through all the variations in David's post and tried all the different ones in Paul Tot's post. I've updated the temperatures chart with Paul's vibrant palette, but I can't find a palette that works well for the main chart 😅

The main problem is the pairing of flow-flow goal and pressure-pressure goal, where I want it to be blue-ish and green-ish respectfully, but still distinct between each other. Also, grey or black doesn't really work well for any label.

So here are the current colors I'm using:

 "espresso_pressure_goal"=>"#03634a",
 "espresso_pressure"=>"#05c793",
 "espresso_flow_goal"=>"#09485d",
 "espresso_water_dispensed"=>"#1fb7ea",
 "espresso_flow"=>"#1fb7ea",
 "espresso_flow_weight"=>"#8f6400",
 "espresso_weight"=>"#8f6400",
 "espresso_resistance"=>"#e5e500",
 "espresso_conductance"=>"#f36943",
 "espresso_conductance_derivative"=>"#f36943"

Can you suggest a palette that will look and work well?

It has to work on both dark and white backgrounds and still somewhat resemble current colors (blue-ish for water, green-ish for pressure, yellow-ish for resistance,…)? Maybe from some other source?

Thanks!

miharekar commented 2 years ago

Closing because I haven't heard back.