Contrast of Code Examples, Dark Mode

MDN URL

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

What specific section or headline is this issue about?

This is about the site wide CSS for dark-mode code colors

What information was incorrect, unhelpful, or incomplete?

First, thank you so very much for adding a native dark mode!!! the level of my impaired vision makes light mode difficult, and the available plugins are not as ideal as a native scheme.

That said, there is one little bit of errata in the form of CSS color variables.

The code coloring in dark mode has punctuation as too low of a contrast:

I didn’t see the periods in-between the object name and property. And while the other punctuation is more visible, there really isn’t enough contrast.

Note: just as an FYI, WCAG 2 contrast math does not correctly calculate contrast for dark mode, though there are other contrast metrics that do. Lc, aka perceptual lightness contrast is the value I’ll use here as it calculates dark-mode.

The punctuation color is currently at #9e9e9e, and against that #343434 background, is Lc -43.7 (the minus sign indicates dark mode, aka negative polarity). Ideally, for smaller fonts that are content that should be readable, we want to see Lc 60 or more, so changing the punctuation color to #bdbdbd helps things, and is still distinctly different that the other text colors for differentiation.

As now @ #9e9e9e Boosted #bdbdbd

This also applies to comments in the code. While in a dev environment, we might want to keep the comments at a very unobtrusive level, here in the documentation pages, I’d argue that the code comments are “particularly important content” and should be at least at Lc60:

As now @ #9e9e9e Boosting to #bdbdbd

Subtle

Obviously the differences I’m suggesting above are subtle, but nevertheless meaningful — one step more would be to bring punctuation up to Lc75, which is better for reading:

Lc75: #d6d6d6

Though now the punctuation lacks distinction, reducing the blue channel adds distinction, including for the common color vision types deutan and protan.:

Less blue: #d6d696

Thank you for reading,

Andy

What did you expect to see?

Simply better contrast as described above.

Do you have any supporting links, references, or citations?

Yes, Bridge-PCA is a contrast calculator that is backward compatible to WCAG 2 contrast, except that it calculates dark mode correctly: www.myndex.com/BPCA/

And here’s a list of resources for APCA, the candidate contrast method for WCAG 3 — while not the official recommendation, it does outperform WCAG 2 particularly for dark mode. git.myndex.com/#accurate-contrastusing-the-apca

Do you have anything more you want to share?

Some of these considerations may apply to the light mode scheme as well. Also, I’m posting as an issue, and not a PR as I know you created the dark mode recently, and I’d assume those involved would prefer looking into this.

Thank you for reading,

Andy

[schalkneethling]

Hi @Myndex, thank you for filing an issue. The problem described here is not related to a content change but is something that needs to be addressed by engineering. We file engineering-related issues on the Yari repository. As such, the issue will move over to Yari.

[schalkneethling]

Hi @schalkneethling thank you, please let me know if there are questions or if I can be of further help.

Will do, thanks so much @Myndex. Hopefully we can resolve this soon.