Using dark color schemes in UI design is nothing new. For instance, Adobe Creative Suite has been using a dark interface for years. However, it was in 2019 when the dark mode UI became one of the HOTTEST design trends. It seems like users have gone crazy over the dark theme after getting dark mode options in MacOS, Apple iOS, and Android, as well as across popular apps and platforms.
But don’t rush to switch to the dark mode if you still haven’t. Research suggests that while dark mode may present some advantages for low-vision users, in users with normal vision, light mode leads to better performance most of the time.
The popular pros of using dark mode are:
The popular cons of using dark mode are:
You might’ve noticed that many streaming services websites (Smart TVs, Game Consoles, and TV and Movie Apps) have dark-themed UI designs. There’s a simple explanation to that - as people mostly use these websites in the evening, and they are viewed from a distance of 6-10 feet, in dimly lit rooms. Plus, colorful content stands out better on dark-themed UIs.
Design experts emphasize that dark mode UI works well in the right context, environment, application, and use. So, in general it’s a good idea to use dark mode when you need to:
Typically, using dark mode is a bad idea for text-heavy and data-heavy projects. It’s also a bad choice when using a variety of content types (text, images, video, data tables, dropdowns, fields, etc.). According to design experts, dark UIs mostly work well for simple content with bits of text here and there.
Why? Dark mode makes it challenging to maintain enough contrast and readability. It’s quite easy to pick colors that work on a white background, while the color palette that works against the dark background is limited.
Bad Example (poor contrast):
If you’re still adamant about using dark theme on your website or app, make sure to follow these simple rules to avoid common design mistakes.
Google’s Material Design guideline suggests using dark grey is much better than black. Dark grey provides a “broader range of depth”. According to the guide, “dark gray surfaces also reduce eye strain, as light text on a dark gray surface has less contrast than light text on a black surface.” The recommended dark theme surface color in Material Design is #121212.
Saturated colors can cause accessibility issues as they don’t pass WCAG’s accessibility standard of at least 4.5:1 for body text against dark surfaces. Also, they can induce eye strain.
Less saturated colors improve legibility and reduce visual vibration.
Saturated colors that visually vibrate against a dark background.
If you’re using light and dark modes in your project, creating complementary color palettes for both themes could be a good idea.
The contrast level between body text and the background should be at least 15.8:1. This ensures better readability even if the higher surfaces will be lighter.
Tools to check the contrast ratios:
Shadows are poorly visible on the majority of dark mode elements. This is why they should be used less frequently. There is another way to communicate hierarchy.
Playing with elevation is the way to create hierarchy. Background surface should be the darkest of all, while UI elements that lay on top of it should be slightly lighter.
Well, you can’t know until you try. Unfortunately, there’s no universal secret to using the dark mode. What you can do is follow the Material Design guidelines and perform tests in light & dark themes.
It’s a good idea to provide viewers with an option of switching between both themes. Switching UI theme should always be in the user's control. That being said, researchers from the Nielsen-Norman Group strongly recommend that designers allow users to switch to dark mode if they want to — for three reasons: (1) there may be long-term effects associated with light mode; (2) some people with visual impairments will do better with dark mode; and (3) some users simply like dark mode better.
That’s all for this video. Have you used the dark theme in your projects? Share your experiences in the comment section below!
If you liked this video - give it a thumbs up. Subscribe to our YouTube channel for more web design inspiration videos and Elementor tutorials! See you in the next video.
Neomorphism Elementor Pro Tutorial
Elementor Tutorial: How to Create Video Masks in Elementor Free?
3 Easy Ways To Create Blob Shapes In Elementor
Create Elementor Slider with Custom CSS
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.
Leave a Reply
You must be logged in to post a comment.