color contrast issues

[pkra]

While working on w3c/aria#2410 I found some contrast issues that can also be observed on https://respec.org/docs/.

• TOC
  • light & dark mode: "Tables of Content" has insufficient contrast (due to var(--tocsidebar-heading-text))
  • dark mode: .toc code {#005a9c} leads to insufficient contrast
• highlight.js: in dark mode, the color theme causes contrast issues in most code snippets, in particular html.
• WebIDL: in light mode, "WebIDL" has insufficient contrast (.idlHeader { color: var(--defrow-border,#fff)})

I'll update this issue if I find more.

[sidvishnoi]

Apart from syntax highlighting (part of ReSpec), we'd need to file above in w3c/tr-design repo, as same colors get used by Bikeshed too (base.css).

I'll try finding some time this weekend to address this. Happy to review PRs though.

[pkra]

Thanks @sidvishnoi.

Is there a way to configure the highlight.js theme in the respec configuration? It offers some themes with better contrast.

[SamB]

Hmm. The dark mode PR (#3236) said this:

This gives a "good enough" support for dark mode. Not all styles are perfected yet.
And some styles can't be overridden by the manual theme toggle (they only respect @media (prefers-color-scheme: dark) {...}).
I've tried to use W3C stylesheets's CSS variables wherever possible to avoid this, but at least styles for code syntax highlighting (including WebIDL), and definition panel aren't supported in that theme, so they won't fully respect the manual theme toggle.

Apparently relating to the following blocks of code:

respec/src/styles/highlight.css.js

Lines 27 to 43 in 19b2c0e

	/* There's no way to adapt this to "manual" theme toggle yet. */
	@media (prefers-color-scheme: dark) {
	.hljs {
	--base: #282c34;
	--mono-1: #abb2bf;
	--mono-2: #818896;
	--mono-3: #5c6370;
	--hue-1: #56b6c2;
	--hue-2: #61aeee;
	--hue-3: #c678dd;
	--hue-4: #98c379;
	--hue-5: #e06c75;
	--hue-5-2: #be5046;
	--hue-6: #d19a66;
	--hue-6-2: #e6c07b;
	}
	}

respec/src/styles/algorithms.css.js

Lines 24 to 31 in 19b2c0e

	/* There's no way to adapt this to "manual" theme toggle yet. */
	@media (prefers-color-scheme: dark) {
	:root {
	--assertion-border: #444;
	--assertion-bg: var(--borderedblock-bg);
	--assertion-text: var(--text);
	}
	}

It seems that the issue is that https://github.com/w3c/tr-design/blob/gh-pages/src/fixup.js can disable W3C's dark-mode stylesheet but nobody else's.

#4687 is basically about how to handle it here, w3c/tr-design#349 was about having fixup.js set a global class, but that (afaik) won't ultimately work for viewing a pre-processed spec with JavaScript turned off. I filed w3c/tr-design#363 requesting an explanation of how to use the feature.