In 2019 Apple and Google introduced the Dark mode themes for their OS. Since then, many apps have developed with dark mode options. Users like personalization - dark mode design have grown since then, becoming increasingly popular. Contributing to enhancing visibility for users with low vision and sensitivity to bright light. Google also says it might improve battery life and make it easier for anyone to use a device in a low-light environment. Even when Dark Mode wasn’t yet a thing, it still existed on the first computer screens that were already in “dark mode”.
But before all that, our eyes get used to reading books with dark text on a white background. But this is when we were working and studying during the day and sleeping at night. Nowadays, when we use our devices around the clock, users want to have the possibility to customize their devices, giving our eyes a rest and adjusting them to our habits for a better digital environment.
Working a lot with developers, it seems like Dark mode contributed a lot with its design becoming more useful for coding. Developers say it can be more restful to their eyes from extended screen time and allows seeing the code structure quickly with the coloring elements highlighted. And it pops out the different components, allowing the ability to scan instead of reading through every word.
But not everyone may feel more comfortable, less tired and more focused while using Dark Mode. Designing for a dark background requires specific accessibility guidelines to consider. I see many products that move into dark mode but neglacting accessabilty ratio.
Color contrast and tones used on a dark theme are vital for all users but especially for people with poor vision or disabilities. Users must be able to perceive content. This is why colors selected for text and icons need to be contrasted, readable and carefully used if there are gradients, semi-transparent colors, and background images. Everything has to be designed carefully and meet the contrast requirements.
It’s essential to consider the different content levels on a dark mode, especially with a card-based design. Shadows cannot be perceived the same as with the light theme. I have been experimenting with different shades of grey that can help to communicate visual hierarchy. Avoiding using 100% black because pure black is too hard on the eye.
Accessibility is something I never skip, especially for a dark mode design. For example, saturated colors should be avoided and darker tone colors like red or brown might be hard to read and they don’t pass WCAG’s accessibility standard. Working on many projects parallely, I always make sure to check myself. There are helpful websites that color accessibility could be tested.
A light and dark theme UI image from Google Material Design
WEBAIM and Contrast Checker have a contrast ratio checker for text and graphic objects. You can enter a foreground and background color in RGB hex format or choose a color using the color picker. And it will give you ratio results for WCAG AA and WCAG AAA.
When designing a product, I constantly research industry standards and competitors, considering brand values, target audience and usability requirements. While creating the dark theme guidelines, I also had the opportunity to investigate the different aspects and challenges of accessibility. Dark mode may be the next hot design feature but can also create many accessibility issues. For some people, dark themes are more accessible, for others, the light theme would be preferable. The bottom line, users need to have personalization. And have both a dark theme and a light theme and allow users to select the theme that works best for them. Make switching between dark themes and light themes obvious and easy to find.
Design is about functionality, and more thought should be given to accessible color choices when designing using a dark or a light theme. The goal is to create products that will be easy to use, accessible for everyone and effective. Ensuring trustful and positive experience from the user’s perspective and company’s impression.