Dark mode design in UX interfaces
Today, we are more accustomed to browsing websites with light motifs and backgrounds because it has been the norm on the internet for decades.
It’s important to remember that the earliest interfaces had black screens (more akin to dark mode), with plain text in various shades. The advancements in graphical interfaces since the 1970s by the company Xerox, and later continued and improved by companies like Apple, have led us to associate pages with white backgrounds and interfaces as the initial premise in the world of user interfaces.
However, these interfaces present a series of problems that have begun to affect designers and their approach to building graphic flows, such as the extended viewing on white interfaces, which can cause visual fatigue and gradual discomfort for users.
Imagine an office worker who spends 8 hours in front of a screen; the brightness affects eye strain and increases the risk of long-term vision problems. Additionally, white pages imply less distinction in their contents, which can sometimes cause confusion or disorientation during navigation, especially when urgent or critical tasks are required.
Advantages of dark mode
That’s why more and more websites are offering alternatives with color combinations ranging from light to dark in their interfaces: dark mode is an alternative to the standard approach of creating interfaces dominated by whites, incorporating a new scheme of dark and black tones.
The objective isn’t only to reduce visual fatigue; dark mode brings a series of advantages and objectives that make more users want it in the interfaces they visit daily:
- It focuses content more effectively, keeping the UI in the background and helping users quickly find the content they need. This speeds up users’ decision-making processes.
- It conveys a more professional, serious, and sophisticated appearance. Many professional design and investment tools incorporate dark mode by default, inheriting a professional and elegant tone.
- It enhances visual ergonomics, reducing eye strain and increasing productivity.
- With general dark tones, it conserves device energy better, offering advantages for users’ Carbon Footprint. For devices that have this feature, it also allows easier screen adjustments according to ambient light conditions, thus improving the user experience in nighttime settings.
- Additionally, it’s a growing user trend, so incorporating dark modes can enhance the usability of some digital products and websites.
Considerations for adopting dark mode
Given these advantages, it’s clear that dark mode offers significant benefits for inclusivity, user comfort, and professional performance.
However, the method of creating interfaces in dark mode is not solely based on switching white tones to black. There are crucial considerations when modifying a light base interface and transforming it into dark mode:
- The color palette you are going to apply in your dark mode must consider color combinations with functional contrasts, following WCAG color accessibility measures. Ideally, it is recommended that hue contrasts are AA for those important elements in a dark interface, which are: sreen background, layer background, secondary layer background color, action color, main text and subtext.
- Although it may seem contradictory, the pure black tone known as #FFFFFF is not recommended for use. Pure black is a color that does not exist in nature, so our eyes are not prepared for that tone on backgrounds, and cognitively, we do not process it correctly, as it creates contrast and can make other colored elements “dance,” like typography. The base color of your dark mode palette can be close to pure black, but it should never be exactly that. A scale based on dark grays is ideal for this purpose. Avoid saturated colors, as they can cause visual vibration, especially in mobile interfaces.
- Initially, the desired color palette should maintain the colors already set by corporate guidelines. We need to be cautious that our interfaces remain corporate, so those colors that are brand-identifying and easily recognized by the user should be retained. Additionally, the color system must be defined by function, as in light mode, as this helps prepare it for potential changes and modifications in the future.
- In dark modes, simplicity is the key to success. Creating hierarchies of dark color with a limit on accent colors, with fewer shades of the same color or different colors, benefits user feedback and cognitive load, and it also helps design teams manage this new palette effectively and quickly, speeding up design processes. Five different color shades and four different colors would be ideal.
- Finally, depth must be understandable: those elements closest should be lighter, with the ones with more white elements, like text, being the brightest. Therefore, the darkest shades will occupy spaces further away in depth, always without the use of shadows (since they are not perceived correctly on dark backgrounds). What is closest to the user should be what has the most brightness. This is why, for elements like text, one can play with the opacity of their whites. Texts with greater emphasis can use white opacity of 90%, with medium emphasis, 60–70%, and with texts in a disabled state, 40%.
In short, dark mode, besides being an aesthetic trend choice, is also an integral strategy to improve accessibility and user experience.
This is a translation of the following article from our corporate website:
