Designing for Dark Mode: a practical guide to accessible and modern UI

Dark Mode is more than a trend – it’s become a must-have for many interfaces, apps, and websites. Beyond its sleek aesthetic, it offers real benefits in terms of visual comfort and accessibility.
But be careful: designing for dark themes isn’t just about inverting colors.

In this guide, we’ll walk you through how to design in Dark Mode effectively, with a focus on usability, functionality, and a smooth user experience.

Why should you offer a Dark Mode?

If you’re still considering whether to implement it or not, here are a few good reasons to do it:

• It reduces eye strain, especially in low-light environments.
• It improves accessibility, particularly for users sensitive to light.
• It has a modern and elegant look, appreciated by users who work or browse in the evening.

That said, it’s not always the best choice in every situation. In very bright environments, it can actually hinder readability.
That’s why it’s important to give users control, offering a simple toggle between light and dark modes.

#1 Avoid pure black and white
The #000 and #FFF contrast is too harsh for comfortable reading. Instead, use:

• Very dark grey backgrounds (e.g. #121212 or #1E1E1E)
• Light grey or off-white text (#E0E0E0 or #FAFAFA)

#2 Ensure sufficient contrast
Follow WCAG accessibility guidelines:

• 4.5:1 for normal text
• 3:1 for large or bold text

We recommend tools like Color Contrast Checker to verify your color choices.

#3 Desaturate bright colors
On dark backgrounds, vivid colors can be too aggressive. Slightly reduce the saturation of primary colors to maintain visual harmony and legibility.
Practical tip: Instead of a bright blue like #007BFF, go for a softer tone like #4A90E2.

#4 Avoid complex shadows
Shadows tend to disappear on dark backgrounds. To make important elements like buttons or cards stand out, use light borders and/or subtle glow effects.

#5 Fine-tune your typography
To keep text legible:

• Use fonts with at least medium weight (500 or 600)
• Avoid very thin text
• Prefer light grey text on dark backgrounds

#6 Work with semantic palettes
Structure your colors by function (background, text, links, alerts, etc.), then create corresponding variants for Dark Mode. This ensures visual consistency and simplifies the maintenance of your design system.

#7 Convey depth without using shadows
In Dark Mode, visual hierarchy must be communicated differently:

• Use semi-transparent overlays
• Layer elements over a very dark base (#121212) to distinguish elevations

#8 Provide a visible toggle
Don’t force users into Dark Mode – let them choose. Your toggle can:

• Be clearly accessible from the menu or settings
• Detect system preferences automatically via prefers-color-scheme media query

#9 Test in every environment
What looks great in a dark room might be hard to read in direct sunlight. Make sure to test your design on different devices (smartphones, desktops, tablets) and under various lighting conditions (dark, daylight, warm light).

Dark Mode is a great opportunity to improve usability and offer a more modern visual alternative. But it requires thoughtful, deliberate design decisions.
By following these best practices, you’ll deliver a user experience that’s both visually appealing and functionally sound.