Dark Mode Design All You Need To Know About

Dark mode design starts to grow a lot of traction recently. Famous brands like Instagram, WhatsApp, Google, Apple, and Facebook have already jumped on the dark mode design so, will you considering a dark mode design to your UI as well?

• 

This guide will be the best practice when designing for the dark mode to make sure your web and app designs look and function perfectly.

You might also like Best Useful Chrome Extensions for Designers 2021.

1. Avoid Pure Black

• 

That high contrast can be painful to the user’s eyes. Consider using grey combined with desaturated colors, will help define the hierarchy between main text and subtext also decrease eye strain, and strengthens reading stamina.

2. Consider Less Saturated Colors

• 

Saturated colors can look great on light surfaces but keep away from dark backgrounds. Use lighter colors in a range between 200-50 to make readability on dark mode. Less saturated colors from your color palette improve legibility and reduce visual vibration.

• 

3. Use The Right “On” Colors

“On” colors are usually used for text and it shows up on the top of components and key surfaces.

The default “On” colors for dark mode is pure white #FFFFFF. #FFFFFF is a bright color that appears to vibrate when viewed against dark backgrounds. When light text appears on dark backgrounds (shown here as white on black) it should use the following opacity levels:

• High-emphasis text has an opacity of 87%
• Medium-emphasis text and hint text have opacities of 60%
• The disabled text has an opacity of 38%

• 

4. Give Enough Contrast

Google Material Design recommends using a contrast level of at least 15.8:1 between text and the background. This ensures that body text passes WCAG’s AA standard of at least 4.5:1 when applied to surfaces at the highest (and lightest) elevation

5. Communicate Depth

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

In a dark theme, components retain the same default elevation levels and shadows as components in lighter themes. However, in a dark theme, the surfaces of different elevation levels are illuminated differently.

6. Don’t Just Reverse

Don’t invert the colors to get your dark theme it doesn’t produce a good result.

7. Test Design In Both Light and Dark

See how your design looks in both appearances. Allow users the chance to control their own experience of the design and get feedback from them.

^{Image credit: Google Material}