Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make UI colorblind friendly #8436

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

yw4z
Copy link
Contributor

@yw4z yw4z commented Feb 17, 2025

This commit will fix #8365 check that for more information

Depends on user feedback there are 2 paths
• Giving an option on preferences
• Apply color schemes globally if result looks suitable for normal vision

TODO

  • Research & collect information
  • Build color palettes with feedbacks
  • Apply them to code

RESOURCES / RESEARCHES

according to wiki best gradient / heatmap colors
CVD-friendly_sequential_colormaps
https://en.wikipedia.org/wiki/File:CVD-friendly_sequential_colormaps.png

https://en.wikipedia.org/wiki/Color_blindness
https://venngage.com/blog/color-blind-friendly-palette/
https://hiweller.rbind.io/post/using-the-dichromat-package-to-check-if-your-plot-is-colorblind-friendly/

a color blind friendly color palette
Screenshot-20250211150040

The deuteranopia color spectrum looks like this
deuteranopia-color-spectrum

The Tritanopia color spectrum looks like this:
tritanopia-color-spectrum

according to google

Males Females
Dichromacy 2.4% 0.03% Red & Green
Protanopia 1.3% 0.02% Red
Deuteranopia 1.2% 0.01% Green
Tritanopia 0.008% 0.008% Blue

8% of male and 0.5% of female population has any types of color related visual problems

PROBLEM

PROBLEMATIC SECTIONS

2 COLOR COMBINATIONS USED ON
• Measure
• Cut
axis colors uses green tone that eqauls to yellow. Top color shouldnt use yellow tones to prevent conflict
increased contrast on when colors visible as grey-scale

3 COLOR COMBINATIONS USED ON
• Support painting
• Seam Painting
• Axis colors

GRADIENT / HEATMAPS USED ON
• Preview Section

HOW TO SOLVE

• Use better contrast for colors
• Use spesific color spectrums and avoid using spesific tones of red / greens

SOLUTIONS

[WIP]

USER FEEDBACK

Thanks to
@numericOverflow
@FeetOffTheTable (Deuteranopia)

@yw4z yw4z changed the title Colorblind friendly UI Make UI colorblind friendly Feb 17, 2025
@yw4z
Copy link
Contributor Author

yw4z commented Feb 17, 2025

@FeetOffTheTable @igiannakas @numericOverflow
we can continue to discuss from here. this makes discussion visible to more people. since it requires a bit feedback from different people
I'm adding some basic information to first post. correct me if i wrote anything wrong

i will share new information as replies so everyone get notify about them

I'm preparing some visuals for comparison now. There are some filters on photoshop to simulate situation and i can see problematic sections better with it

@yw4z
Copy link
Contributor Author

yw4z commented Feb 17, 2025

HEATMAP

colorblind-friendly-spectrum
How it looks
Screenshot-20250217230513

1.1 - Current colors; as you can see middle 4 yellow tones is very similar and its impossible to discern
1.2 - Tried red to blue scale but its not enough for normal vision and its not covering all scale for color blindness
1.3 - Used 1 color but shades is very similar and not enough differentiation
1.4 - tried recommended color pallette for this but raw yellow on mid scale is not looking good but this can be a common choose with notmal vision since it looks very similar to current color scale. Still 1-2-3 and 4-5 very similar
1.5 - very similar to 4
1.6 - suggested gradient on wiki (cividis) - creates good differentiation on colors
1.7 - suggested gradient on wiki (viridis) - creates good differentiation on colors but its better for normal vision too
1.8 - suggested gradient on wiki (parula) - colors too pastel and not fits for normal vision

colorblind-friendly-spectrum-2
How it looks
Screenshot-20250218002927
2.1 - current colors
2.2 - based on 1.7 but fine tuned by me to increase differentiation on colors / shades
2.3 - same as 1.7. problem with it, its a perfect gradient and color / shades has less differentiation
2.4 - based on 1.7 but fine tuned by me and increased contrast as much as possible. Not looking bad for normal vision too

HEATMAP - CONCLUSION

• Mostly red tones are problematic
• Using darker has advantage for creating differentiation but not sure how it will look on viewport
• 2.2 and 2.4 requires feedback
• i assume an option on settings required

2 COLOR COMBINATIONS

Screenshot-20250218003624
How it looks
Screenshot-20250218003639

Notes
• Tried to avoid using yellow-green colors on top since axis colors visible as yellow
• Tried to avoid using cyan like colors since it visible as grey and its mixed with plane color
• This colors visible on Cut and Measure gizmo

3 COLOR COMBINATIONS

Screenshot-20250218004105
How it looks
Screenshot-20250218004113

Notes
• Mixing green and red impossible to discern
• Bottom color of is looks same as model color. tried a darker color on bottom on alternative 2 but its hard to identify again
• i assume all alternatives suitable

AXIS COLORS

Screenshot-20250218004519
How it looks
Screenshot-20250218004532

Notes
• used a lighter color on X axis but not sure it count as an improvement

hope that photoshop filter is realistic enough. waiting for some feedback :)

@igiannakas
Copy link
Contributor

Wow, just wow! 👍🏻👌🏻🎉

@yw4z
Copy link
Contributor Author

yw4z commented Feb 17, 2025

@igiannakas looks like an option on preferences required since 2.1 still much more effective for normal vision compared to 2.4
i'm waiting your assist on that

btw i saw many people with normal vision prefers color palettes that suitable color blind. i assume they thing it looks cool.
thats why i prefer to use purple / green tones instead just blue / yellow tones.
And like @FeetOffTheTable said his wife has normal vision if he shows something on slicer to her. she can still able to see colors normally on UI

@FeetOffTheTable
Copy link

Hello, thank you @yw4z and everyone.

I'm @FeetOffTheTable, I have already provided a lot of feedback regarding difficulties for the colour deficient in Orca's UI in the previous thread. I have moderate Deuteranopia and I'm hoping to help improve visual markers and perceptive information for those who have Dichromacy.

Just going to provide some feedback for the new examples posted above, and grade these on a scale of difficulty to better help understand my position:

1 - Trivial, can mostly discern colours or doesn't prove a practical barrier.
2 - Moderate difficulty, can somewhat tell colours apart, but may provide difficulty at a glance or cause confusion.
3 - Nearly impossible, may never be able to tell colours apart even in a vacuum.

HEATMAP

Current Difficulty: 3 (for up to 4 of the adjacent middle colours)

1.2, 1.3 and 1.5 are not great for me personally. 1.4 I would consider a major improvement over the original. I do also like 1.6, 1.7 and 1.8, but they are starting to blend a little on the lower and higher ends rather than the middle. If I had to rank these, I would say:

Best: 1.4, 1.6
Good: 1.5 1.7, 1.8
Bad: 1.2, 1.3

I do really like the adjustments made in 2.4, it's probably the most perceptible out of all the scales. The trade-off is that it's not very obvious from a cold-to-hot scale where each colour lies, but I think it's a trade-off worth making in order to realize full accessibility. This would make it better for an option, whereas 1.4 I think would be more acceptable for all.

Adjusted difficulty: 1 - 2 (between 2 adjacent colours rather than 4)

2 COLOURS

Current Difficulty: 1

The "Highlight" over the magenta made by the cut plane can cause confusion with the "blue" of the top of the cube. I would rather there be two distinct colours, if only to better visualize a cut.

I like option 1 and 6 aesthetically, but honestly they're all pretty decent.

Adjusted difficulty: 0

3 COLOURS

Current Difficulty: 3

I agree that all alternatives are a huge improvement over the original, specifically for the highlight overhang used in support painting. I would only be wary of how the highlights darken as they go further under the model into the shadow effect, I think adjustment 1 may not fare as well as the others.

Adjusted Difficulty: 1

As for the Axis, the colours could be slightly improved for myself but I don't see it as much of a necessity. I do prefer the adjustments made just from an aesthetics view.

Also, I applaud you on the deuteranopia filter you're using on these images, it took me a while to understand what the "how it looks" images were. I was trying to find the changes for a while before realizing why I could barely see any.

@discip
Copy link
Contributor

discip commented Feb 18, 2025

@yw4z
Thank you for all your effort so far.

Since you are on it. 😊
Would you mind adjusting the difference between Blocked overhang support and overhangs?

If marking an overhang as Enforced support it becomes yellow instead of green and Blocked support become more red. It seems that the colors get mixed instead of replaced.

2025-02-18_10-03-04

@yw4z
Copy link
Contributor Author

yw4z commented Feb 18, 2025

@FeetOffTheTable

glad to hear your comment about "how it looks" images. because i cant create good alternatives without good simulation

HEATMAP

can you send an example or explain further for this "it's not very obvious from a cold-to-hot scale where each color lies"
i assume your perception searching for blue to red for cold to hot even you cant see red. your brain searching that color tone
most of graphical elements designed for normal vision and used red for "hot". red still indicates "hot" / "warning" for you. am i correct?
btw his heat map not only for cold-hot it. line width, layer thickness, speed.. many other usages on legend

yes 1.4 can be a common choose between normal vision and color blindness but i eliminated it since it has very similar colors/shades
is that looks more cold to hot on your perception?

i can fine tune colors on 1.4 if you thinking it can work but still its first 5 color using very similar shade compared to 2.4

which colors hard to discern on 2.4. i can increase contrast on them

2 COLORS

both 1 or 6 suitable to use with normal vision too

3 COLORS

i assume only problem is highlighted overhangs near bottom surface of model. maybe using very dark color on bottom will fix that
combining dark color on bottom and using overhang color as a bit light shade like on 2-3-4-5 should make an improvement

AXIS

Probably colors will stays as same if we can solve problems without adding a setting for color blindness.
But i will add this as improvement if we add a setting

i will prepare more images depends on your feedback

@discip but why you use support painting and support modifier together? can you open an issue with more explanation instead sharing in this commit
off-topic discussions will make post cluttered. Probably i will try to fix it on next color fixes commit

@discip
Copy link
Contributor

discip commented Feb 18, 2025

@yw4z

but why you use support painting and support modifier together?

Apologies, but it seems there’s a misunderstanding — this is not a mix of Support Painting and a Support Modifier.
It's simply the Show Overhang option activated in Settings -> View while using Support Painting.

Please correct me if I'm mistaken, but I think it isn't necessary to open a separate issue, as it aligns perfectly with the color-related topic.

thanks in advance
kind regards

@FeetOffTheTable
Copy link

FeetOffTheTable commented Feb 19, 2025

@yw4z
By that comment, all I mean is that intuitively on a 2 or 3 colour gradient (Blue to Red), you can tell where a single sample of colour most likely lies in the scale in your mind without referencing the key, but in order to create a large separation, there needs to be more variation / shades, making it harder to intuitively know where a sample of colour lies on the gradient (at least until you get used to it). For example, at 2.4 speed 142 is a darker shade so I may think that it's a lower speed until I check the key. I don't necessarily think this is a bad thing because it creates a greater separation of colours and is not a problem as long as you have the key to reference the indicated speed, which is why I think it's a good trade-off for accessibility.

1.4 I placed in the "best" tier because it's a very similar but improved gradient compared to the original. In fact, I was wondering where I have seen this sort of rainbow gradient before and it's actually in Klipper on the bed mesh page:

klipper example

For me, it hits the mark of simple but effective and aesthetically pleasing change. But yes, I do still have trouble with the reds in the last section (The top four colours in particular)
1 4
Approximately difficulty 3 between 2 adjacent colours and difficulty 2 between non adjacent, which is still better than original.
I just think that it has a lot going for it and that it wouldn't bother anyone, not sure how this fares for Protanopia / Tritanopia compared to 2.4 though. Maybe could look at fine tuning, or ask some others for opinions. I don't want to claim that my opinion stands for all Deuterans considering the differing severity of the condition or the medium they are viewing the colours through.

The point this brings up for me is if the UI is to be changed universally for all, or whether it's to be an optional choice, these two options 1.4 and 2.4 could satisfy one of these options and would at the very least be an improvement.

On 2.4 the only colours I'm only very slightly having trouble with are speeds 67 and 48 but otherwise it's a very nice gradient.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

A slight change to support painting colours for the colourblind
4 participants