Color blindness support

[thomascastleman]

This begins to address #382 by extending themes to support control over font styling and other non-color aspects of the editor that can be used to create contrast where only color is being used currently. It may also address #326.

There are a few changes:

• I eliminated the distinction between the default theme (Ensign) and all the other themes--default was relying on certain styling in editor.css that was being overriden by all other themes. Now, all the themes truly are controlling the same styles and there's no need for special overrides.
• I added theme variables for controlling non-color font-styling on Pyret tokens (see src/web/css/themes/README.md for more info), so we can now do things like make all types bold, etc.
• I added a new theme, High Contrast Light, which is a prototype of using these new features to make elements of the syntax highlighting/editor more visible to color-blindness/low contrast.

Here are some screenshots of the new high contrast theme to show what kinds of things can be styled with these changes:

Comparison

The check block colors may seem like a striking difference but they were chosen to increase color contrast for various colorblindness types. See the below comparison (colorblindness simulated with the Spectrum Chrome extension).

	Ensign	High Contrast Light
Protanopia
Deuteranopia
Tritanopia

Ultimately this is a work in progress and these are just the first ideas I had. I wanted to get feedback given the new changes to themes that allow us to style more aspects of the editor. I think it can be hard to tell what kind of font changes would be helpful vs. distracting.

[jpolitz]

Wow, this is terrific! I don't see a reason not to merge this sooner rather than later.

I could imagine finding a less Watermelon Sugar High palette that still works across the different constraints, but I don't know how to find it off the top of my head, and this is a real need.

[shriram]

Ditto. This is amazing!

[thomascastleman]

Good to hear! I've made a few updates:

• I changed the green color for check success into a light blue color which does an even better job of providing color contrast between the failing/erroring colors. If anyone is strongly opposed to using a blue for success, I could change it back but it really does a good job of contrasting:

	High Contrast Light (with blue)
Normal
Protanopia
Deuteranopia
Tritanopia

• I also added a High Contrast Dark theme, which applies many of the same contrasting colors and non-color font styling as High Contrast Light, but is a dark theme. Here are some samples:

  
  

  It uses the same blue color to provide good contrast in check block results.

Let me know what you think!

[blerner]

I think the white-on-pink text for "some tests in this block may not have run" might fall afoul of minimum contrast standards (because the background is too bright) -- worth double checking. Actually, in most of those screenshots, the white text is hard to read, and black would be better.

Possibly-useful tip: Firefox's developer tools has an Accessibility tab that will let you simulate these color-deficiencies as well, and also will check for contrast issues. Not sure if the Spectrum extension can do the latter, or if Chrome has contrast-checking tools for you to use...

[thomascastleman]

Oh nice, I didn't know Firefox had that built-in--thanks!

Using the Firefox checker for contrast issues, it didn't seem to flag any violations for the white-on-pink, but I agree it seems to be cutting it close. I changed both themes to use black text there and here's what it looks like under low-contrast simulation:

[thomascastleman]

@blerner @jpolitz I've made Ben's updates--is there anything else you all would like to see changed? If not, do you think it's ready to release with the summer update? Thanks!

[blerner]

One more bit of feedback, from one of our color-vision-impaired teachers:

I can easily distinguish almost all the colors in both themes. I like them a lot. The conditionals in the light theme (lines 8 and 9) are basically black to me. In the dark theme they look great. In the dark theme, the two floats at the end of line 31 look the same to me, but they look different in the light theme. Otherwise, I find all the colors much much more helpful. And I love the feedback table colors.

I clarified further: the exact-nums on lines 8,9 are a bit dark and read mostly as black, as compared to the roughnums on lines 30,31. And the booleans on lines 8,9 are too dark a red and are seen mostly as black. The request is to brighten up the red of the booleans, and to tweak the colors of numbers: exactnums should be blue hsl(240, 100%, 39%) (which is the current roughnum color), and roughnums should be hsl(200, 80%, 40%) (which is between roughnums' color and strings' color hsl(164, 100%, 31%)) -- I've confirmed with the teacher that those proposed colors are distinguishable from each other and from strings.

[jpolitz]

Re: summer update – I think this will actually be nice to release separately. It's also low-risk (whereas the summer update was risky; lots of stuff affected).

It's also a nice, separate thing to announce on our road to better accessibility. So I think we can put this out at any time once we're satisfied (and we seem to be a commit or two away from that).

[thomascastleman]

Sounds good, that makes sense.

@blerner Here are booleans adjusted to be brighter:

and the number color changes applied to the light theme:

Are the number changes intended for the dark theme as well? Applying them yields quite dark exact nums which I find a bit hard to read against the background:

I can get something more readable by boosting the lightness on each to about 70%:

and it still seems to maintain pretty good contrast.

[thomascastleman]

If it would help, we could also add some non-color styling to rough-nums, like underline/italics/bold if that would help the distinction be unmissable.

[blerner]

No, the teacher's comments were specifically about the light theme; the colors you originally had in the dark theme were pretty good. I might separate the hues of the two original dark-theme number colors you'd had, making one of them greener like we just did with the light theme.

[thomascastleman]

Here's the dark theme with a more green roughnum color:

[jpolitz]

LGTM!

[blerner]

Can we lift this up to main and get it deployed?

[jpolitz]

Wanted to note that this is on production now!