Improve contrast to make visualizations easier to read

[geekygirldawn]

Right now, the 8knot visualizations have too little contrast to be easily readable, which would be even harder to read if used on some low quality projectors that we see at event venues.

Example:

• dark gray backgrounds with dark green titles aren't easy to read, and a lighter color title would be better.
• likewise, with the dark colored lines / bars. Even on a good computer screen, I really can't tell the difference between the green used for merged and the one used for closed, and they don't really stand out on the dark background.

Compare this with an image from CNCF devstats (probably not an ideal graph, but I had it handy)

• The very light gray title stands out against the very dark grey background
• The three colors of lines all stand out and are very different and can be easily distinguished from each other

This article has some good pointers on the importance of color contrast along with examples that might be helpful in understanding the problem: https://www.uxmatters.com/mt/archives/2007/01/applying-color-theory-to-digital-displays.php

There are also a number of contrast checker websites / apps available. For example: https://webaim.org/resources/contrastchecker/

There is also a contrast checker built into the Chrome inspect developer tool, and I can see that the current color scheme contrast ratio isn't great:

Also, John from Augur created a couple high contrast branches that need to be updated, but might provide some examples: https://github.com/oss-aspen/8knot/tree/color-experiment-2 https://github.com/oss-aspen/8knot/tree/color-experiment

[geekygirldawn]

cc: @sgoggins @JamesKunstle @cdolfi

[cdolfi]

First easy change I see is changing the background of the graph to be "off black"

[cdolfi]

The color of the "open" line (#376D39) seems to be a good bright green color. Maybe that can be the new graph title color (or changing it to just be white)

[cdolfi]

@geekygirldawn how is the color of the graph axises text?

[cdolfi]

Thoughts on the "created" color (#B5B682)? Trying to get a bit of a gauge on what is "bright" enough or not

[JamesKunstle]

@cdolfi I think we should start at square 1 and reevaluate our whole color palette. I've gotten some 3rd party feedback that the overall color scheme is too washed out and "sandy" looking. John recommended a palette with subtle background and foreground colors, but really bright contrasting colors for analysis.

I'm hoping John has the bandwidth to integrate his previous recommended palette via a PR- I remember it looked great.

[cdolfi]

@JamesKunstle Sounds good, curious to see Johns. We will just need to talk through how this impacts the overall "theme" of the project. Visibility is definitely the most important but I do think there is a way to have both. Thats why I am trying to understand whats visually "working" and not, even if we dont end up using the exact colors

[geekygirldawn]

I agree with @JamesKunstle that it might be better to reevaluate the whole color palette. I suspect that it's early enough in the project to adjust the overall theme of 8Knot to be consistent with changes that make the graphs easier for people to read and more accessible to people with vision impairments.

As for @cdolfi's question about what works. The light gray text for the axis, legend, dates, etc. works, but even that should probably have a bit more contrast to make it easier to read.

Maybe a good next step would be to create a few mockups or prototypes with different color schemes that we could post in some CHAOSS channels for feedback. In particular, the CHAOSS Africa group has quite a few designers who would probably have better feedback.

[cdolfi]

@geekygirldawn a recent pr #493 applied much of the request changes to make it (hopefully) more legible. Once it gets push to main and our hosted instance it would be great to get some feedback

[cdolfi]

I feel comfortable closing this as @geekygirldawn audit did not specify any color feedback. Will continue to improve color styling as feedback comes