Some dark mode highlighted code is invisible
Myndex opened this issue · comments
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
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
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
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: mdn/content@4e002d2
- Document last modified: 2023-02-11T03:07:14.000Z
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.
@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?
There is already a PR fixing this issue: #1131
I'm going to close as the linked PR above has been merged. Thank you :)