Designing dark mode: best practices for user interfaces
Writer :By: Admin
Dark mode is no longer an aesthetic novelty; for many users, it's a baseline expectation. Implementing it correctly, however, is a technical UI/UX challenge that goes far beyond a simple colour inversion. A poorly executed dark theme can harm readability, obscure interactive elements and fail accessibility standards. A well-executed one respects user preferences and improves comfort in low-light conditions.
At Excelsior Technologies, our UI/UX design process treats dark mode as a distinct, parallel system, not an afterthought. It requires deliberate engineering and design choices to get right. Here are the practices we follow when building dark mode into the web and mobile applications we develop.
Core practices for dark mode design
### Go beyond minimum contrast ratios WCAG guidelines require a contrast ratio of at least 4.5:1 for normal text. While essential, hitting this target on a dark background can be misleading. Excessively high contrast, like pure white text on a pure black background, can cause a halation effect where text appears to blur or bleed. The trade-off is that the most readable interface may not be the one with the highest possible contrast. We test for this perceptual issue, often finding that slightly off-white text on a dark grey background provides better clarity without strain.
### Desaturate your colour palette Bright, fully saturated colours that work well on a light background often appear to vibrate against a dark one, creating visual noise and drawing too much attention. Our approach is to create a dedicated, desaturated colour palette for dark mode. This maintains brand consistency while ensuring colours feel integrated and calm. The cost is increased complexity in your design system, requiring a robust set of colour tokens or CSS variables for both themes.
### Rethink elevation with light, not shadow On light UIs, we use dark shadows to communicate elevation and separate layers. In a dark UI, shadows are less effective. Instead, we use light. An element with higher elevation is physically closer to an implied light source, so its surface should be lighter. This means your top-most UI elements, like a modal window, will have the lightest dark-mode background colour. This is a fundamental shift in how to model a Z-axis.
### Avoid pure black for body backgrounds Using a `#000000` background creates the highest possible contrast with text, which can cause the eye strain we mentioned earlier. We recommend starting with a dark grey, such as `#121212`. This provides a dark enough surface to feel like 'dark mode' but softens the contrast to a more comfortable level. The trade-off is that every other colour in your palette must be tested against this specific grey, not just a generic 'dark' colour.
### Create adaptive icons and images Illustrations, logos and complex icons designed for a light background can look out of place or lose important details in dark mode. A dark logo may become invisible. The only reliable solution is to create a second version of these assets specifically for the dark theme. This adds to the design workload and requires a system for delivering the correct asset based on the active theme, but it's necessary for a polished interface.
### Engineer a robust theme-switching mechanism Giving users a choice is critical. Your application should respect the operating system's setting via the `prefers-color-scheme` media query, but also provide a manual override for users who want to defy that default. The choice must then be persisted. The engineering trade-off is the front-end work required to manage this state and prevent a 'flash of incorrect theme' when the application first loads.
### Test accessibility beyond colour contrast Accessibility in dark mode isn't just about colour. For some users, particularly those with astigmatism, light text on a dark background can be harder to read regardless of contrast. There is no single solution that works for everyone, which is why providing a choice is so important. Our process includes testing on a range of devices, in different ambient lighting conditions, to find and fix usability issues for all themes.
A true dark theme is not a CSS filter. It’s a second design system, engineered to manage colour perception, accessibility and component states from the ground up.
A feature that requires system-level thinking
Building a high-quality dark mode demonstrates a commitment to user experience and accessibility. It requires a systematic approach that considers colour theory, component states and front-end architecture. When you treat it as a core feature, you build an interface that is more comfortable and usable for a wider range of people in more contexts.
Our UI/UX design and custom software development services are built on this kind of detailed, systematic thinking. We have experience building complex applications for clients like Univia and Angel EduNext, where a polished and accessible user interface is critical to success. If you need a team that understands how to manage this complexity, we can help.
