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.

Three layers that imitate the hierarchy in UI design that lighter and darker colors can create.

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.

Analytics dashboard in the light and dark versions that show how shadows look in each theme.

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.

Analytics dashboard that demonstrates how lighter tones can point out to higher surfaces.

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.

 A visualization of the progressive growth of the colors with an increased elevation.

Two smartphone mockups with system, secondary, and tertiary backgrounds in dark and light themes.

The more elevated the surface is, the stronger and brighter the overlay becomes.

A dashboard of the music streaming app in a dark theme where hierarchy is maintained by colors, not shadows.

Source

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.

An example of the accessible and not accessible elements that show person's last visit in the system.

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!

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent