Dark mode tips for app designers
Younger generations may not remember this, but Dark Mode used to be the default setting when computers first became available to the masses. Bright green and white text adorned the black screen and allowed users to type commands in the early days of command-line interfaces. As technology evolved, the GUI (Graphic User Interface) took over our screens with a familiar paper look – black text on a white background.
Dark Mode best practices
Similar to many other trends, dark interfaces have recently seen a rebirth. From Chrome’s Dark Mode extension to phone operating systems and apps like Instagram, the option to swap a bright interface for a dark one seems to be everywhere. With this in mind, we wanted to shed some light (or dark?) on how UI designers can achieve the best results when designing for Dark Mode. It might not be rocket science, but there are some pitfalls that are easier to fall down than you might expect.
Contrast is good – but too much of it can strain the eyes
To begin with, a common mistake we’ve seen is going for the polar opposites when designing for Dark Mode. Instead of using pure black and pure white, tone down the shades a bit to achieve a softer look. This way, it will be easier for the eyes of users to adapt to your Dark Mode design.
Accessibility, Colour, and Saturation
In order to make the internet and phone apps as accessible as possible, designers have to comply with the Web Content Accessibility Guidelines (WCAG). These guidelines set out essential design requirements that can help those with disabilities navigate the web.
When you’re designing for Dark Mode, one thing to keep in mind is colour saturation. Highly saturated colours won’t pass the WCAG standard and should generally be avoided. To avoid inaccessible colour combinations, you can use WebAIM’s Contrast Checker Tool.
Moreover, when you use colours in Dark Mode UI designs, you need to ensure they have enough contrast with the text. Remember, too much will strain the eye, but too little will make your design pale and difficult to navigate.
Depth and Shadows
To communicate depth in Dark Mode, you IU designers can adjust the brightness and shadows of elements. It is important to remember here that Dark Mode is not the opposite of light mode. You shouldn’t just switch to the opposite side of the colour wheel and think the job is done. Instead, adjust the shades of light and dark grey to achieve a natural balance. The same goes for shadows – they shouldn’t stay the same as they are in light mode. Dark Mode designs usually require a softer drop shadow or in some cases even no shadow at all.
Opacity and Emphasis
Similar to shades of a colour, in Dark Mode UI designers use opacity to communicate emphasis. The brighter and element or headline is, the more important it appears. Here is a general rule of opacity and emphasis you can use for your designs:
- Text you want to emphasise the most should have an opacity of 87%
- Communicate medium emphasis with text opacity at 60%
- Bring the opacity of disabled fields down to 38%
Save it for later!
Was this article helpful? Save it in your bookmarks and come back to it next time you’re designing a Dark Mode UI. You can also get in touch with us with any feedback or questions, we’re alwasy happy to hear from our readers!
See more of our blog posts
UX and UI Design: What’s the difference
UX and UI Design: What's the difference? When it comes to creating products, one of the main points to consider is how users will interact with them. UX and UI, or User Experience and User Interface, are the two main drivers of success in this area. Whether you’re...
Type scale in mobile app UI design
Type scale in mobile app UI design ype scale is an important part of reading and understanding the text we see. It is defined as the progression of font sizes in the text we read and tends to be standard across a website or an app. In this blog post, we’ll take a look...