Is enabling dark mode for web design in websites and apps a good idea?
Are you a dark mode user?
I personally like to use dark mode to read long-form articles and case studies.
When I come across a long article during the day, I usually bookmark it so I can leave it for later and read it when I have the time.
I come back to these articles after work during evening wind-downs or in bed as I try to fall asleep (bad idea, I know).
Compared to most apps and sites’ stark default white backgrounds, the dark mode has less glare and makes it easier to read words.
This is exactly why dark mode has become a big trend in user experience (UX) design.
Many popular apps and operating systems now offer dark-themed interfaces.
But should you implement dark mode in your web design?
Is the improved user experience really worth the trouble of having to switch all your design assets to dark mode?
Let’s talk about the benefits of implementing dark mode interfaces.
How dark mode design helps reduce eye strain
As I mentioned earlier, one of the primary benefits of dark mode is its potential to reduce eye strain.
Staring at bright screens for prolonged periods, especially if you don’t blink often, can cause eye discomfort and fatigue.
With dark mode, you see less bright light, which makes it easier on the eyes, especially in low-light conditions.
You can particularly tell the difference if you have an OLED or AMOLED screen.
These screens can produce perfect black by not turning on certain pixels, unlike LCD screens, which need a backlight to light up each pixel.
Just by turning on dark mode on an OLED screen, you are reducing the amount of light that reaches the eyes significantly.
Other than that, the increased contrast of bright text against a dark background is also helpful for certain vision impairments, such as cataracts and related disorders.
Conserving battery life
The feature of OLED screens to turn off pixels to display blacks also means that using dark mode can help you reduce battery use.
Your screen is lighting up fewer pixels in dark mode, so you’re using less power.
This makes dark mode not only visually appealing but also energy efficient.
Switching to dark mode on high-end smartphones (like the iPhone, Google Pixel, or Samsung Galaxy) with OLED screens can extend battery life, which is particularly beneficial for heavy users.
Adapting a more modern design language with a dark mode UI
Have you noticed that a lot of newer websites and apps also just offer dark mode user interfaces (UI) by default?
This is because dark mode is a sleek and modern design trend.
Compared to the usual white background, having a dark-mode website instantly gives your web design a modern aesthetic that many users find interesting.
It provides a sense of sophistication and can make your content stand out.
This is why music and video streaming apps like Spotify and Netflix use dark mode.
They are able to create an immersive experience by highlighting album art, thumbnails, and controls in a minimalist style.
Imagine if your Netflix app opened to a bright white screen instead of the usual dark background. It might put you off, especially if you were thinking of looking for a series to watch to sleep.
Is it worth the hassle to use dark mode in web design?
You might be wondering, “Are all these benefits really worth the hassle of turning all my design assets dark-mode friendly?”
If you are considering improving the accessibility of your site by using dark mode, it might not be as inclusive as you think.
While the high contrast may be more readable to some people with low vision, like those with cataracts, people with normal vision and dyslexia still prefer the normal light mode.
However, the main difference is in the long-term effects of exposure to light mode.
Studies have shown that prolonged exposure to light mode may be associated with myopia or nearsightedness.
This is why, if you’re creating a website or app that is meant for long-form reading, such as a magazine, news site, or book reader, it is best if you offer dark mode.
How to apply dark mode to website design
Now that you have seen the benefits of dark mode web design, let’s get to how you can apply it to your website.
Go dark and raise your contrast
One of the key challenges in dark mode design is ensuring enough contrast between the background and your text and design elements.
Poor contrast can lead to readability issues, defeating the purpose of converting to dark mode to enhance the user experience.
Make sure you are using colors with high contrast ratios so that your text is legible and your UI elements are distinguishable from your background.
You can use tools like Colorable and Colorsafe to see if your color choices meet the WCAG’s accessibility standards.
Do you want to learn more about using the right colors and contrast in your web design projects?
We explore contrast and color accessibility in this guide:
➡️Designing for web accessibility: The importance of accessible color
Is the content on your dark mode website readable?
Readability is crucial in any design, but even more so in dark mode.
If you are using a font that is too small and thin, the user may have to strain their eyes and move closer to the screen to read anyway.
If you are using a font that is too heavy, the user may be faced with too much glare and want to move away from the screen instead.
There is also the issue of how eyes perceive shape and color.
White text against a black background may look extra bold, while the same font style and size may look fine in light mode.
To solve this issue, some site builders use variable fonts to slightly adjust the thickness of typefaces when switching from light mode to dark mode.
It also helps to use an off-white color for text instead of a pure white font color against pure black.
While it may seem like a small adjustment, it can make your text easier to read.
Apple’s iOS uses San Francisco, a clean and legible font, ensuring readability across all its dark mode interfaces.
Adjusting your dark mode images
Even if a bright photo with a white background may look fine on a light mode interface, it can become glaring against the black background in dark mode.
Just like with text, it helps to reduce the brightness and contrast of images a bit so they don’t look too bright and jarring in dark mode.
Using subtle accents in your dark mode color palette
While dark mode is predominantly dark, you can still incorporate splashes of color through subtle accents.
This can enhance the visual appeal of the dark mode website without overwhelming the user.
Muted or desaturated colors for accents and highlights create a balanced and harmonious design.
Slack’s dark mode, for example, uses subtle shades of yellow, green, and blue to highlight active channels and messages, maintaining a sleek yet inviting look.
Making your website or mobile app more accessible
Accessibility should always be a priority in UX design.
Certain design elements that used to work on your light mode site may no longer be visible in dark mode, especially if you are using a dark color.
You want to switch the colors of these design elements to keep your interface usable.
You will also need to consider accessibility for people with visual impairments or color blindness.
You can use variations in blacks, grays, and whites to maintain contrast and highlight certain areas.
As dark mode may or may not be accessible to certain vision impairments, it is best to provide users with the option to switch between dark and light modes based on their preferences and needs.
We talk about how to create websites that everyone can use easily in these guides:
➡️The importance of accessibility in design quality
➡️ Designing for web accessibility: applying the W3C guidelines with examples
➡️Designing for web accessibility: The importance of accessible color
The benefits of dark mode
Dark mode is more than just a design trend; it’s a practical and aesthetic choice that enhances the user experience.
However, implementing dark mode requires a lot of work and careful consideration for contrast, readability, and accessibility to ensure it works for all users.
Ready to embrace the dark side and create a dark mode website?
Deer Designer has a team of designers to handle all the design work for you.
Easily create user-friendly and visually appealing designs with just a few clicks.
Key takeaways
- The use of dark themes in websites has risen in popularity because of its various benefits, such as reducing eye strain, conserving battery life, and giving the website a more modern aesthetic.
- While dark mode may not necessarily improve a site’s accessibility for everyone, it helps to offer it as an option for the people who need and prefer it.
- Prolonged use of light mode has been linked with myopia, so it is best to offer dark mode if your site or app is meant for long-form reading.
- When applying dark mode to your site, you should take note of the contrast and brightness of design elements, images, and text.
- You can use variations of blacks and grays to highlight accents and separate design elements from your dark background.
