Today, many top-ranking websites offer a dark mode. Before you decide whether your site will join them, you must consider color saturation, feature toggling, battery life, and color utilization. Once you make these decisions, you can seamlessly transition your site design.
What Do Users Think About Dark Mode?
People’s preferences vary depending on device type, user activity and screen time. For instance, organic light-emitting diode (OLED) users tend to favor dark mode because their screens can display deep blacks. However, the broader population is almost evenly split on whether or not they like this feature.
Dark mode is controversial because it can have positive and negative effects. For instance, dimming bright hues can reduce eye strain in dark environments. However, people with astigmatism may experience ghost vision since darkness causes pupil dilation. This difference means people often either swear by it or go out of their way to avoid it.
Should You Use Dark Mode in Your Site Design?
Dark mode is a display setting that darkens the background and brightens user interface elements. Its purpose is to make screens more comfortable to view in low-light settings. Driven by popular demand, dark mode has become a mobile and web design trend in recent years.
Designers know light and mood are inextricably connected. Research shows that circadian rhythms and other biological systems need periods without light to function correctly. Any exposure during rest can disrupt vital bodily functions on a cellular level.
Since people tend to be on their devices after dark, incorporating dark mode could be beneficial. The average person spends over 6.5 hours on their screens daily, accounting for almost all their free time. That said, you should consider this decision from every angle.
4 Design Considerations for Utilizing Dark Mode
Before you commit to incorporating dark mode into your site design, here are four factors to consider:
Color Saturation
If you dim your background color, avoid an oversaturated, vibrant font. According to Web Content Accessibility Guideline 2.1, it is not accessible for those with disabilities or a sensitivity to bright light. The contrast ratio for text should be at least 4:5:1 unless it is large, decorative, hidden or part of branding.
Feature Toggling
Allowing website visitors to switch from light to dark mode is user-centric. This appeals to everyone, regardless of their visual needs or personal preferences. It is also beneficial for people who want a white background during the day and a black one at night. You could even transition your site from white to black on a day-night cycle.
Battery Life
Liquid crystal and OLED displays are common. While the former uses a constantly lit LED backlight, the latter turns off pixels to create true darkness. This design feature means only those with OLED panels will see meaningful battery life improvements.
Screen brightness is another factor. In one study, researchers found that an OLED phone will only see 3% to 9% power savings on average at 30% brightness. However, if users keep their screens at 100%, they could make their batteries last up to 69% longer. The variations are due to differences in models.
Website Colors
Pure white or black web design can strain visitors’ eyes. Instead, use shades or tinted hues. You can even use colors as long as you prioritize contrast. For instance, you could use the hexadecimal color codes #FFFF93 and #556B2F for your text and background colors.
Is Your Brand Compatible With Dark Mode?
Think about how you can make dark mode more “you.” Say you run a blog about the environment. The website uses tans, creams and pale greens. Replacing these hues with a plain gray background and white text could seem off-brand.
In this scenario, you could lean into blue-tinted black to create a night-sky-inspired theme. Alternatively, you could dim and desaturate your existing palette. Whatever you do, you should ensure the design aligns with your existing branding.
Designing With Dark Mode
Whether your website should adopt this design feature depends on your visitors’ preferences. If you are worried about them accepting the change, give them an option to turn it on or off. With these considerations in mind, the transition should be seamless, potentially encouraging more people to visit your site.
