Why dark mode isn’t a UX panacea
Dark mode may not be all it’s cracked up to be in terms of accessibility.
I once clicked into someone’s portfolio and found myself face-to-screen with an About Me page that was true white text on a true black background.
Below is a mockup of what they probably intended for me to see.
Here is a (slightly exaggerated) mockup of what my eyes saw.
Astigmatism
If you’re looking at these two images and thinking that the author of this article needs to get her eyes checked, you’re not wrong.
But the second image is actually caused by my astigmatism. While our eyeballs are supposed to be round and spherical shapes, mine is a little more oval-shaped. This means light rays do not enter my eye at a proper angle and my vision is consequently a little fuzzier. This results in an effect known as “halation”, in which white text appears to bleed and turns foggy on a black background.
Specifically, I have terrible night vision. When it’s dark, lights will simultaneously have a fuzzy halo around them and a streak of light running down them.
I can see perfectly fine in the daytime and have no need for contacts, but as soon as it turns dark, I need to put on my glasses to see comfortably. This extends to all dark environments. I’ve gotten in the habit of bringing my glasses with me every time I go to the theater — because once the lights dim, the movie itself will look a lot fuzzier than the previews did.
Color vibration
Beyond my condition of astigmatism, I also want to touch on why dark mode should just never use true white text on a true black background in general. For that matter, light mode should never use true black text on a true white background either.
This is due to a visual illusion known as color vibration.
If you look at the image above, it’s ugly.
But you might also feel as if the edges where the green text meets the magenta background are constantly moving around. This is the visual phenomenon known as color vibration.
All colors have a HSL value — standing for Hue, Saturation, and Lightness respectively. Hue is the color, saturation is the intensity of the color, and lightness is the tint of the color (or how much white/black is mixed into it).
Color vibration occurs when two different colors of the same saturation value are placed directly next to each other, creating the illusion that the edges where they touch are moving or vibrating.
In this image, both the magenta and the green colors used have a saturation value of 100%, despite being different hues. Therefore, these two colors will create a color vibration effect when placed next to each other.
Similarly, true white and true black both share the same saturation value of 0%. This means that even without astigmatism, the color combination would be visually unpleasant to most users.
To counteract this, make sure your dark mode uses either an off-white or a dark gray. So long as they pass the WCAG contrast checker and don’t share the same saturation levels, it would be fine to use a combination of an off-white or a dark gray.
Good things about dark mode
This is not to say that dark mode is unequivocally evil and should be henceforth abolished. After all, I don’t use light mode for everything. All of my apps are in a combination of light or dark mode, with the reasoning why based mostly on personal aesthetic preference per app.
For users with photophobia or sensitivity to light, dark mode will benefit them greatly. Dark mode adoption may even help to reduce headaches and migraines in some users, as bright light can be a migraine trigger.
And unless one of your hobbies includes shining a flashlight straight into your eyeballs, it’s probably more comfortable to turn on dark mode at night. This can reduce the feeling of eye strain, and you’ll probably find yourself squinting just a little bit less.
Dark mode isn’t a panacea, but neither is light mode
Dark mode is not an inherently superior UX decision compared to light mode. For that matter, light mode is also not an automatically better design.
As with everything in inclusive design, it’s best to offer options for your users to choose between. There are different accessibility cases for both light mode and dark mode, some of which may be worsened in one mode and alleviated in the other.
The severity and effects of impairments are not universal, so a default mode should not aspire to be a one-size-fits-all.
Thank you for reading my article. As a disability ally, I am in a constant state of learning — and that means I might make some mistakes every now or then. So please feel free to leave a comment (or even correct me!) if you have any questions, comments, or concerns.
All images displayed in the article are designed by me.
