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 recommend #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 bolder.
- 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 share them with us in comments.