5 Tips for Designing in Dark Mode

No matter what device you use, viewing in dark mode is now a standard option—and according to a recent study, around 82.7% of participants state that they prefer to use dark mode. Numerous brands today have incorporated the dark mode aesthetic seamlessly, including Apple, Facebook, Google, Youtube, and many more. 

When it comes to designing in dark mode, there’s an abundance of factors that play into the overall user interface. If you’re interested in learning about the world of dark mode—and how you can optimize it best for your brand—keep reading to learn our 5 tips to keep in mind. 

1. Determine if Dark Mode Fits Your Brand

Before you jump into designing in dark mode, we recommend doing a bit of exploring to determine if dark mode is the right fit for your brand. 

A few questions to consider include:

• Does it fit your brand’s overall aesthetic? 
• Is your website filled with body copy? Or is it more minimalistic with headers and subtext?
• Does your brand have a wide variety of colors that are used on your website or app? 

In dark mode, websites or apps with large sections of body copy are often a bit more difficult to read. This is especially important when it comes to reading light-colored text on a dark background.

The more complex your color palette is, the more difficult it might be to translate it to dark mode. It may not yield the same results, especially when it comes to color psychology and the overall feeling you want to achieve with your brand’s aesthetic. Dark mode can also increase difficulty when it comes to contrast and compliance with the standard Web Content Accessibility Guidelines (WCAG). 

2. Avoid Using True Black in Your Designs

When we think of dark mode, we might think it’s a simple switch: White turns black,  black turns white. But that’s actually not the case. 

Just because content is being converted into dark mode doesn’t mean that true black (#000000) should be used. In fact, when designing, true black should be avoided because it causes an increased strain on the user’s eyes. Instead, use other color options such as dark grays, darker blues, etc. 

In contrast, this same rule is applicable with true white. Instead of relying on true white (#ffffff), adjust to a different shade as true white can cause eye strain and challenges when reading the content.

3. Design with Contrast in Mind

When designing for any device, one word that constantly comes up is “contrast.” Text is something that should be a high area of focus—especially when we talk about accessibility for all of our users. In order to achieve this, WCAG guidelines should be followed. Standard text needs a contrast ratio of at least 4.5:1, and large-scale text should have a contrast ratio of at least 3:1.

All of your elements should be checked for this, starting with text and background colors, and then moving onto all other elements such as icons, buttons, cards, etc. If the contrast is missing, elements will blend in with one another and it may alter the entire flow of a site. Contrast helps with depth and when you remove that, you start to lose important elements. 

4. Avoid Using Saturated Colors in Your Designs

Have you ever been on a site before where the colors were just too bright and hurt your eyes? Saturated colors cause strain on your eyes because they create a sense of visual vibration. Whether you’re designing in light or dark mode, avoiding saturated colors is key. If you do need to use saturated colors to meet your brand guidelines, use them sparingly—and consider user testing in advance to ensure it’s not too overpowering. 

For dark mode colors, use desaturated palettes to create a calmer effect on your user. By making this change, it makes your user interface more enjoyable and creates a different tone as well. Plus, desaturated color palettes will easily pass WCAG ratios versus overly saturated color combinations. 

5. Don’t Just Make One Color Palette

If you ask someone what colors are associated with FedEx, the majority will say purple and orange. This response underscores the result of effective branding through a dynamic color palette. 

When setting your brand up for success on dark mode, make separate palettes for both light and dark mode so they pass accessibility standards while also complementing one another. As you navigate the complexities of accessible color combinations, I recommend checking out Accessible Colors. 

Let’s Work Together

Designing in dark mode requires a slightly different approach, but when done right, it adds a new, dynamic layer to your brand. Keep these five rules of thumb in mind as you navigate through the process—and if you’d like our team of developers to support your digital experience, we’d love to hear from you. 

×

Subscribe to Our Newsletter

If you made it this far, you should sign up for our monthly newsletter. Get our latest articles and insights delivered each month.

First Name*

Last Name*

Email*