Partial-coverage and full-coverage default colors are indistinguishable for color-blind users
Closed this issue · 10 comments
Describe the bug
At least when using a light VSCode theme (I haven't checked with dark themes), the default color choices for partial coverage and full coverage (yellow and green, respectively) are indistinguishable for some users with red/green colorblindness (which affects 4-8% of men on average).
To Reproduce
Steps to reproduce the behaviour:
- Be born (reborn?) with red/green color-blindness
- Wonder why the text output of your code-coverage tool is reporting partial coverage on a particular file, yet Coverage Gutters is reporting full coverage
- Get really close to your monitor while staring at the offending file, and notice there's one line of code where the green block in the gutter looks slightly offset from the green block on the line above it (by less than a pixel)
- Get even closer to your monitor and realize it's not green at all, but yellow
Expected behaviour
I expected to be able to easily distinguish lines with partial coverage from lines with full coverage, without having to tweak settings.
Screenshots
I'd post a screenshot but I'm afraid it wouldn't help unless you also have the right hardware to look at the screenshot on your monitor... ;)
Desktop (please complete the following information):
- OS: any
- Extension Version: 2.8.0
- VSCode Version: any
Additional context
There are a lot of good resources on the Internet to help you choose colors that are accessible to people with color-blindness, here are a few references:
- https://venngage.com/blog/color-blind-friendly-palette/
- https://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/
But to summarize very briefly, you should:
- Vary the overall brightness of each color so even totally colorblind users can tell the difference in contrast alone
- For red/green colorblindess (which is most common), consider adding a bit of blue into the green color and making the red darker (or lighter, in dark mode) to differentiate them from the yellow
I ended up being able to work around this by turning on line coverage and adjusting the colors for the line coverage in settings (those settings don't affect the gutters though, see #331).
Here are the colors I ended up choosing. I ended up reducing the alpha channel because otherwise they were pretty bright/distracting (and interfered with coloration when looking at coverage together with diffs). They look good and are distinguishable to me but I have no idea if they will work for anyone else:
- No Highlight Light:
rgba(255, 0, 0, 0.2) - Partial Highlight Light:
rgba(255, 235, 0, 0.2) - Highlight[ Light]:
rgba(0, 255, 64, 0.2)
As discussed above, the green has a bit of blue added to distinguish it from the other two (which don't), and yellow is significantly brighter than red so they can be distinguished by contrast.
But again, please consider changing the defaults so they're usable by everyone. I hope the above examples help.
@josh-berry Thanks so much for submitting this ticket! I definitely want the defaults to be as useable by as many people as possible so I will work on adding the colours you defined above to the extension for the next release.
I will also need to add some dark variations to the 3 you defined above and I will hopefully get you to confirm that they are also distinguishable 👍🏻 .
Thanks—really appreciate it, and would be happy to take a look once you've got some dark variations picked out. 😄
@josh-berry here is this PR running in light / dark mode for you to take a look 🤔 .
I made the svgs just the colours you mentioned but with no transparency (I simple converted the rgba to hex).
#336
We probably need to tone down the SVGs similar to how we did with the current ones 🤔 .
Here is the current colours for reference.
The light theme looks perfect!
For the dark theme, I think you can split the difference on opacity; I played around more with the colors on my own system and 0.4 seemed about right. I think 0.2 was a little too faint. The green and the yellow were also still a little too close together (I think it gets harder to tell them apart in darker situations but everyone's different so 🤷).
What do you think of these?
- Highlight Dark:
rgba(0, 122, 30, 0.4) - Partial Highlight Dark:
rgba(163, 149, 0, 0.4) - No Highlight Dark:
rgba(163, 0, 0, 0.4)
@josh-berry Those look great! I also found a way to do transparency in SVGs, so I made them match what we had here.
https://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha/6042577#6042577
Let me know what you think!
Awesome, I love it! Thanks for taking the time to adjust the colors, and for all your work on this extension. Really appreciate it!
@josh-berry No problem, thanks for advocating for accessibility and pushing for developers to be more aware!