Pro tip
Accessibility is still really important in dark mode. If you’re using white text on a dark background, it needs to have a contrast level of at least 15.8:1. If you’re using colour text, it needs to have a contrast level of at least 4.5:1. We love using this colour contrast checker.
Using saturated colours on dark surfaces can create the optical illusion of vibrations, which can cause eye strain for viewers. That’s why we use desaturated colours. Although they look pale and pastel in colour, they are easier to read against dark backgrounds. When you do use colour, use them as accents. Dark themes should use limited colour so that the majority of space is dedicated to dark surfaces.
In the case of the recent White House website redesign, the iconic white, blue and red are all problematic in dark mode primarily because the blue and red don’t provide enough contrast. What’s interesting is that they’ve introduced a new light gold colour into their palette, which creates continuity between the light and dark experiences. It doesn’t seem like an obvious choice, but it works well as an accent on light mode and then becomes the dominant colour choice for dark mode. This creates the feeling of intention and continuity as you move between the two experiences instead of the unfortunate and very common situation you’ll see in most dark mode designs: a jarring transition that bears little to no resemblance to the brand or experience of light mode.
When you’re designing for dark mode, it’s best practice to use minimal amounts of pure white (#FFFFFF) as it can visually vibrate against backgrounds (similar to what happens when you use saturated colours). Instead, different shades of white and grey should be used.
That being said, creating elevation and depth are key elements to any successful dark interface. One of the rules of dark mode is: the higher a layer is, the lighter it should be. This creates a visual hierarchy that implies which information is more important for the user.
On the White House website, they’ve used different shades of white strategically to indicate hierarchy while preserving proper contrast levels. They have used a slightly darker shade of white for text and kept the use of pure white limited to their call-to-actions, which you can see in their newsletter sign-up form. This use of pure white makes the form stand out even more in dark mode than in light mode.
The biggest drawbacks of creating a dark theme for a website are cost and time. These two factors can make it difficult to make a business case for adding a dark theme, but there are other reasons why you might consider designing a dark mode for your site:
Although dark mode may not technically be considered an accessibility feature, we feel that it’s still important to talk about the value that a dark experience can bring to users and how accessibility is still of the utmost importance. Using these dark mode best practices, you can bring in the positive aspects of immersive storytelling while still caring about accessibility.
1 Fast Company: Under Trump, WhiteHouse.gov was a disaster. Biden’s team revamped it in 6 weeks (read the article)
Sorry, we couldn’t find anything that matches your search.
Learn how Habanero is responding to the Truth and Reconciliation Calls to Action as a settler-owned company operating on Indigenous territories across what is now called Canada.
Read about our commitment