search

spyder-ide / ux-improvements

Discussion about UX improvements for Spyder 5 and beyond
4 stars 2 forks source link

Toolbar colors in light mode in Spyder 5 #42

Open gb119 opened 3 years ago

gb119 commented 3 years ago

Problem Description

There are some issues with toolbar colours when using Spyder 5.0.x in light mode: a) The toolbar background is inconsistent between panes and the main toolbar and sometimes within a pane (e.g. find pane):

image

b) The contrast on the buttons is much worse than in Spyder 4 (and I can't see how to change it) - this can be an accessibility issue as well as just being a little irritating... :-) cf. Spyder 4 below:

image

Dark mode is better for point (a) but still has issues for point (b). 5.0.1 overall much better than 5.0.0 through) :-)

What steps reproduce the problem?

  1. Switch Spyder to light mode in Preferences Appearance tab and restart (Spyder 3 icon set)
  2. Compare with Spyder 4

What is the expected output? What do you see instead?

I would have expected a consistent background colour to the toolbars in the panes and the main toolbar (and certainly not have buttons with a different background to the toolbar!). I would like to have a better contrast, or someway to adjust the contrast.

Versions

Dependencies


# Mandatory:
atomicwrites >=1.2.0          :  1.4.0 (OK)
chardet >=2.0.0               :  4.0.0 (OK)
cloudpickle >=0.5.0           :  1.6.0 (OK)
cookiecutter >=1.6.0          :  1.7.2 (OK)
diff_match_patch >=20181111   :  20200713 (OK)
intervaltree >=3.0.2          :  3.1.0 (OK)
IPython >=7.6.0               :  7.19.0 (OK)
jedi =0.17.2                  :  0.17.2 (OK)
jsonschema >=3.2.0            :  3.2.0 (OK)
keyring >=17.0.0              :  21.8.0 (OK)
nbconvert >=4.0               :  6.0.7 (OK)
numpydoc >=0.6.0              :  1.1.0 (OK)
paramiko >=2.4.0              :  2.7.2 (OK)
parso =0.7.0                  :  0.7.0 (OK)
pexpect >=4.4.0               :  4.8.0 (OK)
pickleshare >=0.4             :  0.7.5 (OK)
psutil >=5.3                  :  5.7.2 (OK)
pygments >=2.0                :  2.7.3 (OK)
pylint >=1.0                  :  2.6.0 (OK)
pyls >=0.36.2;<1.0.0          :  0.36.2 (OK)
pyls_black >=0.4.6            :  0.4.6 (OK)
pyls_spyder >=0.3.2           :  0.3.2 (OK)
qdarkstyle =3.0.2             :  3.0.2 (OK)
qstylizer >=0.1.10            :  0.1.10 (OK)
qtawesome >=1.0.2             :  1.0.2 (OK)
qtconsole >=5.0.3             :  5.0.3 (OK)
qtpy >=1.5.0                  :  1.9.0 (OK)
rtree >=0.8.3                 :  0.9.4 (OK)
setuptools >=39.0.0           :  51.0.0.post20201207 (OK)
sphinx >=0.6.6                :  3.4.2 (OK)
spyder_kernels >=2.0.1;<2.1.0 :  2.0.1 (OK)
textdistance >=4.2.0          :  4.2.1 (OK)
three_merge >=0.1.1           :  0.1.1 (OK)
watchdog >=0.10.3;<2.0.0      :  0.10.4 (OK)
zmq >=17                      :  20.0.0 (OK)

# Optional:
cython >=0.21                 :  0.29.21 (OK)
matplotlib >=2.0.0            :  3.3.2 (OK)
numpy >=1.7                   :  1.19.2 (OK)
pandas >=1.1.1                :  1.2.0 (OK)
scipy >=0.17.0                :  1.5.2 (OK)
sympy >=0.7.3                 :  1.7.1 (OK)
gb119 commented 3 years ago

Ok, realize that the button background is indicating state, so perhaps the underlying problem is the extent of the difference in background gray level between toolbar/on state and the pane/off state. I'm afraid it just looks ugly to my eyes in light mode! A less dark gray for the toolbar would solve both problems.

jnsebgosselin commented 3 years ago

I agree that the light green and blue icons are a little bit hard to see in the light mode. I guess my screen is making things worse since it has a matte display.

ccordoba12 commented 3 years ago

I'm going to move this one to our UX improvements repo because that's where it needs to belong.

ccordoba12 commented 3 years ago

A less dark gray for the toolbar would solve both problems.

This is a very subjective matter and I doubt there's something we can do about it because it affects a lot of other elements in the interface.

I agree that the light green and blue icons are a little bit hard to see in the light mode

This could be improved, I think.

ccordoba12 commented 3 years ago

Thoughts @isabela-pf?

jnsebgosselin commented 3 years ago

I agree that the light green and blue icons are a little bit hard to see in the light mode

This could be improved, I think.

For me, it is mostly the green triangle (Run File) that is really hard to see. The icons that are a mix of dark grey and green are not too bad (Run Current Cell, etc...).

The contrast for the blue icons (Debug File, Run Current Line, etc...) could be improved I think, but it is not to bad.

Overall, I like the design of the new icons a lot.

gb119 commented 3 years ago

A less dark gray for the toolbar would solve both problems.

This is a very subjective matter and I doubt there's something we can do about it because it affects a lot of other elements in the interface.

So design and colour schemes are subjective, but contrast actually isn't - there are well established ways of measuring contrast ratios and standards that can be applied.

w3c sets a standardin the form of WCAG 2.1 for accessibility in web pages. Broadly the recommendation is that text elements have a contrast ratio of 4.5:1 between foreground and background and graphical elements (icons etc) that are used for navigation have 3:1. These levels correspond to comfortable levels for people with 40:20 and 20:20 vision respectively - so we're not talking about very blind people here!

Using the screenshots above, GIMP and the first contrast checker I found on google (https://webaim.org/resources/contrastchecker/) I got:

The grey background/blue icons in Spyder 5 have a contrast ratio of 1.9:1 - so well below the recommended 3:1. The grey-green combo is worse at 1.33:1.

The Spyder 4 combo of lighter grey and darker blue achieves a contrast ratio of 4.3:1 in comparison, which is above the recommended 3:1 and the green on grey combo there is at 4.5:1

In Spyder 5 dark mode the contrast between background grey and blue is 2.57:1 and with the Spyder 2 Iconset the highlighting brings that to 4:1 (depending a bit where you pick the blue).

So in summary - for comfortable accessibility it goes:

Spyder 5 light mode (fails to meet 3:1) Spyder 5 dark mode/Spyder 3 icon set (failes to meeting 3:1, but better than light mode) Spyder 5 dark mode/Spyder 2 iconset (marginal - jighlights pass 3:1, buton not all foreground pixels do) Spyder 4 light mode (passes comfortably 3:1 and approaches the 4.5:1 for text)

isabela-pf commented 3 years ago

I can’t thank you enough for this specific feedback! Trying to keep up with the colors as we kept iterating was messy, so I was sure there were mistakes I’d need to address.

While I agree that having a lighter background for the main toolbar in light mode would solve a lot of problems, we had to go with something roughly this value to account for the different types of toolbars and their button states. It will take some reshuffling of colors or work on an alternate pressed state to have a lighter toolbar. I also think it’s worth reworking the blue and greens for icons regardless of how we solve the other contrast issues.

It’s now on my list to check contrast with these final colors, so thanks again!

gb119 commented 3 years ago

Thanks for taking this on board so positively - I just wish my University web design team were prepared to listen.... !

It’s now on my list to check contrast with these final colors, so thanks again!

Well with my slightly dodgy eyesight contrast checking comes enabled by default in the wet-ware...

isabela-pf commented 3 years ago

I’ve started working on ideas for changes in the toolbar, most specifically around the icons. This is an area that (as has been kindly pointed out) has several issues and can easily inhibit users since so many major functions live in the main toolbar.

At the moment, my goal is to adjust icon colors with the existing background and state colors on the toolbars. The toolbar colors are used throughout the rest of the interface, so changing them will have impact in several other areas as well. I’m think adjusting icons will make them much more usable while scoping the problem so we can resolve it more quickly.

(To be clear, I’m determining pass/fail based on the non-text contrast ratio of 3:1. I’ve also added a file icon in every normal icon color before the colored ones to provide an easy comparison.)

Active icons on main toolbar backgrounds:

Pass in both light and dark mode as-is! No change needed.

Disabled icons on main toolbar backgrounds:

Fail. Right now they are determined by 50% transparency of the main icon color. Upping this to at least 65% gets us to passing in light and dark modes. This should also work since disabled buttons cannot have press or hover states that would lower the contrast.

65% looks like

65% dark 65% light

The colors are the part I’m most struggling to work out. I thought it was still worth sharing since some parts are working.

Green in dark mode

Current color is Green b70.

Changing it to Green b80 makes it so that only the pressed state fails. Green b90 passes all, so that would be ideal.

Green b80 looks like

Green b80

Green b90 looks like

Green b90

Blue in dark mode

Current color is Blue b70.

Changing it to Blue b80 only passes the normal state. Blue b90 only fails the pressed state. Any higher and the icons fail to look blue.

Blue b80 looks like

Blue b80

Blue b90 looks like

Blue b90

Green in light mode

This is where I start to have the most problems. The light mode’s grey toolbar is middle range enough that I am not getting sufficient contrast even with the darker colors.

Current color is Green b70.

The lightest green that passes for the normal state with this background is Green b30. Even so, the other two states fail.

Green b30 looks like

Green b30

Blue in light mode

Current color is Blue b70.

The lightest blue to pass for the normal state is Blue b50, but this fails the other two states. Blue b40 fails only the pressed state. Blue b30 passes all, but is almost indistinguishable from the grey in my opinion.

Blue b50 looks like

Blue b50

Blue b40 looks like

Blue b40

Blue b30 looks like

Blue b30

With this, I think it might be best to adjust the background greys used in the light toolbar. I’m worried about what other areas of the UI it might affect since this color is shared, but I haven’t found sufficient contrast for any of these other options in light mode.

isabela-pf commented 3 years ago

After the last review, the team is satisfied with the above options for

Which leaves us with a few more experiments for the green in light mode options. This color will be tough since the yellow that green has (compared to blue icons) makes it lighter by nature.

Green in light mode

Once again, here is green b30 as it is now. This is the lightest green of the current color scale to pass 3:1 contrast.

g30

Working down from b40, I also experimented with greens in the same shade that are not currently a part of the color family but could be switched out for one of the existing colors. b40 is 2.8:1 contrast, which will not work. This is the lightest green I found based on b40 that does have successful 3:1 contrast.

(They are very close in color. This version is just barely more saturated).

newgreen

Finally, I worked with a series of cooler greens to minimize the amount of yellow. Even though this allows the icons to be marginally brighter, I wouldn't recommend this idea since I think it looks too close to the blue family and won't fit will in the green scale overall.

newbluegreen
isabela-pf commented 3 years ago

Another round of review determined green in light mode will be green b30 until we adjust the light toolbar to be less dark. Hooray!

I'll get this in PR form and link it here.

ccordoba12 commented 8 months ago

This was partially addressed in https://github.com/ColinDuquesnoy/QDarkStyleSheet/pull/335.