Dark Themes are Trending! But do we really need it for websites?

Remember when we first had the Dark-Mode feature in mobile phones? Can you recall that feeling? And then, dark themes were everywhere – on browsers and even appeared as a built-in feature of operating systems.

YAY! Feels like a WIN-WIN!!

Well, using dark mode/night mode is a personal preference. Anyway, consumers are happy. But, what about clients demanding it? And, designers…??

Should we use it or not? If yes, then how?

Wait a minute, why did we use it in the first place?

Let’s Find Some Answers…

Being a designer, I personally love working with dark themes. But websites are not about personal choices, they are about the end-user. That’s where limitations in using dark themes starts.

Context:

Where did Dark Theme come from?
What are the pros & cons of using a Dark Theme?
A necessity or just a mere functionality?
How can I use it in my designs?
How do some brands nails it?
Need a website in Dark Theme?

Where did Dark Themes come from?

Let’s start from the beginning. Dark themes are trending but they are not new. Do you know, “Dark Themes” were initially a failure?

Yes! Back in the 70’s & 80’s Graphical User Interface (GUI) had limitations. The Cathode Ray Tube (CRT) screens were not efficient enough to produce exquisite colors. Companies used to provide the operating systems in dark MATRIX-style black background with colored text. The first computer screens had Dark Theme as a default.

It is difficult to pin down the exact time when Light Mode was incorporated in interface. However, Xerox PARC GUI, which inspired Apple’s Macintosh and many other Operating Systems of the time, utilized dark text and interface elements on white background. It was closely linked to the advancements in both display technology and the arrival of the modern GUI. With advanced RGB CRT monitors capable of displaying colors, it became the forefront of the Light Mode revolution.

A necessity or just a mere functionality?

Accessibility issues

One of the core concepts of internet accessibility is that people with different abilities use different methods to browse the web. There are several issues that can occur when dark mode is implemented without prior testing. Sheri Byrne-Haber, a renowned accessibility advocate addresses some of these issues in this excellent piece for UX collective.

Difficult site navigation

Many people don’t use a mouse while navigating the web. Browsers provide keyboard focus indicators and a dark theme may cause visibility issues for certain accessibility tools.

People with disabilities like astigmatism and dyslexia face issues reading light text on dark backgrounds.

Poor contrast

Inverting a color scheme may not yield high contrast. According to the Web Content Accessibility Guidelines (WCAG), it is important to meet a minimum color contrast ratio of at least 4.5:1, with a few exceptions. To meet Level AAA conformance, content must maintain a 7:1 contrast for normal text.

This requires content to meet a minimum for normal text, with exceptions for large text, incidental or decorative text and logotypes. To meet Level AAA conformance, content must maintain a 7:1 contrast for normal text.

It’s true that many dark themes meet these requirements by using white text on a dark background, which typically clears the minimum thresholds. However, hyperlink text might not be legible against a dark-blue background. It is important for the designers and developers to choose every text color carefully and test thoroughly using the Color Contrast Accessibility Validator.

What are the pros & cons of Dark Theme?

Well, Dark Theme has always been up in debate for its usage. Big tech companies like Apple, Microsoft & Google have justified dark mode in their own ways.

Here are the exact statements:

Apple: “Dark Mode helps increase productivity and stay in focus.”

Microsoft: “Dark Mode reduces eye strain and helps devices save battery power.”

Google: “Dark Mode improves visibility even for people with low vision and sensitivity to light.”

Whatever the companies state, it is clear that Dark themes are available because the users want them. On the other side Adam Engst’s extremely detailed article for TidBITS clearly states the limitation of using dark mode.

Adam Says “Except in extraordinary situations, Dark Mode is not easy on the eyes, in any way. The human eyes & brain prefer dark-on-light. Reversing that forces them to work harder to read text, parse controls, and comprehend what you’re seeing. Dark-on-light may be trendy, but put bluntly, Dark Mode likely makes those who turn it on slower and less productive”

It is a WIN-WIN! (Advantages)

It is better for low-light conditions – so you can use it well during nighttime.
Dark backgrounds make images pop.

There will be less ‘blue light’ emission causing less harm to eyes.
Dark mode comparatively consumes less battery.
They can potentially reduce dry eyes and eye strain in low-light conditions.
Dark mode can help people with visual impairment or light sensitivity. (I personally feel that to be true.)

Google first introduced a system-wide dark mode in 2019 with Android 10 and rolled out a night mode for search apps on Android and iOS in May 2020.

It’s a NO-NO! (Disadvantages)

Light-against-dark is not always better for eye strain – text can appear washed out, increasing eye fatigue.
It can be challenging to read long verses in dark mode.
Light text on a dark background can be difficult to read outdoors or in a well-lit sunny room.

The dark mode doesn’t really save battery power consumption on older screens. However, battery performance can be improved in OLED screens if used pure black (#ffffff) instead of darker greys.

What we understand now is the usage of Dark Themes is subjective to the end-user’s choice. The light mode gives a similar impression to the convention paper reading, where we have dark text on a light background. That’s how our eyes are trained to read through. Hence, “Dark Themes” should not be by default but must be provided as “Dark Mode”, a mere functionality with a toggle button to turn on/off as per choice.

How can I use it in my designs?

Avoid Pure Black & White (#000000; #ffffff)

In dark theme/mode when pure black & white are used, it increases eye fatigue and makes it difficult for users to read the longer text.

Using dark grey (#121212) and muted white (#ffffff with 87% opacity) resolves this issue. However, in some cases, high contrast is required. For example, OLED screens for improving battery performance or smart watches using small screens.

Avoid High Saturation

Saturation stands against the dark world. Saturated colors are difficult to read as they possess almost equal contrast when used on a dark grey/black background. Colors have better performance when used below 65% saturation.

For more understanding check Colour Usage & Palettes and The Colour System offered by Google’s Material design.

Balance Things Out

Dark themes are very difficult to use when it comes to design in heavy content. They are recommended for a minimal approach Keeping 85% of the layout in black, grey, and whites, and using colors for CTAs/titles, where user attention is a mandate.

Don’t forget to check the Text Legibility standard.

Dark Themes aren’t for every business. Before you invest time and resources into crafting a dark-themed UI design, evaluate your brand story, brand character, and color palette. Will a dark background help you tell your story more relatedly? Will it help you highlight certain features? Will it fit the context of your offer?

If the answers are no, a dark theme might not be for your kind of business. Otherwise – Go for it!

How some brands nailed it

Netflix: Early in the day Netflix started its business by offering a subscription-based model on early launched DVDs. With the Dot-com bubble in early 2000, they moved their business focus to build an online streaming platform. They wanted the platform to give a theatre-like feel. Hence, they used dark themes.

Apple Airpods Pro: Apple makes its product pages look cool, futuristic, and interesting by implementing dark UI. The whole page scroll gives a cinematic feel where the product is a hero. See how AirPods Pro spreads its charisma.