Pic

Dark or Light UI?

“Let’s go for a dark theme, our app will look cool and trendy” — I have come across that statement quite a few times. When I get asked for that requirement, my response contains even more questions. My curiosity rises as I try to figure out what’s the thinking behind it.

More often than not, it is revealed that the answer for that decision is based on personal preferences and assumptions rather than solid data. In my eyes, that does not have a valid standing to proceed with, unless some sort of research and statistics are revealed to back it up.

In the process, I have discovered the following, which could be used for guidance when discussions about dark and light themes come up.

Balanced Contrast for Readability

High color contrast is useful for readability. Too high of color contrast, however, creates a significant disparity in light levels that affect the user’s eyes when they read. A balance of contrast between the text and the background color is an effective way to make your text safe for the user’s eyes.

If you’re unsure about your color contrast, you can use a color contrast checker to find an optimal range that works for you. It shows you when your color contrast is too low based on the WCAG 2.0 industry standards. However, it doesn’t indicate when your color contrast is too high. That decision is left for the designer’s careful eye to decide.

Match the user’s environment

As we’ve already learnt, bright light at night or in a dark environment is not the best option for our eyes. Hence we have to take into consideration, the user’s environment when an app is used. The reason behind the dark theme on entertainment platforms, such as Steam, Spotify, YouTube and Netflix, is that users tend to engage in such activities later in the day, after work or in a room with dimmed lights.

The emphasis is shifted to the main content, in this case a game or a movie, and the background offers less distractions. Users can immerse themselves into the activity and enjoy vivid colours on a whole new level. It helps users avoid having to adjust their vision between a bright screen and a darker environment, leading to strained eyes. The latter, also applies to the “night mode” feature on Google maps; the app adjusts its glaring white display to a darker one. (source) (source)

Dark and light themes are also used for the Shoflo team’s event production software. They backed their decision based on the user’s environment too. A light theme can be used during meetings in the office or other bright environments and a dark theme during a show with limited lighting.

Pure Black Text on White Backgrounds

Pure black text on white backgrounds can cause eye strain when users read the text over an extended period. White has 100% color brightness, and black has 0% color brightness. Such a disparity in color brightness creates intense light levels that overstimulate the eyes when reading text. This causes their eyes to work harder to adapt to the brightness.

A research study has found that “black text on a white background over stimulates the OFF ganglion cells while white text on black background over stimulates the ON ganglion cells.” The study concludes that “the striking effects of contrast polarity suggest that it may not be advisable to read black text on white background.”

Black vs Dark grey text

An example that illustrates this concept is when we turn on a bright light in a dark room. Such a drastic change in light conditions is harsh to our eyes. But if we turn on a dim light in a dark room, our eyes adapt to the change easier because our retina isn’t overstimulated by such a sharp increase in contrast.

Pure White Text on Black Backgrounds

It would also help to avoid pure white text on a black background. This combination has been known to cause halation in users with astigmatism, and visual distortions in users with contrast sensitivity. Instead of black, use dark gray text on a white background, so the change in brightness will not be as drastic. This prevents overstimulating the retina and allows users to be able to read for a more extended period.

Black vs dark grey background

The Verdict

Designing UI is creative. Let’s not rules bind it. But an awesome design should also help boost user experience and realize business objectives. It should help your users achieve their goal comfortably and quickly. So think about these considerations and find answers to the questions before choosing between a dark and light UI.

A light UI may look as a safe bet always but, in some cases, dark UI can be the winner. So choose wisely.

Did you find these article useful? Share it with a friend!

Sources:
https://uxdesign.cc/dark-or-light-ui-the-ux-influence-ca6df6aff390
https://medium.com/@CanvasFlip/dark-ui-vs-light-ui-how-to-make-the-right-choice-5ddde9baabdb