Full Colorblindness Support

[manfromjupyter]

Purpose: Fully support all users with a colorblindness disabilities on JupyterLab. Various themes do support them, but the Out-of-the-box product needs to also be compliant to WCAG 2.0+ for it to be compliant. Also because original highlight from #9399 was too confusing in terms of locations, didn't contain screenshots, and was missing a couple other problem areas.
Screenshots: https://imgur.com/a/JuZRMMK
Derivative from: #9399
Required Skills: Purely CSS
Recommended Tools: Tota11y Bookmarklet as shown in my screenshots

Todo

1. Various notebook editor syntax highlighting fixes detailed and noted in screenshots and in descriptions of each image in Imgur link.
2. Couple panel contrast issues that are detailed in noted in screenshots and in descriptions of each image in Imgur link.
3. Enabling line numbers on notebook cells produces a gray colored line numbers that are not dark enough. Detailed in screenshot on Imgur.
4. ALL disabled header subdropdowns are grayed out but it's too light. Need to either make them darker to the color recommended rgba(0, 0, 0, .89) or need to find another solution (i.e. make non-disabled elements bold instead, make disabled italics, make all of the text bigger (3.0 contrast ratio is all that is needed not 4.5:1 after font reaches 18pt OR 14pt and bold)). Example of issue with disabled elements in header dropdowns shown in a screenshot at the Imgur link.

OPTIONAL: Notebook editor icons on click and hold only have a 4.4:1 contrast ratio and need to either have icons changes to #595959 color for the darkest part of it icon OR set background to lighter color: #d8dde3 instead of what I guess is #d5dadf. Same probably also applies to File Browser panel icons at the top of the panel.

Not Included

• Various corrections needed with each theme if we wanted to make those supported as well. For now that is beyond the scope of this ticket and what is needed for compliance.
• Debugger panel if it has issues. I didn't check it because I don't have it on my JLab environment yet.

[isabela-pf]

I'm reviewing all these screenshots as I'm going to start working on my next color contrast PR. I'm relatively confident I can make changes in most of the UI, but I will have to explore what is needed to make changes where the code editor is involved. That's an area I've never worked in before, and I don't know how much is configured in JupyterLab versus is the default of the editor and syntax highlighting theme. I'll give it my best go!

Thanks (as always) for the descriptive and specific issue!

[krassowski]

For anyone who would like to work on this, I wanted to highlight a tool in the Chrome Developer Tools. If you go to Rendering tab (which is hidden by default) you can enable emulation of vision deficiencies, including blurred vision and various kind of colorblindness (see GIF below). This may be also helpful for awareness events for developers, e.g. saying let's enable this mode and see how it feels (I remember we talked about something like this for in context of no-mouse days @isabela-pf @tonyfast).