Some dark mode highlighted code is invisible

[Myndex]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

What specific section or headline is this issue about?

The code examples section

What information was incorrect, unhelpful, or incomplete?

When viewing the page dark mode, the color used for the selected text that is within a parenthetical is essentially invisible. See this example:

And selecting the text as in the next image shows the missing words from the previous slide.

What did you expect to see?

I was hoping to see highlighted code (text) with no colors any darker than a contrast value of $Lc \pm50$ ( $Lc$ is APCA lightness contrast)

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

Human vision system's contrast perception is largely driven by special frequency in other words, smaller and thinner stimuli result in much lower contrast sensitivity. Obviously, this applies very much to small and thin text.

Secondly, WCAG 2.x contrast math is not capable of calculating for dark mode, and it's not even close. WCAG 2.x contrast can be off by as much as 250% for dark colors.

If you want or need an automated way to determine contrast for dark colors, use an APCA based contrast Calculator.

In the case of code, it's important things like periods and semicolons that have very small details differentiating them from similar elements: ., and ;: period verses comma or ; verses : need more luminance contrast to differentiate, than A vs W

In my personal development environment, my background is black #000000 and punctuation is white, usually #f4f4f4 to #ffffff. APCA dark mode calls this $Lc\ −100$ to $Lc\ -108$ ($-108$ is max -- note that APCA reports dark mode colors with a minus sign to distinguish them from light mode colors).

The darkest color I use anywhere is for comments, and that is Lc -55 and for me and my vision and the size of code letters, I really can't deal with anything darker than $Lc\ -50$, and I would suggest that no color in a color palette for code highlighting ever be less than $Lc\ -50$, but if it's things that you need to see should be much more than $Lc \pm60$. $Lc \pm75$ to $Lc \pm90$ is fairly ideal for small text.

Do you have anything more you want to share?

You might also like this article, a comprehensive overview of the important aspects of text color and contrast: https://www.smashingmagazine.com/2022/09/realities-myths-contrast-color/

And the very short introduction to APCA contrast is "Why APCA?"

Thank you for reading

MDN metadata

Page report details

* Folder: `en-us/web/css/_colon_not` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/:not * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/_colon_not/index.md * Last commit: https://github.com/mdn/content/commit/4e002d26cb032c915aeee366f922f23cbacd8bf1 * Document last modified: 2023-02-11T03:07:14.000Z

[github-actions[bot]]

It looks like this is your first issue. Welcome! 👋 One of the project maintainers will be with you as soon as possible. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

[bsmth]

Thanks @Myndex for reporting this one. We have another issue that's tracking this problem here: https://github.com/mdn/interactive-examples/issues/2054

[estelle]

@schalkneethling This is a CSS issue with interactive-examples. Can we get this moved to interactive-examples, to builder of bits where the CSS is housed, or otherwise in front of the designer?

[NiedziolkaMichal]

There is already a PR fixing this issue: #1131

[bsmth]

I'm going to close as the linked PR above has been merged. Thank you :)