Believe it or not, dark backgrounds in UI web design are beneficial in many different ways. Depending on the overall theme of the web page, it may or may not be a good fit for the job.
Why dark mode?
The main advantage of the Dark theme is better readability in a low-light environment. Dark mode reduces the luminance of device screens. It improves visual ergonomics and adjusts better in specific light conditions. Thanks to this it is much more pleasurable to interact with digital solutions in the evenings and late-night hours.
The dark mode comes with some benefits for users – and you. While the primary benefit is user preference and creating something that users want and will work in the way they want to interact, a residual benefit can be more users and greater interactions.
Other reasons to consider adding a dark mode design include:
- It can be easier on users’ eyes in the dark. People are becoming more accustomed to switching between dark and light modes depending on environmental conditions.
- Dark backgrounds can provide focus on visuals and can bring attention to text elements.
- The dark mode might be preferable for people with some vision impairments, making the design more accessible if you have that option.
- Dark mode can increase battery life.
- It just looks cool and you want to try it.
Accessibility in dark mode
There are specific guidelines for dark themes to be applied if you would like to make the solution more accessible. The most important one is the following: the contrast level between body text and the background should be at least 15.8:1. Thanks to this, readability should be good even if the higher surfaces will be lighter.
The art of removing backgrounds from photos is an oft-overlooked skill. But it’s so much easier than you might think!
Applying color is a game of balance
Showing colors on darker surfaces means the differences between your saturated and unsaturated colors will stand out a lot more. Maintaining a balance between distinction and accessibility is key when designing for dark mode.
Create a color hierarchy for text. This concept, which also stems from Material Design, notes using levels of light-colored text. A high emphasis level (transparency of 87% white) is for the biggest, most important text; a medium emphasis white (60%) is for most of the main text, including body copy; and disabled text (38% white) is lightly visible.
Elevation
In light theme, it made sense to give a shadow to a component based on the amount of elevation. But that does not work for the dark theme as a black shadow on a dark background is visually not perceptible. And so Google came up with the idea of making the component lighter as the elevation increased. But do note that in the dark theme, the components will continue to have the same shadow settings as in the light theme.
If you want to implement dark mode, keep these tips in mind:
- Dark mode and light mode are not just white on black or black on white. That can actually be too much contrast. Consider a black or dark option that’s not pure black. The Material Design recommendation is #121212. Deep blues and purples also work well as a background choice for dark mode.
- Consider emotion when creating a color palette for dark mode. It’s not as simple as changing the background color and leaving the rest alone. Dark mode innately appeals to a different emotional state in people. That can impact how you plan colors in the dark version of your website or app theme.
- Use that same concept for colors on a dark background. Pure white can be too bright in some situations and cause eyestrain. Use a bright, not quite white hue.
- For colors other than white, avoid highly saturated colors. Stick to lighter variants of colors from your palette.
- Dark mode should come with a toggle off/on switch.
- Don’t forget rules of accessibility and test your dark mode color palette against common standards.
When to Use Dark UI?
- When a branding color scheme warrants it
- When the design is sparse and minimalist with only a few content types
- When it is appropriate for the context and use, such as nighttime entertainment apps
- To reduce eye strain, such as analytics pages that are used for long periods of time
- To elicit an emotion—for example, a feeling of intrigue and mystery
- To create a striking, dramatic look
- To create a sense of luxury and prestige
- To support visual hierarchy
Final Thought
Dark mode can be a lot of fun to design and implement. And some users adore it. With standards for both iOS and Android, it’s one of those things that isn’t likely to go away any time soon and use will only continue to grow, making it an important design consideration.
