Dark modes and themes are extremely popular and they’re frequently touted as an accessibility solution. While the term "dark mode" can have different meanings for different developers, the basic idea is simple: Instead of displaying dark-colored text over a light background, a dark mode inverts the color scheme to display light-colored text over a dark background. This can create more contrast between the content and the background, limiting eyestrain and improving content readability.
The approach has substantial benefits for certain people, and many users request high-contrast modes. Very early in his presidency, the Biden administration implemented a dark mode as an accessibility feature when revising Whitehouse.gov, and many popular apps like Slack and Zoom have added high-contrast options. However, while dark modes can be useful, they’re not automatically accessible. Without proper implementation, they can negatively affect the user experience.
Dark mode can create accessibility issues
To understand why, we’ll need to consider one of the core concepts of internet accessibility: People have different abilities and use different methods to browse the web naturally. In an excellent piece for UX Collective, accessibility advocate Sheri Byrne-Haber addresses some issues that can occur when dark mode is implemented without testing. Some key takeaways follow.
Dark modes can make site navigation difficult
A dark theme may also cause visibility issues for certain accessibility tools. Many people navigate the web without using a mouse; they use keyboard commands to move through a site, and their browsers provide keyboard focus indicators. A dark background may prevent these indicators from being visible.
Some users also rely to navigate a site. Dark themes may simplify the site’s color scheme, which would make page-to-page navigation confusing and frustrating.
People with dyslexia and astigmatism may have issues reading light text on dark backgrounds
For people with dyslexia, total contrast — white text on a black background, or vice-versa — can be difficult to read. Many dark themes use total contrast. Generally, people with dyslexia prefer lighter backgrounds with appropriate contrast ratios, but that’s not universally true; many factors affect an individual user’s preferences.
According to the University of Michigan’s Dyslexia Help Center, dyslexia is estimated to affect 5-10% of the U.S. population, but the number may be as high as 17%. When a website uses a dark theme exclusively, these users may not be able to perceive it naturally.
People with dyslexia aren’t the only ones affected negatively by dark modes. About 47% of people have some form of astigmatism, though some have mild symptoms that may go undiagnosed. User experience expert H. Locke notes that dark backgrounds can cause a "halation effect" for users with astigmatism. Darker displays cause the iris to open to receive more light. For people with astigmatism, this can make focusing more difficult.
Dark modes may not provide enough contrast
Inverting a color scheme won’t necessarily yield high contrast. The Web Content Accessibility Guidelines (WCAG) requires content to meet a minimum color contrast ratio of at least 4.5:1 for normal text, with exceptions for large text, incidental (or decorative) text, and logotypes. To meet Level AAA conformance, content must maintain a 7:1 contrast for normal text.
It’s true that many dark themes meet these requirements — dark modes often use white text on a dark background, which typically clears the minimum thresholds. However, hyperlink text might not be legible against a dark-blue background. Designers and developers need to consider every text color choice carefully (and test thoroughly using the Color Contrast Accessibility Validator).
Dark mode can create unexpected accessibility issues when implemented improperly
For example, a dark mode may make hyperlink text less distinguishable from non-linked text. Users expect to be able to identify hyperlinks easily, and if they can’t tell the difference between a hyperlink and normal text, they might inadvertently click on a link while scrolling through a page. This might occur more frequently if the user has certain vision disabilities.
When provided as an option, high-contrast modes are helpful
So, does this mean that dark modes are a useless fad? Are you harming your site’s accessibility by providing the option?
Not at all. Dark modes have numerous benefits for certain users:
- If a screen has flicker problems, dark backgrounds can reduce flickering.
- Dark themes are less likely to trigger photophobia (sensitivity to light).
- Light-colored text on a dark background can be easier to read for a long period of time.
- Dark themes can make screens easier to use in low-light conditions.
Put simply, dark modes are popular for a reason: For many people, these themes provide a more pleasant experience. Dark backgrounds may reduce eye strain, and some users simply prefer the aesthetic. When developers pay attention to contrast ratios, dark modes can improve accessibility.
Still, developers should understand that implementation is important. Dark modes are not necessarily more accessible, particularly if they haven’t been tested for WCAG conformance.
That doesn’t mean that they’re a bad idea — developers simply need to test their themes thoroughly before providing the option. By giving users more control over their experience, your site or application can reach a wider audience.