12 Principles & Best Practices of Dark Mode Design

Many rumors and contradictions surround dark mode. Does it actually help reduce eye strain? Does it increase battery lifespan? Although studies question the positive influence of dark mode, many products offer it. You might have seen it in products like Slack, Twitter, YouTube, Instagram, and Sketch, among others.

Should you consider adding dark mode to your interface? There are several factors to consider. And if you do choose to offer it, follow these best practices to ensure your users are able to tap all its benefits.

What is Dark Mode?

Dark mode is a user interface (UI) design approach that utilizes a dark background with light-colored text, icons, and other UI elements. Also known as night mode or dark theme, dark mode is designed to reduce eye strain and improve readability in low-light environments. This design trend has gained significant popularity in recent years, with many apps and websites offering dark mode as an option. By providing a darker background, dark mode can make it easier for users to read content and interact with the interface, especially in dimly lit settings.

Dark mode design enhances accessibility

First, let's take a look at the research. Does dark mode actually enhance accessibility and strain our eyes less? An institute in Düsseldorf researched the effects of dark mode on reading.

Participants needed to detect the gap in a Landolt C visual chart and identify errors in a small passage. The results showed that light mode performs slightly better, but the difference is negligible.

Another research team at MIT's Agelab studied the effects of dark mode on contrast polarity. The participants had to discern characters in light vs. dark modes, daytime vs. nighttime, and at different font sizes. The result was the effect of ambient lighting on contrast polarity. In daylight, both modes performed similarly, but in simulated nighttime, light mode was better.

A team at the University of Minnesota found out that dark mode may be better for people with cloudy ocular media. The hypothesis is that the display emits less light and that light is less scattered.

As you can see, the findings don't seem conclusive. The best option is to allow users to switch to dark mode if they want to. Some people prefer the sleek modern look, while there are actual benefits for people with certain visual disabilities.

Dark mode saves battery

Aside from its sleek look, dark mode can help save battery on devices with OLED screens. Unlike LCD screens, where a backlight always emits light, OLED screens generate light individually for each pixel. Pure black pixels on OLEDs use no power, while dark grey pixels use minimal energy. In contrast, LCDs, found in most laptops and budget monitors, have a constant backlight that consumes the same power regardless of screen color, so dark mode doesn’t save energy there.

OLED screens are mainly used in smartphones, such as those from Samsung, LG, and Apple, offering greater power efficiency. As OLED technology expands, dark mode’s popularity will likely continue to grow.

Dark mode creates aesthetic appeal

Although some consider dark mode a recent design trend, it's actually older than you might think. Its earliest use goes back to the days of the old CRT monitors that displayed green text on a black background.

Nowadays, dark mode is more of a design choice, and it's hard to deny its aesthetic appeal. People prefer dark mode when working at night or in dimly lit environments. It also seems perfect for late-night entertainment. When watching Netflix at night, dark mode creates the atmosphere of being at the cinema. Dark themes not only enhance the visual experience but also reduce eye strain and visual fatigue, making them a popular choice for many users.

In general, dark-colored palettes evoke the feeling of high status and exclusiveness. They are also associated with luxury, elegance, and wealth. At the same time, dark colors can have negative connotations like death, grief, depression, or even evil. So it's important to carefully choose the color palette for your dark mode design.

Tip! Learn more about the different associations that colors evoke in our Traditional Color Meanings lesson.

Avoid direct inversion of light to dark

Getting dark mode right requires some effort on the part of the designer. Believe it or not, one does not simply invert colors to create a dark mode palette. Doing so will break layout consistency, reduce overall hierarchy, and severely decrease readability.

The trick is to use modified contrast based on your existing branding. Starting with fundamental colors — define primary and secondary colors and colors for surfaces, including page background and components. Don't forget to meet the 4.5:1 contrast ratio for normal text.

Use desaturated colors in dark color palette

Saturation describes the color's purity, intensity, and richness. Saturated colors are dense and vibrant and don't contain any gray. The bad news is that they have difficulty passing the WCAG (Web Content Accessibility Guidelines) color contrast ratio test. In turn, desaturated colors are likely to agree with the AA standard of at least 4.5:1 for color contrast ratio with the body text. Plus, they are more comfortable for the eyes against the dark background.

Using dark gray instead of pure black in dark mode designs can provide a more visually comfortable experience by reducing high contrast that can strain users' eyes.

Tip! To learn more about WCAG recommendations on color contrast, check out Accessible Colors lesson.

Retain brand identity

Dark colors dominate in dark mode, of course. So, if your brand colors are on the lighter side, should you change them? Material Design considers it okay to use saturated brand colors — provided you don't go overboard. Use them only for the most prominent branded elements, like a logo or a branded button. It will help preserve your brand identity without breaking the visual hierarchy.

Avoid using pure black

High-contrast setups, like white on black, can be problematic for those with dyslexia and astigmatism. People with dyslexia find extreme contrast, like white text on black backgrounds, or vice versa, makes text harder to process. At the same time, those with astigmatism may see blurred or distorted white text on pure black backgrounds, making reading difficult. To avoid this, Material Design suggests using dark grey (#121212) instead as a background, as it improves text clarity and shadow depth.

Maintain sufficient text contrast

Pay particular attention to the text color contrast. According to WCAG, the color contrast ratio should be no less than 4.5:1 for normal-sized text. Large-scale text (which equals approximately 24px or 18.5px if bold) should have a contrast ratio of at least 3:1. Also, keep in mind that white text requires you to aim for a 15.8:1 ratio.

Use the WebAIM or Coolors contrast checkers to check if the color contrast ratio is sufficient.

Adjust error color contrast

Have you ever noticed how road signs are highly visible in the rain, snow, and even at nighttime? These signs carry essential information, and one way to ensure their visibility is to use the right contrast ratio.

Error messages in apps are similarly important. That's why they should have high color contrast and be immediately recognizable. Material Design recommends using a semi-transparent overlay with 40% opacity over the light mode's red for errors. The original error color is #B00020, which is transformed to #CF6679 by overlaying 40% white. It now meets AA-level contrast standards in dark mode.

Adjust state color contrast to meet AA-level standards

In light mode, button and input states are easily discernable. Hovered, enabled, focused, dragged, and tapped/clicked elements appear differently.

In dark mode, elements should have clearly distinguishable statuses, too. Make sure to adjust them to pass AA-level contrast standards. Material Design recommends using either a white or primary color at 12% overlay, depending on the content color.

Use elevation to communicate depth

Depth helps create visual hierarchy and emphasizes high-priority elements. For example, you might want to draw users' attention to the CTA button or a warning notification. How can you create the illusion of depth in dark mode? In light mode, designers usually use shadows, but they aren't very prominent against a dark background.

The best practice in dark mode is to create elevation. You can do this by developing a system of layers with lighter colors for higher levels and darker for lower ones. Another way to do this is to apply an overlay with varying transparency for the same result. Use higher levels of transparency for important elements like buttons and lower levels for background.

Allow users to turn dark mode on and off

Considering the controversial nature of the dark mode, you might start wondering if your product even needs it. There are many reasons why users might want to switch to dark mode. Some people prefer working and relaxing in dimly lit environments, while others prefer dark designs. There are also benefits for people with certain visual impairments. The benefits of having a dark mode option certainly outweigh the effort spent on designing it.

Keep in mind that users love having a choice and being in control. So, provide them the option to change defaults and turn dark mode on and off! Offering both light and dark themes can significantly enhance user experience and engagement, as it caters to different preferences and needs.

While dark mode might not be the ultimate fix for eye strain or battery life, it offers real benefits that can’t be ignored. Its rising popularity shows that users appreciate having the option, especially in low-light settings or simply for a different aesthetic.

Images and Media

When it comes to images and media in dark mode, it’s essential to consider how they will appear on a dark background. Here are some tips to ensure your visuals are effective:

• Use a Dark or Muted Color Palette: Images with dark or muted colors blend better with dark backgrounds, preventing visual overload.
• Avoid Bright or Saturated Colors: Bright or highly saturated colors can be overwhelming on a dark background. Opt for more subdued tones.
• Adjust Brightness and Contrast: Consider using filters or overlays to tweak the brightness and contrast of images, making them more readable on a dark background.
• Light or White Icons and Graphics: Icons and graphics should have a light or white color scheme to provide sufficient contrast against the dark background.
• Test in Different Lighting Conditions: Ensure your images and media are readable and visually appealing in various lighting conditions, from low-light to bright light environments.

By following these tips, you can ensure that your images and media complement your dark mode design, enhancing the overall user experience.

User Experience and Testing

To ensure a positive user experience in dark mode, thorough testing of your design is crucial. Here are some tips to help you get it right:

• Test in Various Lighting Conditions: Evaluate your dark mode design in different lighting environments, including low-light and bright light settings, to ensure readability and usability.
• Conduct User Testing: Gather feedback from users on the readability and usability of your dark mode design. This can provide valuable insights into potential improvements.
• Use Accessibility Checkers: Tools like accessibility checkers can help ensure your dark mode design meets accessibility standards, making it usable for a wider audience.
• Test Across Devices and Platforms: Ensure consistency and compatibility by testing your dark mode design on various devices and platforms.
• A/B Testing: Consider using A/B testing to compare the performance of your light and dark mode designs. This can help you understand user preferences and optimize the design accordingly.

By following these tips and best practices, you can create a dark mode design that is both visually appealing and user-friendly. Remember to prioritize readability, accessibility, and user experience when designing for dark mode.