search

ryanluker / vscode-coverage-gutters

Display test coverage generated by lcov and xml - works with many languages
https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters
MIT License
460 stars 88 forks source link

Partial-coverage and full-coverage default colors are indistinguishable for color-blind users #330

Closed josh-berry closed 3 years ago

josh-berry commented 3 years ago

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:

  1. Be born (reborn?) with red/green color-blindness
  2. 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
  3. 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)
  4. 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):

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:

But to summarize very briefly, you should:

josh-berry commented 3 years ago

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:

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.

ryanluker commented 3 years ago

@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 👍🏻 .

josh-berry commented 3 years ago

Thanks—really appreciate it, and would be happy to take a look once you've got some dark variations picked out. 😄

ryanluker commented 3 years ago

@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). https://github.com/ryanluker/vscode-coverage-gutters/pull/336

Screenshot 2021-07-25 150100 Screenshot 2021-07-25 150153

We probably need to tone down the SVGs similar to how we did with the current ones 🤔 .

ryanluker commented 3 years ago

Here is the current colours for reference. Screenshot 2021-07-25 150941 Screenshot 2021-07-25 151011

josh-berry commented 3 years ago

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?

ryanluker commented 3 years ago

@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 image image

Let me know what you think!

josh-berry commented 3 years ago

Awesome, I love it! Thanks for taking the time to adjust the colors, and for all your work on this extension. Really appreciate it!

ryanluker commented 3 years ago

@josh-berry No problem, thanks for advocating for accessibility and pushing for developers to be more aware!

ryanluker commented 3 years ago

https://github.com/ryanluker/vscode-coverage-gutters/pull/336 closes this issue