Please Don't Force Dark Mode

Dear website designers,

Please don’t force dark mode on your users. If dark mode is a characteristic of your brand, please ensure you choose a comfortable contrast ratio for the text.

I regularly see many websites including personal blogs that are designed exclusively in dark mode. I find this incredibly frustrating as I can’t even read a single paragraph on these sites before my eyes start watering. While dark mode can be beneficial on some occasions, forcing it on users is a terrible user experience.

My Eyes! My Eyes! 😵‍💫

Reading in dark mode doesn’t just mess with my eyes while I’m at it — it sticks around afterward too. Every time I finish a long article, I end up seeing horizontal stripes everywhere I look, like my eyes just won’t let it go.

This is what my eyes see before reading a dark-mode article: what I see before reading dark mode - a normal sight

And this is what my eyes see after reading a full-length dark-mode article: what I see after reading in dark mode - full of horizontal stripes everywhere for a considerable amount of time

What’s the real problem with the dark mode?

The real problem is the contrast ratio between the text and the background when using dark mode.

For example, pure white text on a pitch black background can strain my eyes and be very difficult to read. The contrast ratio of this combination is 21:1. Here’s an example paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

However, light gray text on a dark gray background is easy on my eyes. Here the background is #666 and the text is #E0E0E0 which creates a contrast ratio of 4.34:1.

In summary, higher contrast ratios in dark mode cause discomfort for my eyes. But when I say ‘higher’, just how high can it go?

Isn’t there a guidelines for this?

The Web Content Accessibility Guidelines (WCAG) version 2.1 recommends a minimum contrast ratio of 4.5:1 for normal texts (SC 1.4.3) but not a maximum. The current guidelines makes pure white text on pitch black background completely accessible, even if the contrast ratio is an unbearable 21:1. But the more comfortable contrast ratio of 4.34:1 from the above example fails according to the guidelines. That means, currently, there are no standards or guidelines that address contrast ratios in dark mode.

Upcoming WCAG 3.0 adds a new exploratory requirement for “Maximum text contrast” and I hope the working committee will address the issue of high contrast text in dark mode and provide suitable recommendations.

Until then, if I must read an important article that forces dark mode, I will use the browser’s developer tools to override the CSS and invert the colors until a better solution is available. I don’t want to use a plugin just for this.

That being said, I absolutely enjoy dark mode when…:

…reading on an OLED screen in a unlit room, for example reading articles on my phone before bedtime. Dark mode works best on LED-type displays when used in dark environments.
…writing code. Almost every IDE has a dark mode with very comfortable contrast ratio out of the box.
…the website has comfortable contrast ratio in the dark mode.