Dark mode: Some keywords don't have enough contrast in some interactive examples

[adriancuadrado]

MDN URL

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

What specific section or headline is this issue about?

https://developer.mozilla.org/en-US/docs/Web/CSS/calc#try_it

What information was incorrect, unhelpful, or incomplete?

In dark mode it's hard to see the calc and var keywords.

What did you expect to see?

I expect to see those keywords with more contrast.

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

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/calc
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/calc/index.md
• Last commit: mdn/content@f01246f
• Document last modified: 2022-04-06T08:08:41.000Z

[caugner]

FWIW The color is set here:

bob/editor/css/editor-libs/prism-override.css

Lines 49 to 57 in 7d0f12b

	.token.selector,
	.token.attr-name,
	.token.string,
	.token.char,
	.token.function,
	.token.builtin,
	.token.inserted {
	color: #2545a7;
	}

[adriancuadrado]

@caugner
I use Windows 10. There is a feature that allows you to change the amount of blue your display uses.
It's in Settings --> System --> Display --> Night light settings. I use it because I have understood long exposures to blue light can damage your eyes. I didn't realize it was because of this setting that I was having such a hard time to read some keywords in the linked documentation. Many people use this setting and I'd like to suggest to use this setting and set it to a strength of 85 to check the contrast properly. I can't send a screenshot because the screenshot will have the correct blue tone since this setting affects the whole operating system.

[queengooborg]

Hey @adriancuadrado, a recently merged PR will be fixing this accessibility and color contrast issue and will be published to the website in the near future!