Description
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