The current diffing color scheme is color blind unfriendly

[Job]

So @mootari was so kind to send me a bug-fix for my notebook, and it made me realize that I cannot distinguish the diff colors from the background colors. I have protanomally, a slightly less common form of color blindness. I use an add-on that let’s me Daltonize the screen and also simulate CVD so I can “simulate” my experience for you:

(the add-on is called Let’s Get Colorblind! and there’s both a Chrome and a Firefox version: https://chrome.google.com/webstore/detail/lets-get-color-blind/bkdgdianpkfahpkmphgehigalpighjck Let's get color blind – Get this Extension for 🦊 Firefox (en-US) )

I think if it could be tweaked to have both color and lightness contrast it would already help a great deal

[jashkenas]

Thanks for letting us know, @Job!

I myself have mild Deuteranomaly, and — at the time we designed it — had hoped that our color choices in the diff were strong enough to work for pretty much everyone.

We’ll fix it.

As a point of pure curiosity, I tend to find that many of the software colorblindness “simulators” produce extreme results that aren’t anywhere near what I see. Do you feel like the screenshot above accurately reflects what you see on the compare page?

And are there any other areas of the Observable application where the colors have felt too tricky?

[Job]

Thanks @jashkenas!

@jashkenas

As a point of pure curiosity, I tend to find that many of the software colorblindness “simulators” produce extreme results that aren’t anywhere near what I see. Do you feel like the screenshot above accurately reflects what you see on the compare page?

While I share your experience with disappointing simulators in general, in this case it’s pretty close - like 90%. My turn for a curiosity question: do you also feel that redshift modes on phones and computers sometimes make things worse, and sometimes make things easier to see?

@jashkenas

I (…) had hoped that our color choices in the diff were strong enough to work for pretty much everyone.

Don’t be too hard on yourself - it’s really tough getting a scheme that works well for everyone with all the variations out there. That’s one thing the simulators are good for though: they often do convey the lack of contrast pretty well and the graphic designer gets to iterate quickly without the slow “is this better?” → “nope” feedback cycle of asking That One Colorblind Guy In The Office after trying to design something new.

[Job]

@jashkenas

And are there any other areas of the Observable application where the colors have felt too tricky?

Not really. I mean, the syntax highlighting is probably more subtle for me than for most I guess, but that’s not as essential as with diffing.

[kerryrodden]

Hi @Job, we’ve changed the diff view so that it now has a white background instead of light grey, for example:

Comparing ‘Bubble Map’ by D3 to ‘U.S. Population by State, 1790–1990’ by Mike...

How does that look to you?

thanks
Kerry

[Job]

It helps for sure! And the highlighting makes a difference too, I don’t see that in the old screenshots.

The red and green backgrounds are still quite subtle to distinguish, so for larger, more complicated diffs it requires more active attention to determine where the - stops and the + starts. I can also imagine that you don’t really want those to have significant difference in lightness contrast. Maybe making the - and + bold and with a bit higher contrast would help there?

[kerryrodden]

Glad it helps! We’ve been reconsidering the red and green shades as well, but that’s a good suggestion about the - and + - thanks!

[cornhundred]

Hi @kerryrodden, GitHub’s color scheme is a little better but the pale red/green in general is difficult to see. Maybe light green could be replaced with light blue?