Tips for Effective Dark Mode Design

With the increase of use of digital technology in our everyday life, we tend to spend long hours staring at digital screens in day and night. Even though the rapid invention of numerous apps, websites and features offered by digital devices make our lives easier, as a byproduct of this we now face various health challenges. The most common condition is Computer vision syndrome, also referred to as digital eye strain, that results from prolonged computer, tablet, e-reader and cell phone use. So, what this has to do with Dark Mode Designs?

As stated in Google’s Material Design guidelines “Dark themes reduce the luminance emitted by device screens, while still meeting minimum color contrast ratios. They help improve visual ergonomics by reducing eye strain, adjusting brightness to current lighting conditions, and facilitating screen use in dark environments — all while conserving battery power. Devices with OLED screens benefit from the ability to turn off black pixels at any time of day.”

Since Dark Mode proved to enhance the visual ergonomics, it has been one of the most requested features over the past few years. Therefore, Dark Mode is one of the biggest trends in design, and world-class brands like WhatsApp, Instagram, Google, Facebook and Apple have already jumped on the dark mode design train. As a result of all these, nowadays every designer seems to design a dark mode for their apps and websites. But the question is how we can make sure our dark mode design stays effective. Not to worry, here comes some tips.

1. Use dark grey – rather than black

A dark theme uses dark gray, rather than black (#000000), as the primary surface color for components. Dark gray surfaces can express a wider range of color, elevation, and depth, because it’s easier to see shadows on gray (instead of black). Dark gray surfaces also reduce eye strain, as light text on a dark gray surface has less contrast than light text on a black surface. Google Material Design guidelines recommends #121212 as dark theme surface color.

2. Use desaturated colors

A dark theme should avoid using saturated colors, as they don’t pass WCAG’s accessibility standard of at least 4.5:1 for body text against dark surfaces. Saturated colors also produce optical vibrations against a dark background, which can induce eye strain. Instead, desaturated colors can be used as a more legible alternative.

Use lighter tones (colors in the 200–50 range) because they have better readability on dark theme surfaces. Using lighter variants won’t make the UI less expressive, rather they help you to maintain appropriate contrast without causing eye strain.

3. Meet accessibility color contrast standards

Dark theme surfaces must be dark enough to display white text. As recommended in Google Material Design using a contrast level of at least 15.8:1 between text and the background ensures that body text passes WCAG’s AA standard of at least 4.5:1 when applied to surfaces at the highest (and lightest) elevation.

Use color contrast tools to test contrast ratio.

4. Use “On” Colors for Text

“On” colors are primarily applied to text, iconography, and strokes that are sometimes placed “on” top of key surfaces that use a primary, secondary, surface, background, or error color. The default “on” colors for dark themes are white and black. But instead of using pure white (#FFFFFF) Google Material design recommends using Light text on a dark background as it appears more bold.

·         High-emphasis text has an opacity of 87%

·         Medium-emphasis text and hint text have opacities of 60%

·         Disabled text has an opacity of 38%

5. Communicate Depth – Higher elevation, lighter surface

In any UI Design it’s essential to create visual hierarchy and emphasize important elements in your layout. Elevation – the relative distance between two surfaces along the z-axis – is a tool we use to communicate the hierarchy of elements.

In a dark theme, components retain the same default elevation levels and shadows as components in lighter themes. However, in a dark theme, the surfaces of different elevation levels are illuminated differently. The higher a surface’s elevation, the lighter that surface becomes. This is constructed by placing a semi-transparent overlay over a component surface. Below surface overlay values which are suggested by Google Material Design designed to maximize legibility, while ensuring the different elevation levels are discernible from one another.

6. Allow users to switch from regular to the dark mode

Even though the system has the possibility to decide when to turn on or off dark themes, doing that would not only take over control from the user, but also will violate the best practices in UX. Added to that, it seems leading brands(e.g.: Google, Facebook, WhatsApp, etc.) accept this fact as they introduced Dark Mode with the possibility for users to activate it based on their need.

This can be designed to turn on (or off) using a control that is displayed:

·         Prominently, using an icon toggle to turn the theme on or off

·         With reduced prominence, with a toggle placed inside a menu or an app’s settings

So, these are the main principles and practices that ensure the effectiveness of the Dark Mode Design which I have found through researching and reading. If you are interested in digging more into it, I have made it easier by adding all the references below. Also, if you have other tips and tricks that you use, I invite you to add them in comments. 

References:

https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6

https://material.io/design/color/dark-theme.html#behavior

https://99designs.com/blog/web-digital/dark-mode/

https://medium.muz.li/stepping-out-of-the-light-tips-for-the-design-and-development-of-dark-mode-bb6f7a38043d

https://uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-wego-ios-app-6c4967e59dd6

https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

https://medium.com/@merciero/implementing-dark-theme-on-android-2a786b1f6f91

https://uxmisfit.com/2019/08/20/ui-design-in-practice-dark-mode/

https://appinventiv.com/blog/design-dark-mode-app/