Improve accessibility of License List website for colour-blind readers

[seabass-labrax]

Currently the SPDX License List website shows "omitable text in blue and replaceable text in red". Although these colours have good contrast when compared to the website's background, some colour-blind readers may be unable to distinguish the colours from and each other and normal text.

It would be beneficial to add additional markers, such as displaying optional (omitable) text in italics and replaceable text in bold.

[seabass-labrax]

Example screenshot for those not familiar with the website as it is now:

[jlovejoy]

I'm marking this as a technical issue as I think this would be implemented in the license-list-publisher tool (there are some styles to get the red or blue text currently). Something to discuss with @goneall

[goneall]

I'm marking this as a technical issue as I think this would be implemented in the license-list-publisher tool (there are some styles to get the red or blue text currently). Something to discuss with @goneall

Agree - I'm going to transfer to the license list publisher

@seabass-labrax - Depending on the extent of the changes, this could be an update to the templates in the template folder. I recall a similar request, but I couldn't find it with a quick search of the issues and PR's in the LicenseListPublisher repo.

[goneall]

@seabass-labrax @jlovejoy Any volunteers to contribute changes to the template file to fix this? If not, I'll close this issue.

[jlovejoy]

did I do the HTML or CSS or something for the blue red text way back when? I can't remember how we implemented that, but @goneall - if you can point me to the file, maybe I can (re)remember?

@seabass-labrax - I'm thinking maybe italics and underline? Seems like bold might imply emphasis in the wrong way (gut thought). Are you also thinking that we keep the same colors and add the italics/underline in addition?

[goneall]

did I do the HTML or CSS or something for the blue red text way back when? I can't remember how we implemented that, but @goneall - if you can point me to the file, maybe I can (re)remember?

@jlovejoy Here's where all the HTML templates and style sheets reside: https://github.com/spdx/LicenseListPublisher/tree/master/resources

[richardfontana]

@seabass-labrax - I'm thinking maybe italics and underline? Seems like bold might imply emphasis in the wrong way (gut thought). Are you also thinking that we keep the same colors and add the italics/underline in addition?

Why not use some sort of bracket delimiters (several possibilities: << >>, {}, [] ...) and define what they mean? Italics may not be ideal as they are often (IME) hard to discern in web-displayed text. Brackets also have the advantage of being suitable for a plain text rendition.

[jlovejoy]

ok, so finally looking into the css that does this. Currently the replaceable text is red and italics (I'm actually not sure where the italics is coming from) and the optional text is blue.

I'm going to retract my idea of underlining, as that might be harder to read especially for a large block of text - unless maybe we did:

• optional = blue italics
• replaceable = red underline
  Would it also maybe help to use a different color? As I understand it, color blindness usually impacts greens and reds. Maybe we could change one of the colors?
  Is there anyone who might know more about this, I found this site which was helpful but seems to show that the red and blue are differentiated https://www.colourblindawareness.org/colour-blindness/