Dark UI themes are new and cool — but are they accessible?

Side-by-side HTML page mock ups, one with a black background the other with a white background

Dark mode is one of those new, hot design features that is generating a lot of “buzz”. Apple and Slack, for example, have been pushing dark themed pages hard lately. However, it appears that not much thought has been given to dark mode accessibility.

I have broken down the claims I have read of the benefits of dark themes into the following categories of “definitely true”, “YMMV” (Your Mileage May Vary), and “not really true”:

Definitely True

  • Flicker problems are reduced by dark backgrounds. Definitely true, but only helpful if a flicker issue exists in the first place.
  • Dark modes are less prone to triggering photophobia. Definitely true. More white == more photophobia.
  • Defective pixels in devices/monitors that are permanently dark don’t show up as much on a dark background. True, but not helpful if your device doesn’t have these issues.
  • Easier to use in a dimly lit room. Definitely true.

YMMV (Your Mileage May Vary)

  • The most overhyped benefit of dark themes is that it can save electricity. This makes people think “wow, I can save the world if only I switch to dark mode!” However, this is only true on OLED or AMOLED screens. On LCD screens, there is little if no noticeable savings. If there is a savings in electricity it is probably here: Since dark modes are more suitable for use in dimly-lit rooms, the reduced need for ambient lighting will use less electricity. But if you are in an office, you may have no control over ambient lighting. Also, if you have energy efficient lighting that gets its power from renewable / clean sources, that savings may be minimal or zero.
  • Improved Text Readability. Maybe, but not for everyone. One of my glaucoma-related issues is I see “halos” (like rings around streetlights at night) when presented with light print on a dark background, which blurs everything into non-readability. This issue is exacerbated with thinner and smaller fonts. Also people with dyslexia (5–7 % of the population) have more trouble decoding light text on a dark background than they do the reverse.
  • Eye fatigue from video glare is reduced. Pretty sure this one is mixed as well, and it is definitely not true for me. I suspect that some people will experience eye fatigue improvement, but others who experience a degradation in readability will see their fatigue get worse.
  • Less blue light could mean less disruption to the body’s sleep cycle if using the display in the evening. This claim actually depends on a number of factors including the filtering process and the color of your eyes. Dark eyes, like mine, receive very little benefit. The only way to truly ensure that your sleep is not disturbed by an app is to not bring electronic devices into the bedroom. Any exposure can alter your circadian rhythms.

Not Really True

  • Dark mode has better contrast. I heavily dispute this one. You can’t use certain shades of red or green without triggering issues for people with red-green color blindness (4.25 % of the population) when those shades of red or green are OK on a lighter background. Dark blue is a relatively neutral color used in a lot of websites in both text and graphics. It does not have a strong contrast against a dark background. Change the color to align with your dark mode? Sure you can do that for the text. But logos were designed to be on paper (white) and your branding people and legal will have a hissy fit if you ask to change the color of a trademarked logo.

Here are some areas where Dark UI Themes can actually make things worse:

  • When the display is reflective (not backlit).
  • When the display is backlit but there is a lot of ambient light.
  • When the fonts are small or thin.
  • When a mobile device is heavily scratched.

Conclusion

There is nothing inherently wrong with either light mode or dark mode. For some people, dark themes are more accessible. For others, light themes are more accessible. And most of the benefits of either mode are heavily impacted by factors having nothing to do with the mode, but more about the device the mode is being viewed on as well as users’ personal situations with their setting or disabilities.

More thought should be given to accessible color choices when designing using a dark theme. Some color combinations won’t meet the minimum text/icon/focus indicator requirements in WCAG 1.4.3 and WCAG 1.4.11. Use of red and green for text, keyboard focus indicators, and icons/logos will all but be eliminated due to color blindness issues. Make sure you double-check visited link text colors (which usually tend to be darker and have shades of red in them).

The bottom line is to be the most accessible, you really need to do both a dark theme and a light theme and allow your users to select the one that works best for them.

Two other UX things to think about when implementing a dark theme.

  1. Make switching between dark themes and light themes obvious and easy to find.
  2. Don’t make your users work. Save their preferred theme with their login rather than forcing them to switch themes every time they start up a new session.

0 comments on “Dark UI themes are new and cool — but are they accessible?

Leave a Reply