fbpx

Dark Mode Tips for UI 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.

dark mode ui tips

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.

dark mode ui tips

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%
dark mode ui tips

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!

Talk to us about UX and UI design!

More from the blog
app-investment
APP INVESTMENT: HOW DO I GET MY APP FUNDED?

So, you have that great app idea and don’t know what to do next? Well, lucky for you, you are in the right place.

start-up funding
APP INVESTMENT: WHAT ARE THE STAGES AND HOW MUCH DO YOU NEED TO RAISE

Start-up funding is no easy feat, and there is no one-size-fits-all approach to it.