Color blind mode for playground?

[slimsag]

Heyo! I was trying to use the tree-sitter playground "query" option, and legitimately 100% thought it might be broken in Firefox, or something like that. I would enter a valid query, but there wasn't any output anywhere, it didn't highlight the matching text, or anything like that:

After chatting with coworkers, apparently it does work and package and golang are highlighted.. I just can't see it 😅 The light-text on light-background is unnoticeable for me (granted, I have quite bad color-blindness compared to most people with it!)

I have found that the playground uses CodeMirror for the rendering, I am wondering how hard it'd be to add a "colorblind" checkbox to the page & change the color: foo CSS to be background-color: foo; color: white; so that it ends up like this:

No worries if there's no time to do this, I can workaround it by playing with queries in Go instead. Just thought it was worth filing.

[maxbrunsfeld]

I'd definitely like to make the playground useable for folks with colorblindness. I think we could just change the behavior across the board, instead of introducing a mode.

My only concern about the background color solution is that it could be confused with the editor's selection (which is also a background highlight). But maybe it would be clear enough. Are the different colors more easily distinguishable from one another when they appear in the background, rather than as the text? Also, are there changes we could make to the color palette itself that would help? What about some kind of border or underline; would that improve things in any way?

[slimsag]

Makes sense! I hadn't thought about selection.

A border would definitely work. An underline would definitely work, too. Those would give me visual markers aside from the color.

Color palette changes might work for some, but definitely wouldn't help me much. I think in general "how do we pick the right colors for colorblind people" is the wrong question, of course I can only speak for myself, but I think many colorblind people's brains are just not wired to look at colors for visual cues. If it's a big solid color (like background color on text), I can pick that out well - but when it's a thin line (like color on text), very hard to notice. With colored text, easiest way I have to describe it is: imagine the color either falls on ">50% darkness" or "<50% darkness", and making the color solid white/black depending on that. Only once someone points out there's something there & I zoom in so it's larger do I actually notice, oh wow, yeah, those do have colors!

If a 1px solid dark border or something wouldn't be too bad for others, that'd be my personal preference!

[maxbrunsfeld]

Cool, well if you or anyone wants to play around with the visual appearance of the editor, I'd be open to a PR that makes the matches more noticeable in a variety of ways. The underline thing seems like a pretty non-disruptive addition.

[archywillhe]

hmm do I have color blind or is it not working?

[cameronelliott]

I also had this same issue, even though I am NOT color blind.

The colors are super subtle, and it took finding and reading this issue and #2518 to actually see when the highlighting is/was occurring.

A bold loud color choice for the highlighting would really help make the query feature stand out for other newish users like myself.