Dark mode already existed before Apple released it with its iOS 13 operating system. Android had already incorporated it natively and numerous applications, both web and mobile device operating systems, already used what is known as negative contrast polarity.
It is true that Apple has managed to further popularize this mode and even turn it into a design trend.
What is Dark Mode
Dark mode displays dark surfaces on most of a . In most cases it is designed to be a complementary mode to light mode.
The dark mode, fundamentally, has been developed to reduce the luminance emitted by the screens of the devices. Something important to keep in mind is that despite using dark surfaces we must not forget the minimum color contrast ratios in the texts, links and other components of the system.
It’s not about using black and white. It’s all about choosing the right colors that provide good contrast against dark backgrounds. If a link can continue to be blue, it is better to keep it than to change it to white and that it does not differ from any other text that is not a link. As long as the blue has the necessary contrast on the dark background to make it legible.
We need to make sure that the content remains readable in the dark mode that we are designing and that it provides optimal contrast considering the transparencies. For example, on iOS or Android, when the system natively returns default options (such as when you touch a call button or a link that is a phone number and it pops up) it places a dark layer (Overlay) in between.
There are two types of contrast:
- Positive contrast: which refers to dark font text on a light background. Used for light mode.
- Negative contrast: which refers to light font text (for example, white) on a dark background (for example, black). Used for dark mode.
Key aspects of Dark Mode in terms of Usability and User Experience
Some key things about dark mode taking into account its purpose:
- Helps conserve power in device batteries. Especially in those mobile devices with screens with AMOLED technology. This is due to the fact that to achieve dark tones on this type of screen, the pixels are turned off, it is not done with the RGB mixture.
- They help improve visual ergonomics by reducing or minimizing eye strain by adjusting brightness based on ambient lighting conditions.
- Facilitates the use of screens in dark environments or environments.
Some studies endorse and support the Clear Mode
There is published research that seems to support that it is more beneficial for most users for characters to be dark on a white background. Especially for all those users who have a “normal” vision capacity without any type of affectation that reduces their abilities.
Published research seems to support this. A 2017 study in the journal determined that “dark characters on a white background lead to better readability and are strongly recommended regardless of the age of the viewer.”
In this other article, it was found in 2013 that “the typically higher luminance of positive polarity displays leads to better detail perception.”
Recommendations for the implementation of Dark Mode
Nielsen Norman Group in makes the following recommendations regarding the implementation of dark mode:
- Users should be allowed to switch to dark or light mode as they wish, as some visually impaired people improve their reading ability with dark mode and some users simply prefer dark mode.
- Applications intended for reading, such as blogs, periodicals, etc., must offer a dark mode.
Other recommendations about Dark Mode
Besides, I would like to add other recommendations such as the following:
- You need to understand the identity of the product. Before starting to design the dark mode, it is necessary to carry out a study on the brand and its identity so that it is expressed correctly in both light and dark themes.
- Functional qualities should be prioritized, favoring ease of use over design elements that do not serve a functional purpose.
- Choose the colors well in both modes. Always taking into account legibility, contrast and harmony between them. It is not recommended to choose highly saturated tones to avoid visual fatigue.
- Adjust the background colors according to the surface. For example, in Google’s Material Design, the background of the Body or Artboard is #121212. It is not a pure black. If there is a container raised or on top of that background, it should be a less pure black.
- The texts should not be a pure white color. That is, #fff. It is better to use #fff but with different degrees of opacity always taking into account contrast and readability.
- Adjust the colors of the rest of the components. There are components that should be highlighted for functionality. If a link needs to change color, it is better to change it to white and it goes unnoticed.
Facebook Comments
Disqus