When should I use colors alone to create visual depth, without relying on shadows?
TL;DR
- In dark theme UI design, use colors alone to create visual depth when shadows are less visible against a dark background.
- Adopt color gradations, making elevated surfaces progressively lighter to effectively communicate hierarchy and focus. This approach aligns with Material Design guidelines for dark themes, where lighter tones indicate higher elevation, enhancing visibility and helping to draw attention to key elements and actions without relying on shadows.
Detailed answer
When designing user interfaces in dark themes, using colors to create visual depth and hierarchy without relying on shadows is often necessary due to the visual limitations of shadows in dark environments.
Here’s when and why to use color alone for this purpose:
Dark theme UI design
In dark themes, it's challenging to discern shadows against a dark background, making them less effective for conveying elevation or depth. Instead, using color gradations – where elevated surfaces are lighter compared to lower ones – can effectively communicate hierarchy and focus. This technique allows elements at higher elevations to stand out more distinctly, enhancing the visual structure of the interface.
Material Design guidelines
According to Material Design principles for dark themes, elevated surfaces and components should use color overlays to indicate their elevation. The use of lighter tones for higher surfaces not only replaces the function of shadows found in light themes but also ensures that the visual cues for elevation are clear and visible.
Enhancing visibility and focus
Choosing a strategy where colors grow progressively lighter with increased elevation helps draw the user’s attention to key elements and actions. This method is particularly effective in interfaces where visibility is paramount, such as in media players, dashboards, or complex forms and menus in software applications.
The more elevated the surface is, the stronger and brighter the overlay becomes.
Related reading: When should I use colored shadows instead of classic neutrals?
One important thing to keep in mind is accessibility
Color alone is not a reliable method to communicate information, as it is experienced differently by colorblind individuals — especially those with red-green or blue-red color blindness. Utilizing visual attributes like shapes, icons, text, contrast, and spacing can make information more accessible to those who are colorblind.
Avoid relying solely on colors for communication. While color can be part of a broader picture, it shouldn't be the only distinguishing element.
Related reading: When should I use an outline effect instead of shadows?
🛠️ Useful tools
These tools will make your job easier and more effective. Here are some colorblind simulators – perfect for ensuring your design is accessible to everyone.
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
- 8 Tips for Dark Theme Design by Nick Babich
- Dark theme by Material design
- Dark mode by Apple developer
- Don't use color alone to convey information (colorblind) by Access Guide