As part of my continuous modification of FreeCAD’s user interface, I envison a complete ui visual overhaul. This include stylesheets, colors, visual settings etc.
As discussion on Discord continued I became aware that it I need to evaluate the colors used for accessibility to those who have various levels of color deficiencies. First it began as identifying colors which have both aesthetically pleasing compatibility, but then evolved into calculating relative contrast ratios.
I initially kept things simple by setting the palette out in an image against a desired background color and desaturating it entirely into grayscale for assessing general contrast. (This works by the way).
Then I discovered there are published guidlines for exactly this, found here: https://www.w3.org/TR/WCAG21/#contrast-minimum
Takeaways from this guideline. Generally want to keep important elements in the UI (text, sketcher lines interactive elements etc) at a minimum contrast ratio of ~4.5:1. Contrast is considered to be enhanced at a ratio of 7:1+
Seeking good contrast, balanced with color differentiation I mapped out the ratio of the palette down to the desire minimum ratio and came up with this:
Untitled.png
The next step was to find a color blindness simulator to find out what these selections would look like with various types of color deficiencies. So I ran the palette contrast image through this: https://www.color-blindness.com/coblis-color-blindness-simulator/
The options were as follows:
RW - Red Weak - Protanomaly
RB - Red Blind - Protanopia
GW - Green Weak - Deuteranomaly
GB - Green Blind - Deuteranopia
BW - Blue Weak - Tritanomaly
BB - Blue Blind - Tritanopia
M - Monochromacy - Achromatopsia
BCM - Blue Cone Monochromacy
The results look like the following:
breakdown.png
And below are statistics for the frequency of occurrence of the various types of color blindness
color-blind_stats.png
We can see that this color palette would be sufficient for 98.84% of people without color perception limitations. The deficiencies shown with the red X’s are too impaired to benefit from the use of color for example in Sketcher.
Here we can see the colors, despite the obvious non-complementary nature of the selections they are relatively visible, however in some areas we have to strain our eyes.
classic.png
Now here is the view completely desaturated of color, now some problem areas become much more apparent. You can see how the luminosity of the background gradient transitions from Dark to Light.
desat.png
I then proceeded to check for the minimum WCAG recommended contrast ratio. This is challenging with a gradient, I turned to this tool to help: https://github.com/danirabbit/harvey
I have marked the areas which do not meet standards in red. Here, serious problems are revealed.
classic_bad.png
desat_bad.png
Also, what this looks like with the various color deficiencies:
bitmap.png
Great work.
Yes so the bottom line is that the main problem is that there isn’t enough contrast between the background and the various elements. If we used a light background with dark-colored elements or the reverse, dark background with light colored elements then it would be mostly fine. We would just need to finetune some colors to avoid annoying colorblinds.
I don’t see a reason why any default style could not be used by colorblind people.
So I don’t see any need for a “special” high contrast theme.
We should just make default so 99% of all users can work with it.
Those 1% will probably be like near sight disabled issues or near blind people, and a simple high contrast theme won’t fix that.
So I am not saying we shouldn’t account for color blindness, I am just saying that a good theme wouldn’t need a colorblind version.
I btw didn’t dare to change the default background but the new preference packs dark and light do change it. Hopefully people get used to it and we can ease in a new background in the 1.0 version
I ‘suffer’ from a form of colorblindness, but actually don’t know which type… What I miss in the analysis it the effects of the line width. In the last image I can distinguish the 2 orange-red lines to the left of the rightmost blue line. If however the lines were 1 or 2 pixels wide and a certain distance apart I would have a problem.
Compare the image here (which has anti-aliasing making it more problematic for me): https://github.com/FreeCAD/FreeCAD/issues/10100#issuecomment-1672017048
Has it ever been considered to have a dedicated background color when editing a sketch?
I think the use of gradient offers a nice aesthetic. The existing one along with sketcher’s colors are just poorly thought out. I definitely have considered line width as a problem. Something I plan on putting together is/was a mocked up gradient background and color palette and take it to reddit.com/r/colorblind to get some blind feedback and identify problem areas with my proposal.
paddle Roy_043
Here are some proposed mockups. They are intentionally a bit extreme, but feedback on the colors that work, and ones that don’t will be helpful.
Two gradients are shown. A lighter one, and a darker one, please specify which ones are unacceptably bad for you.
Lighter Gradient
visibility2_light_gradient.png
visibility1_light_gradient.png
Darker Gradient
visibility2_dark_gradient.png
visibility1_dark_gradient.png
Good job, it is a pleasure to see that there are people that cares about these sort of things, I’m not color blind, but I have some relatives that are color blind, so I can understand things.
Thanks for those test images. The lighter gradient works better for me.
I find the blue colors hard to distinguish. At first glance colors n-s appear similar. Looking at them more carefully I can tell some of them apart.
Colors a-e appear identical even after close examination.
Results after close animation:
light_gradient:
a = b, c, d, e, f (almost)
b
c
d
e
f
g !=
h = i
i
j = k (almost)
k
l = m (almost)
m
n = o
o
p = q
q
r = s (almost)
s
t = u (almost)
u
v = w (almost)
w
x = y (almost)
y
z !=
aa !=
bb = cc
cc
dd = ee
ee
dark_gradient:
a = b, c, d, e, f
b
c
d
e
f
g !=
h = i
i
j = k (almost
k
l = m (almost)
m
n = o
o
p = q (almost)
q
r = s
s
t = u
u
v = w
w
x = y
y
z !=
aa !=
bb = cc (almost)
cc
dd = ee
ee
Using the APCA color guidelines (and your feedback) I may make a few adjustments to the color palette. I believe in both of your cases distinguishing between some colors just won’t be entirely possible due to the sheer number of colors used in sketcher. I believe a transition to some patterns for lines which is a discussion currently underway will really help with this and afford a chance to lower the number of colors used.
I may have some additional test images for you in another couple of days.
I did a test to see what this palette allows in terms of individually distinguishable colours for the sketcher. Looking at Obelisk’s sketcher colours, there are currently 18 colours. It is possible for me to get up to 17 visually distinguishable colours of which I think it is possible to tell the colours apart without the other colours being present. In the sketcher, you likely won’t have all different colours present, so to be able to tell whether you see light blue, or medium teal is vital to identify what kind of sketch elements there are in your sketch.
This is the palette excluding greyscales (I only added a white). It’s the same size as Obelisk’s image, making for a good comparison on download. As such, it is possible to get in excess of 18 colours for the sketcher if greyscale colours were to be used.
Sketcher maximum viable colours.png
That said, I think it would be a good idea to reduce the number of sketcher colours that have to be used. That way, it becomes easier to memorise what you are looking at.
Just running the colors through the accessibility tools I get ‘usable’ but not particularly great ratings. I think this is a best-case for the ‘classic’ color scheme, pending your feedback. I personally find these new colors at least easier on my eyes.
Ok, so just to highlight how the color problem is actually subtly complex look at the following screenshots, note the purple line for an external geometry reference, note the diameter annotation in various locations and compare when the 3d geometry from the pad is hidden. The grid has an impact as well.
Screenshot_2023-08-14_06-56-12.png
Screenshot_2023-08-14_06-55-37.png
Screenshot_2023-08-14_06-55-20.png
Screenshot_2023-08-14_06-54-40.png
Screenshot_2023-08-14_06-55-10.png
This all highlights very well the inherent problems with relying heavily on color to differentiate line types in sketcher. Also this may be an indication why you generally don’t see much use of color in sketches with other CAD software. Note that in the screenshots I had adjusted the default color for 3d geometry as well because with a top down view the light was washing out everything. The grid colors also had to be adjusted to maintain contrast of the sketch elements.
