insights accessibility: high contrast (or other) color mode?

[Joelkw]

From a customer:

Howdy, does insights have a colorblind mode? Currently, we have to select colors form this palette, which is difficult to pick from to make several categories distinguishable.

Given these are Sourcegraph colors, is there more work that'd need to be done throughout the app as well? Does this comply with WCAG (but perhaps we should fix it anyway)?

/cc @Joelkw @felixfbecker @vovakulikov

[limitedmage]

We should make sure that in any page, color (hue) is not the only way to differentiate things. For example, a code insights chart may use color hue, color brightness, and markings/patterns to distinguish two different series. As long as this is the case, things should (mostly) work. The Chrome dev tools have ways to test pages to emulate different types of colorblindness.

If the colors that the user can choose are not easily distinguishable beyond the hue, then this is problematic.

Here's an example of what the code insights colors look like emulating protanopia:

[limitedmage]

Here's another example, again using protanopia. The first chart is very easily distinguished. The second one is harder, but can still be distinguished due to the difference in brightness. If would be even better if there were different patterns for the line or shapes for the dots.

And here's another one that is really hard to distinguish (protanopia on left, normal on right). This one definitely needs markings or a different color choice.

[felixfbecker]

I think we are in compliance with WCAG here. 1.4.1 Use of Color states that a sufficient technique is "Ensuring that information conveyed by color differences is also available in text". This is the case because you can hover over different series to see the name of the hovered series highlighted (and it will dim all other series while doing so, directly associating label and series).

We could think of using different shapes for the points of each series, but realistically there are really just 2 more clearly distinguishable shapes (square and triangle), but our charts can easily have 20 series (especially the capture groups insights), so it doesn't really solve the problem. I can't think of other graphing platforms that do this (e.g. Grafana doesn't). I think the legend-on-hover UX we have is really the best UX a generic graphing tool could provide here.

As for addressing specific colorblindness conditions, macOS has system-level support for mapping colors for certain conditions like protanopia that work very well with Code Insights from my testing. I don't know about Windows, but there are also browser extensions that do this. I think supporting the system-level support well makes more sense than adding color mapping modes at the feature level that users need to enable individually first.

We should also support CSS/system-level forced-colors mode (mostly commonly used for high contrast mode on Windows). I tested this once in the past (in Parallels on Windows) and there were some fixes that needed to be made, because the adaptations the browser does automatically don't support SVGs well. I have an old branch where I experimented with fixing it up, it didn't take a lot of work, just a few tweaks in some places.

[vovakulikov]

I agree with Felix's statement that this is probably a generic a11y issue (or even a feature request if we talk about forced colours mode) neither is the WCAG issue.

I think we could still add a tooltip with a colour name for the colour picker on the creation UI page.