Let’s talk about dark mode and accessibility! There’s a myth that dark mode is good for accessibility, because it improves text readability. It's not always true.
The full article and resources on my blog: https://stephaniewalter.design/blog/dark-mode-accessibility-myth-debunked/
1. Dark mode doesn’t improve readability for everyone. While dark mode can improve readability for some users, it’s not true for everyone. Dark mode can also make things hard to read for a couple of people, including people with astigmatism, but also, people navigating with a mouse when the focus indicator is poorly handled, people with dyslexia, etc. (for longer debunk, check the resources section).
2. Give users choice: if you can offer both, let people decide what works for them.
3. Make your dark theme accessible: check for contrast ratio, font weights, make focus indicator visible, etc.
A couple of links to dig further:
- Dark UI themes are new and cool — but are they accessible?https://uxdesign.cc/accessibility-and-dark-ui-themes-f01001339b65 by Sheri Byrne-Haber
- Accessibility for People with Astigmatism https://www.levelaccess.com/blog/accessibility-for-people-with-astigmatism/ (on level access, not a fan of them because of their buying an overlay tool, but, the article explains nicely)
- Dark mode UI design – 7 best practices https://atmos.style/blog/dark-mode-ui-best-practices
@stephaniewalter Fwiw, I don't think the Level Access blog actually provides an explanation why astigmatism causes this effect.
I looked into the blog citations trail on this a while back and came to the conclusion that most traced back to this page that's now only available via archive: https://web.archive.org/web/20090109135027/http://www.cs.ubc.ca/spider/harrison/document-colors.html
1/2
Quoting from that archive link, the reason is related to how the lens is deformed in those of us with astigmatism:
"Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye."
2/2
@stephaniewalter Big yes to being able to customize things–Do some A/B testing and find what works for you!
My theory was that having a brighter background made your pupils constrict, giving a deeper field of view and ease of focus. Darker backgrounds and the lower light levels make your pupils dilate, making focussing more challenging. That *should* be true for everyone, so I was always perplexed by people who claimed they found white text on a black background easier to read. I’m missing something, clearly.
@stephaniewalter What a beautiful web site.
(Is it just me on Firefox mobile but does the Other articles... section require a little more padding? Text runs up against the left side of the browser window in a way that it doesn't in the other sections.)
@stephaniewalter yeah, the media query. I usually never change theme manually because I like it to be in sync with my system so it can be changed everywhere all at once, as I use auto dark mode¹ to have it changed automatically or with a single click.
Some sites, however, will provide both themes and a toggle, but won't have an option to sync it to the media query, always requiring manual intervention. Here's one example at the top of my head: https://nuxt.com/.
Marie Guillaumet
Stef Walter
sknob
Jay 🆘
Ann 🧡 (she/her)
Seirdy
Michael Porter
Emmanuelle Aboaf
Julia
Greg
Taylor Drew 
Braw ☕🏳️🌈