Dark mode is not just an aesthetic trend: it is an Experience Design choice that influences perception, readability, usability and even the emotional relationship with the brand.
Born as an alternative for reducing eye strain, it has now become a strategic component for those designing accessible, customizable digital products.
The contemporary user expects to choose the experience best suited to their context and preferences. In this sense, dark mode is one of the most tangible applications of inclusive design. However, introducing it without a methodical approach can lead to readability problems, visual inconsistencies and difficulty interpreting the interface.
The goal is therefore not to “make everything dark”, but to design a coherent visual system able to adapt to people’s real needs, respecting accessibility logic and the principles of cognitive ergonomics.
Dark mode and visual perception
The effectiveness of dark mode is closely tied to how the human eye perceives contrast and light.
According to Nielsen Norman Group (“Dark Mode vs. Light Mode: Which Is Better?“), dark mode offers benefits only in specific visual contexts: dimly lit environments or prolonged use of interfaces. In bright light conditions, instead, light text on a dark background can be harder to read, due to lower light reflection.
From a physiological point of view, dark mode affects two fundamental elements:
- Visual accommodation, that is, the eye’s ability to adapt to changes in brightness. Moving from a dark page to a light one (or vice versa) can create discomfort if not handled with smooth transitions.
- Halation, the phenomenon in which the light of light text on dark backgrounds spreads beyond the outlines, reducing sharpness and readability.
To reduce these effects, the best design systems – such as Google’s Material Design – suggest using dark gray backgrounds (not absolute black) and controlled contrasts, maintaining a more uniform average luminance.
This approach makes it possible to keep a stable visual balance, avoiding the “glare” effect created by pure whites on deep blacks.
Design basics for an effective dark mode
Designing a dark mode means redefining the visual hierarchy and the way the system communicates depth, priority and interaction. It is not a simple “inverted mode”, but a structured review of all the layers of the interface.
Colors and perceptual contrast
Contrast is the foundation of visual usability. However, in dark mode contrast must not be excessive.
According to WCAG 2.1 (Web Content Accessibility Guidelines), the minimum contrast ratio for normal text is 4.5:1, but in dark mode it can be useful to aim for lower values (3:1 or 4:1) to avoid optical glare.
A good balance is achieved using #121212 or #1C1C1C backgrounds and #E0E0E0 or #BDBDBD text, avoiding pure white (#FFFFFF).
Typography and micro-hierarchies
Readability in dark mode requires more careful typographic design:
- prefer clean sans-serif fonts (e.g. Inter, Roboto, Helvetica Neue);
- slightly increase the text size (+1 or +2 pt);
- increase the line spacing by 10-15%;
- use light but not white colors, to reduce halation.
In addition, the visual micro-hierarchy (spacing, weights, secondary colors) must remain consistent with light mode. In a scalable design system, this means defining separate but semantically equivalent color tokens.
Depth and layering
In a light interface, shadows create depth. In dark mode, instead, it is light that defines the visual planes.
The calibrated use of lighter tones and delicate glows helps simulate the elevation of components without generating distortion. It is advisable to reduce the use of diffuse shadows and replace them with light gradients or luminous outlines.
Brand colors and visual accents
Every color in dark mode must be tested for perceived luminance. A corporate blue, for example, can appear more saturated and disturbing on a dark background.
The right approach is to create a parallel palette — with softened or desaturated versions — so as to maintain recognizability and visual comfort.
It is also useful to design dynamic color tokens in the design system:brand-primary-dark, brand-secondary-dark, etc.
In this way visual consistency is maintained automatically across all components.
Dark mode and usability: the evidence from research
The most authoritative research agrees on one point: dark mode does not improve usability in the absolute, but under certain conditions and for specific goals.
The study by Interaction Design Foundation (“Dark Mode in UX Design: Advantages and Disadvantages“) shows that:
- Dark mode increases visual comfort for long-duration tasks.
- It reduces the perception of brightness and eye strain.
- But it can slow reading and reduce comprehension of complex texts.
Nielsen Norman Group adds a key element: users tend to perceive dark mode as more “modern” and “technological”, but not necessarily more efficient.
This suggests that dark mode has not only a functional impact, but also an emotional and perceptual one.
In terms of user engagement, data collected by Medallia and Qualtrics show that the ability to customize the interface — including the choice of mode — positively affects satisfaction and loyalty. The user who can adapt the experience to their needs develops a sense of autonomy and control, two fundamental levers in experience design.
When to choose dark mode
Dark mode is not always necessary. In certain cases it can even compromise the user experience.
Here are the main scenarios in which it makes sense to implement it.
Low-light environments
This is the ideal use situation. The dark interface reduces the light impact and improves the readability of visual content (videos, photos, charts).
Prolonged or continuous use
Development apps (like VS Code), streaming platforms or design software benefit from a dark mode to reduce eye strain.
Energy optimization
On OLED displays, dark mode reduces consumption by up to 50%, a technical advantage that reinforces the perception of attention to sustainability.
Visual identity
Technology and luxury brands adopt dark mode to convey innovation, precision and control. However, there must be consistency with the brand’s visual tone of voice: an educational or healthcare product, for example, might not benefit from it.
Mistakes to avoid when designing dark interfaces
- Absolute blacks: they create excessive contrast and make the interface feel “flatter”.
- Colors that are too vivid: they saturate the visual space and disturb concentration.
- Inverted hierarchies: secondary or disabled colors that end up more prominent than the primary ones.
- Inconsistency between light and dark mode: the information structure must stay identical, even if the palette changes.
- No testing in real conditions: a dark mode tested only in the lab does not represent the behavior of the real user, who may alternate between different light sources during the day.
Dark mode and accessibility
One of the most widespread myths is that dark mode is automatically “more accessible”. In reality, there is no universally better mode: it all depends on the user’s visual and cognitive characteristics.
For example, people with astigmatism or mild visual impairments find dark text on a light background more readable. Conversely, those who suffer from photophobia or work in dark environments prefer dark interfaces.
For this reason, the WCAG guidelines do not prescribe a mandatory mode, but recommend the ability to switch or customize themes.
An accessible design should therefore:
- let the user choose their preferred mode;
- ensure minimum contrast compliant with WCAG standards;
- test color rendering on different screens;
- provide high-contrast versions for those with specific needs.
Dark mode is inclusive only if it is a choice, not an imposition.
Best practices for integrating dark mode into a design system
Integrating dark mode into a complex product requires a scalable structure, not a one-off intervention.
- Create a semantic color architecture
Color tokens must express roles (e.g. “primary”, “background”, “on-surface”) rather than RGB values. This simplifies the management of light and dark variants. - Establish a dynamic contrast ratio
Define adaptation rules for text and components based on ambient brightness or the system theme. - Test in varying environments
The experience must be validated in different lighting conditions and with real users. - Define neutral components
Buttons, cards and tooltips must be adaptable, avoiding gradients or patterns that work in only one mode. - Manage the transition between modes
The switching animation must be smooth and progressive (fade-in/out), to reduce cognitive disorientation.
In short, a quality dark mode is not an additional theme, but a dimension of the design system, an integral part of experiential consistency.
Dark mode and brand identity
A good dark mode not only improves usability, but strengthens the brand experience.
Color, in this context, is a language. If the brand communicates innovation, minimalism or exclusivity, a dark mode can amplify the message.
However, consistency is fundamental: the brand must not appear different between the two modes, but recognizable and coherent.
At the design system stage, it is therefore useful to establish a “visual mood board” that defines how the brand’s values and personality are reflected in the dark version too.
Conclusion
Dark mode is one of the most significant choices in contemporary design: a ground where aesthetics, visual neuroscience and accessibility meet.
It is not a fashion, but a design responsibility: choosing how and when to use it means understanding contexts of use, validating with data and respecting differences between users.
A mature approach to dark mode goes through:
- research and empirical validation;
- integration into the design system;
- attention to consistency between light and dark experiences;
- measuring the real impact on usability and satisfaction.
At Then, we design digital experiences that combine scalable design systems, UX research and brand strategy, to create truly accessible, high-performing products.
If you want to understand how to integrate a consistent, inclusive dark mode into your digital ecosystem, let’s talk: we can help you design experiences that work, in every mode.
