Enhancement genhtml : Increase contrast of text (a11y)

[IzawGithub]

Report produced by genhtml can have a low contrast. This is mainly noticeable when using the --dark-mode option, where tableHead text is black on grayish blue, which gives a poor WCAG contrast of 2,46 . This makes text hard to read, especially if one has vision problem.

This issue does not only affect the dark-mode table header, as another notable contrast issue is the light-mode visited link, with a contrast ratio of 1,75 . There are probably more place that I missed where the contrast is subpar, or could be improved for better readability.

Here is a quick demo of a possible improvement.

Light-mode

Dark-mode

I do not know Perl, nor do I know how to build the project, so I cannot create a pull request to implement this change.

[henry2cox]

I think you can override the default CSS to modify the colors if you like - though it may be that there are some hard-coded attributes that need to be fixed. I also think I'm one of the people whose eyesight is not good enough...because I can't see the difference between the two 'light mode' examples. :-(

I'm not a GUI person - so have no feel for what a good color scheme would be. Happy to listen to suggestions, though. Current TOT has been quite extensively rewritten - and is using more colors in more places (for example, for differential categorization)...but is also very likely using poorly chosen colors. To see those and comment, you would need to download from github though.

If you thought you would like to try, then directions are in the README. Easiest is to just clone the repo, cd to the top-level directory of your clone, and type "make test". Then open your brower to .../tests/gendiffcov/simple/differential/index.html - and click around, making notes about color choices and other GUI issues that you like/don't like. Also see some of the other HtML reports which may be using different options and/or additional features.

[IzawGithub]

Hello, thanks for the quick response! I'll document what are some of the css class that need better contrast, and I'll try to make a pull request with some more readable color.

Keep in mind that I opened an issue instead of a pull request, because my UI design skill are also quite lackluster. The best I can do is a color wheel and changing until the contrast is better 😅

[henry2cox]

If we are making changes, it would be good idea to pass suggestions by someone with red/green and blue/yellow color blindness. Of the two: red/green is considerably more common.

If you or somebody else was interested enough to suggest a full palette for those individuals, it would be pretty easy to add an option to the tool so that the user could select the one that works best for them (assuming they didn't want to override the CSS).

[IzawGithub]

Hello. Regarding color blindness, a possible solution would be the introduction of an --high-contrast mode to genhtml, that would turn all color to only shades of gray. This has the advantage of fixing every existing sort of color blindness, while also improving readability for user preferring usability over style.

I will work on contrast for the existing style during this weekend.

[henry2cox]

greyscale is a good idea. Had not thought of that. I think we would have to limit the number of levels that we try to use, though (not try for all 12 differential categories). I suspect that you would need pretty good visual acuity to distinguish more than 6 or 8 levels (...somebody has definitely studied that).

[hramrach]

There is also the simulator https://www.color-blindness.com/coblis-color-blindness-simulator/

Not sure how realistic it is. Nonetheless, the grayscale view has most problems, and is indeed unreadable because of low contrast.