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)

[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: https://github.com/whatwg/misc-server/issues/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 https://github.com/tabatkins/highlighter/issues/25.

[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!