Should UX Designers Join the Dark Side?
On accessibility and use cases for dark vs. light UI
Thinking about color schemes for the UI of your current design project? Here are three aspects to consider as you design your next interface, along with examples of different applications in the wild.
Readability
“…most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background.”
— Reference: Bauer, D., & Cavonius, C., R. (1980)
Light text on dark backgrounds strain the eye more than dark text on light backgrounds over time. With such findings, news websites would rarely choose a dark themes for the articles, where they see the majority of users spending time reading articles.
However, dark UIs are incredibly popular for a variety of code editors.
Why? While the contrast level is greater with dark text on light backgrounds, the same high contrast level causes eyestrain in extended period of time (think >5 hours) for those that are in front of a screen for such a time period.
Contrast
Common uses for dark UI are heavily visual applications or even complex applications. It can be used to simplify complex interfaces because it focuses attention to the main area of context.
Think Autodesk Maya, Adobe Lightroom or Adobe AfterEffects. This brings the main content to the forefront and lets the many tiny bits of UI settle in the background. The additional noise and visual distraction by the sheer amount of UI in some complex applications can be reduced with dark UI.
Context
Considering when the majority of users are using your application/website/etc. can make a case for whether to choose a dark or light UI.
Dark background in a dark room or a bright background in a bright room is ideal because keeping the contrast lower between the screen and a user’s environment reduces the amount of glare or jarring difference that is likely undesired.
For example, Netflix utilizes a dark UI and considering a TV watching environment (think a family huddled around a TV in their living room at night or a college student binging on the latest season of Game of Thrones in their dorm room), it is practical to not have a bright white/light UI. It could also mimic a movie theatre experience in the home, focusing attention on the video content at hand.
Gaming UI also leans toward dark UI, likely for the same reasons — the environment where players are gaming fits better with a dark UI. It is highly visual and has better contrast and hierarchy with a dark theme.
Conclusion
As design principles go, all design rules are to be taken with a grain of salt.
There will be times when light color schemes work best, and times where dark can work best.
From a design perspective, contrast is easier to achieve with a light UI theme. Dark themes offer a trendy, elegant and almost luxurious feel which may or may not match up with the branding of your application. All in all, consider what works best for your audience and what they might prefer.
