13 Principles of Dark Mode Design

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.^[1] 

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.^[1]

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.^[2]

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. 

Apart from the sleek and elegant look, dark mode can also save battery energy on certain devices. Namely, devices with OLED screens. The reason is they generate light for each pixel individually, and black pixels don't use any power.

In contrast, LCD screens use a backlight. This means that a panel behind the screen generates a constant white light anytime the screen is on. So even if the screen is black, the amount of light emitting is the same, and dark mode makes no difference. Nearly all laptops have LCD screens, as well as most budget desktop monitors.

OLED screens, on the other hand, are mostly used in smartphones. You can find them in Samsung, LG, and Apple products. Such devices are proving to be power efficient and have larger battery capacity. In the future, we'll probably see more OLED screens, which means that dark mode is here to stay.

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.

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.

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 make sure they meet the 4.5:1 contrast ratio for normal text.^[3]

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.

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.^[4] 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.

Pure black is never a good choice. Paradoxically, dark mode rarely contains true black, as it can severely hurt readability. Instead, Material Design recommends using dark grey (#121212) as the dark background color.^[5] Also, drop shadows are more visible against a gray background and create a much better sense of depth.

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.^[6]

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

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.^[7]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.

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.^[8]

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.

In light mode, designers swear by shadows as a tool for expressing elevation. However, in dark mode, shadows aren't that reliable. Also, they don't feel natural since there's no light source in a dark environment.

Instead, use elevation. The higher a surface's elevation, the lighter the surface gets. If you still want to use shadows, stick with dark gray as a background color. Compared to true black, a dark gray surface can much better express contrast, elevation, and depth.

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!