Tweak colour contrast

[hidde]

Building on this PR for the dev edition, this PR updates some colours in the regular spec layout to help meet WCAG.

I have tried to find all instances of these colours in the repo to try and update them all (except for the mailing list entries and temporary files).

This updates colour contrast of:

• orangered on white, changing to #d5430c (sorry, I could not find named colour), improving contrast from 3.44 : 1 to 4.91 : 1
• gray backgrounds in notes and MDN annotation from #EEE to #f5f5f5, consistent with update in dev edition, bumping contrast from 4.19 : 1 to 4.54 : 1 / 4.8 : 1 (MDN annotation)

[annevk]

Thank you for tackling this! Does this resolve #262 in its entirety or is it just a start?

I wonder if we should document these colors somewhere now they're less memorable, but copy-and-paste is probably good enough for now.

Optional nit: use consistent casing for hex digits.

https://github.com/whatwg/blog.whatwg.org/blob/main/org.whatwg.awesome/style.css also needs to be patched.

[hidde]

Thanks for the quick reply! Have fixed the casing and found one more combination I missed (warnings; thanks, Steve). I believe with that, this PR fixes the colour issues in the specs, with the exception of syntax highlighting.

I planned to do a separate PR for syntax colours, I wonder if that should be in https://github.com/tabatkins/highlighter/blob/master/highlighter/styles.py though? Or even in Bikeshed? I am not super familiar with either, but would suggest we use the colours from a11y-syntax-highlighting, which is a set of matching colours that meet WCAG.

Would be happy to also submit a PR for the blog (it seems to be down at the moment?), and maybe also for a page that lists the colours somewhere, not sure where is a good location for that?

[annevk]

For highlight: I think tabatkins/highlighter makes sense (cc @tabatkins) and if you update that I suspect Bikeshed will inherit those fixes. For WHATWG we have a copy of those rules in resources.whatwg.org/standard-shared-with-dev.css so that would have to be updated as well.

Blog: yeah, the hosting situation is not ideal at the moment: whatwg/misc-server#163. When it is up however it does use similar styles to the website and specifications so probably needs some adjusting too.

Listing colors: I think it would make some sense to put these on https://whatwg.org/style-guide if we wanted to document them. Not a 100% sure though. Perhaps we should leave this for now. @domenic thoughts?

[domenic]

Listing colors: I think it would make some sense to put these on https://whatwg.org/style-guide if we wanted to document them. Not a 100% sure though. Perhaps we should leave this for now. @domenic thoughts?

I think we can leave it out for now. In the future we should consider consolidating things into CSS variables, maybe a shared style sheet of some sorts, etc. But adding another location to keep in sync seems slightly counterproductive.

[tabatkins]

For highlight: I think tabatkins/highlighter makes sense (cc @tabatkins) and if you update that I suspect Bikeshed will inherit those fixes.

The inheritance won't be automatic, but yes, I'll keep them in sync. Happy to have a discussion about colors used; I just grabbed the palette I liked from https://prismjs.com/. Please open an issue!

[hidde]

Thanks @tabatkins, I have opened tabatkins/highlighter#25.

[annevk]

I undid the changes to whatwg.org/style/specification as it shouldn't be used anymore and I rather not change historical files. I'll also create a PR for content-venn.svg against the whatwg/html repository to match this change here.

[annevk]

@hidde thanks for catching those additional red cases, it's much appreciated!

[hidde]

Thanks, that makes sense! Thanks also for the content-venn change, had missed it was also in whatwg/html.

Appreciate the quick responses on this PR, will be in touch for the syntax highlight changes!