Dark theme causing eye strain

[caugner]

Discussed in https://github.com/mdn/yari/discussions/7704

^{Originally posted by J-Cake November 27, 2022}
I'm lucky enough to be blessed with good eyesight, so generally I don't have an issue with taxing colour schemes or bright lights etc. but I can't help but notice that when ever I'm reading MDN with the dark theme, my eyes hurt after a few seconds, and I start to feel dizzy within a few minutes. I've never encountered this anywhere else so I assume it's related to the contrast or something technical (I have no idea about colour theory) but I thought I'd mention it.

Perhaps lighten the blacks and dim the whites?

I do have to mention though, the light theme is 👌🏻 and the design scheme is pretty sleek.

[caugner]

With GitHub's dark mode, text has a contrast of 12.26 (13.30 in the editor), buttons have 9.86, and the headings at the top reach 15.89.

On MDN, the text has a contrast of 17.22 (--text-primary on --background-primary), but the sidebars and the headings at the top only have 10.83 (--text-secondary on --background-primary).

Light theme

Dark theme

[caugner]

@schalkneethling Chiming you in for your a11y expertise: Would it maybe make sense to have the current --text-secondary color as our --text-primary color and use the current --text-primary color only to highlight selected elements, such as the top nav (like GitHub does) and maybe the "Related Topics" and "In this article" headers in the sidebars, like we currently do?

According to WCAG, a contrast of 7:1 is recommended for text (see here), so 10.83 would still be a bit too contrasty, but already better.

[caugner]

I talked about this with @fiji-flo and since we don't have a high contrast theme (in contrast to GitHub), reducing the contrast makes our site less accessible for folks requiring high contrast. This means that this has to wait until our designer has time to take a look at this issue.

Thank you for your patience. 🙏

PS: In the mean-time, you could use an extension like Dark Reader, which is also available for Firefox for Android.

[BerndHme]

I have the same issue.
Sometimes I go into the developer-tools
... and change the color of the --text-primary to the same color as --text-secondary
... way much better.