{"id":19731,"date":"2025-09-29T10:00:34","date_gmt":"2025-09-29T09:00:34","guid":{"rendered":"https:\/\/then.agency\/articoli\/dark-mode"},"modified":"2026-10-07T22:35:10","modified_gmt":"2026-10-07T21:35:10","slug":"dark-mode","status":"publish","type":"post","link":"https:\/\/then.agency\/en\/articoli\/dark-mode","title":{"rendered":"Dark mode: how it affects usability and design"},"content":{"rendered":"<p><strong>Dark mode<\/strong> is not just an aesthetic trend: it is an <strong>Experience Design<\/strong> choice that influences perception, readability, usability and even the emotional relationship with the brand.<br \/>Born as an alternative for reducing eye strain, it has now become a strategic component for those designing accessible, customizable digital products.<\/p>\n<p>The contemporary user expects to <strong>choose the experience<\/strong> 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.<\/p>\n<p>The goal is therefore not to &#8220;make everything dark&#8221;, but to <strong>design a coherent visual system<\/strong> able to adapt to people&#8217;s real needs, respecting accessibility logic and the principles of cognitive ergonomics.<\/p>\n<h2>Dark mode and visual perception<\/h2>\n<p>The effectiveness of dark mode is closely tied to how the human eye perceives contrast and light.<br \/>According to <a href=\"https:\/\/www.nngroup.com\/articles\/dark-mode\/\" target=\"_blank\" rel=\"noopener\"><strong>Nielsen Norman Group<\/strong><\/a> (&#8220;<a class=\"cursor-pointer\" target=\"_new\" rel=\"noopener\">Dark Mode vs. Light Mode: Which Is Better?<\/a>&#8220;), 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 <strong>harder to read<\/strong>, due to lower light reflection.<\/p>\n<p>From a physiological point of view, dark mode affects two fundamental elements:<\/p>\n<ul>\n<li><strong>Visual accommodation<\/strong>, that is, the eye&#8217;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.<\/li>\n<li><strong>Halation<\/strong>, the phenomenon in which the light of light text on dark backgrounds spreads beyond the outlines, reducing sharpness and readability.<\/li>\n<\/ul>\n<p>To reduce these effects, the best design systems &#8211; such as Google&#8217;s <strong><a href=\"https:\/\/m3.material.io\/styles\/color\/dark-theme\" target=\"_blank\" rel=\"noopener\">Material Design<\/a><\/strong> &#8211; suggest using <strong>dark gray backgrounds<\/strong> (not absolute black) and controlled contrasts, maintaining a more uniform <strong>average luminance<\/strong>.<br \/>This approach makes it possible to keep a stable visual balance, avoiding the &#8220;glare&#8221; effect created by pure whites on deep blacks.<\/p>\n<h2>Design basics for an effective dark mode<\/h2>\n<p>Designing a dark mode means <strong>redefining the visual hierarchy<\/strong> and the way the system communicates depth, priority and interaction. It is not a simple &#8220;inverted mode&#8221;, but a structured review of all the layers of the interface.<\/p>\n<h3>Colors and perceptual contrast<\/h3>\n<p>Contrast is the foundation of visual usability. However, in dark mode contrast must not be excessive.<br \/>According to <strong>WCAG 2.1 (Web Content Accessibility Guidelines)<\/strong>, 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.<br \/>A good balance is achieved using <strong>#121212 or #1C1C1C<\/strong> backgrounds and <strong>#E0E0E0<\/strong> or <strong>#BDBDBD<\/strong> text, avoiding pure white (#FFFFFF).<\/p>\n<h3>Typography and micro-hierarchies<\/h3>\n<p>Readability in dark mode requires more careful typographic design:<\/p>\n<ul>\n<li>prefer clean <strong>sans-serif fonts<\/strong> (e.g. Inter, Roboto, Helvetica Neue);<\/li>\n<li>slightly increase the <strong>text size<\/strong> (+1 or +2 pt);<\/li>\n<li>increase the <strong>line spacing by 10-15%<\/strong>;<\/li>\n<li>use light but not white colors, to reduce halation.<\/li>\n<\/ul>\n<p>In addition, the <strong>visual micro-hierarchy<\/strong> (spacing, weights, secondary colors) must remain consistent with light mode. In a scalable design system, this means defining separate but semantically equivalent color tokens.<\/p>\n<h3>Depth and layering<\/h3>\n<p>In a light interface, shadows create depth. In dark mode, instead, it is <strong>light<\/strong> that defines the visual planes.<br \/>The calibrated use of <strong>lighter tones<\/strong> and <strong>delicate glows<\/strong> 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.<\/p>\n<h3>Brand colors and visual accents<\/h3>\n<p>Every color in dark mode must be tested for <strong>perceived luminance<\/strong>. A corporate blue, for example, can appear more saturated and disturbing on a dark background.<br \/>The right approach is to create <strong>a parallel palette<\/strong> \u2014 with softened or desaturated versions \u2014 so as to maintain recognizability and visual comfort.<\/p>\n<p>It is also useful to design <strong>dynamic color tokens<\/strong> in the design system:<br \/><code>brand-primary-dark<\/code>, <code>brand-secondary-dark<\/code>, etc.<br \/>In this way visual consistency is maintained automatically across all components.<\/p>\n<h2>Dark mode and usability: the evidence from research<\/h2>\n<p>The most authoritative research agrees on one point: dark mode does not improve usability in the absolute, but <strong>under certain conditions and for specific goals<\/strong>.<\/p>\n<p>The study by <a href=\"https:\/\/www.interaction-design.org\/literature\/article\/dark-mode-in-ux-design-advantages-and-disadvantages\" target=\"_blank\" rel=\"noopener\"><strong>Interaction Design Foundation<\/strong><\/a> (&#8220;<a class=\"cursor-pointer\" target=\"_new\" rel=\"noopener\">Dark Mode in UX Design: Advantages and Disadvantages<\/a>&#8220;) shows that:<\/p>\n<ul>\n<li>Dark mode increases <strong>visual comfort<\/strong> for long-duration tasks.<\/li>\n<li>It reduces the <strong>perception of brightness<\/strong> and eye strain.<\/li>\n<li>But it can <strong>slow reading<\/strong> and reduce comprehension of complex texts.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/dark-mode\/\" target=\"_blank\" rel=\"noopener\"><strong>Nielsen Norman Group<\/strong><\/a> adds a key element: users tend to <strong>perceive dark mode as more &#8220;modern&#8221; and &#8220;technological&#8221;<\/strong>, but not necessarily more efficient.<br \/>This suggests that dark mode has not only a functional impact, but also an <strong>emotional and perceptual<\/strong> one.<\/p>\n<p>In terms of <strong>user engagement<\/strong>, data collected by Medallia and Qualtrics show that the ability to customize the interface \u2014 including the choice of mode \u2014 positively affects <strong>satisfaction and loyalty<\/strong>. The user who can adapt the experience to their needs develops a sense of <strong>autonomy and control<\/strong>, two fundamental levers in experience design.<\/p>\n<h2>When to choose dark mode<\/h2>\n<p>Dark mode is not always necessary. In certain cases it can even compromise the user experience.<br \/>Here are the main scenarios in which it makes sense to implement it.<\/p>\n<h3>Low-light environments<\/h3>\n<p>This is the ideal use situation. The dark interface reduces the light impact and improves the readability of visual content (videos, photos, charts).<\/p>\n<h3>Prolonged or continuous use<\/h3>\n<p>Development apps (like VS Code), streaming platforms or design software benefit from a dark mode to reduce eye strain.<\/p>\n<h3>Energy optimization<\/h3>\n<p>On OLED displays, dark mode reduces consumption by up to <strong>50%<\/strong>, a technical advantage that reinforces the perception of attention to sustainability.<\/p>\n<h3>Visual identity<\/h3>\n<p>Technology and luxury brands adopt dark mode to convey innovation, precision and control. However, there must be <strong>consistency with the brand&#8217;s visual tone of voice<\/strong>: an educational or healthcare product, for example, might not benefit from it.<\/p>\n<h2>Mistakes to avoid when designing dark interfaces<\/h2>\n<ol>\n<li><strong>Absolute blacks<\/strong>: they create excessive contrast and make the interface feel &#8220;flatter&#8221;.<\/li>\n<li><strong>Colors that are too vivid<\/strong>: they saturate the visual space and disturb concentration.<\/li>\n<li><strong>Inverted hierarchies<\/strong>: secondary or disabled colors that end up more prominent than the primary ones.<\/li>\n<li><strong>Inconsistency between light and dark mode<\/strong>: the information structure must stay identical, even if the palette changes.<\/li>\n<li><strong>No testing in real conditions<\/strong>: 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.<\/li>\n<\/ol>\n<h2>Dark mode and accessibility<\/h2>\n<p>One of the most widespread myths is that dark mode is automatically &#8220;more accessible&#8221;. In reality, <strong>there is no universally better mode<\/strong>: it all depends on the user&#8217;s visual and cognitive characteristics.<\/p>\n<p>For example, people with <strong>astigmatism<\/strong> or <strong>mild visual impairments<\/strong> find dark text on a light background more readable. Conversely, those who suffer from <strong>photophobia<\/strong> or work in dark environments prefer dark interfaces.<br \/>For this reason, the <strong>WCAG<\/strong> guidelines do not prescribe a mandatory mode, but recommend the ability to <strong>switch or customize themes<\/strong>.<\/p>\n<p>An accessible design should therefore:<\/p>\n<ul>\n<li>let the user choose their preferred mode;<\/li>\n<li>ensure minimum contrast compliant with WCAG standards;<\/li>\n<li>test color rendering on different screens;<\/li>\n<li>provide high-contrast versions for those with specific needs.<\/li>\n<\/ul>\n<p><strong>Dark mode is inclusive only if it is a choice, not an imposition.<\/strong><\/p>\n<h2>Best practices for integrating dark mode into a design system<\/h2>\n<p>Integrating dark mode into a complex product requires a <strong>scalable structure<\/strong>, not a one-off intervention.<\/p>\n<ol>\n<li><strong>Create a semantic color architecture<\/strong><br \/>Color tokens must express roles (e.g. &#8220;primary&#8221;, &#8220;background&#8221;, &#8220;on-surface&#8221;) rather than RGB values. This simplifies the management of light and dark variants.<\/li>\n<li><strong>Establish a dynamic contrast ratio<\/strong><br \/>Define adaptation rules for text and components based on ambient brightness or the system theme.<\/li>\n<li><strong>Test in varying environments<\/strong><br \/>The experience must be validated in different lighting conditions and with real users.<\/li>\n<li><strong>Define neutral components<\/strong><br \/>Buttons, cards and tooltips must be adaptable, avoiding gradients or patterns that work in only one mode.<\/li>\n<li><strong>Manage the transition between modes<\/strong><br \/>The switching animation must be smooth and progressive (fade-in\/out), to reduce cognitive disorientation.<\/li>\n<\/ol>\n<p>In short, a quality dark mode is not an additional theme, but a <strong>dimension of the design system<\/strong>, an integral part of experiential consistency.<\/p>\n<h2>Dark mode and brand identity<\/h2>\n<p>A good dark mode not only improves usability, but <strong>strengthens the brand experience<\/strong>.<br \/>Color, in this context, is a language. If the brand communicates innovation, minimalism or exclusivity, a dark mode can amplify the message.<\/p>\n<p>However, consistency is fundamental: the brand must not appear different between the two modes, but <strong>recognizable and coherent<\/strong>.<br \/>At the design system stage, it is therefore useful to establish a &#8220;visual mood board&#8221; that defines how the brand&#8217;s values and personality are reflected in the dark version too.<\/p>\n<h2>Conclusion<\/h2>\n<p><strong>Dark mode<\/strong> is one of the most significant choices in contemporary design: a ground where aesthetics, visual neuroscience and accessibility meet.<br \/>It is not a fashion, but <strong>a design responsibility<\/strong>: choosing how and when to use it means understanding contexts of use, validating with data and respecting differences between users.<\/p>\n<p>A mature approach to dark mode goes through:<\/p>\n<ul>\n<li>research and empirical validation;<\/li>\n<li>integration into the design system;<\/li>\n<li>attention to consistency between light and dark experiences;<\/li>\n<li>measuring the real impact on usability and satisfaction.<\/li>\n<\/ul>\n<p>At <strong>Then<\/strong>, we design digital experiences that combine scalable design systems, UX research and brand strategy, to create truly accessible, high-performing products.<br \/>If you want to understand how to integrate a <strong>consistent, inclusive dark mode<\/strong> into your digital ecosystem, <a href=\"https:\/\/then.agency\/en\/book-a-call\"><strong>let&#8217;s talk<\/strong><\/a>: we can help you design experiences that work, in every mode.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Not just aesthetics: contrast, typography and depth for a truly usable dark mode.<\/p>\n","protected":false},"author":10,"featured_media":18327,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"Dark mode improves visual comfort and usability. Find out the benefits, limits and best practices for accessible design.","rank_math_focus_keyword":"dark mode","fonti_articolo":"<ul>\n<li data-start=\"12501\" data-end=\"12619\"><a href=\"https:\/\/www.nngroup.com\/articles\/dark-mode\/\">Nielsen Norman Group, \"Dark Mode vs. Light Mode: Which Is Better?\"<\/a><\/li>\n<li data-start=\"12501\" data-end=\"12619\"><a href=\"https:\/\/www.interaction-design.org\/literature\/article\/dark-mode-in-ux-design-advantages-and-disadvantages\">Interaction Design Foundation, \"Dark Mode in UX Design: Advantages and Disadvantages\"<\/a><\/li>\n<li data-start=\"12501\" data-end=\"12619\"><a href=\"https:\/\/m3.material.io\/styles\/color\/dark-theme\">Material Design, \"Dark Theme Guidelines\"<\/a><\/li>\n<\/ul>\n","riassunto":"<p>Dark mode is not a matter of taste. It changes the perception of contrast, readability and the way the eye reconstructs the depth of an interface.<\/p>\n<p>Making everything dark is not enough: you need recalibrated contrast, typography that holds up on a black background, a layering system and brand colors that do not lose strength.<\/p>\n<p>When it makes sense to offer it, what usability research says, the mistakes that recur most often and the relationship with accessibility.<\/p>","footnotes":""},"categories":[55],"tags":[],"class_list":["post-19731","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-and-ui-design"],"_links":{"self":[{"href":"https:\/\/then.agency\/en\/wp-json\/wp\/v2\/posts\/19731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/then.agency\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/then.agency\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/then.agency\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/then.agency\/en\/wp-json\/wp\/v2\/comments?post=19731"}],"version-history":[{"count":0,"href":"https:\/\/then.agency\/en\/wp-json\/wp\/v2\/posts\/19731\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/then.agency\/en\/wp-json\/wp\/v2\/media\/18327"}],"wp:attachment":[{"href":"https:\/\/then.agency\/en\/wp-json\/wp\/v2\/media?parent=19731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/then.agency\/en\/wp-json\/wp\/v2\/categories?post=19731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/then.agency\/en\/wp-json\/wp\/v2\/tags?post=19731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}