Have you noticed your screen looks a little darker lately? You’re not alone. Black backgrounds are popping up everywhere. As dark mode web design grows in popularity—with operating systems, browsers, and apps—so does its prevalence in modern web design.
Though it feels fresh, dark mode websites and its use in design is nothing new. If you ever used a computer in the ’80s with a monochrome screen (or if you have seen them used in the movies—Ferris Bueller? Anyone, anyone?), you know the look. Most of the earliest home computers displayed green or white text on simple black backgrounds.
Read on to learn about the pros and cons of creating dark mode websites with black backgrounds, and see examples of sites with dark backgrounds done well.
What is dark mode?
Also called black mode, dark theme, or night mode, dark mode web design is a term used to describe any layout with a light-on-dark color scheme that many users prefer using in low-light environments. In its most basic iteration, think bold white text on a jet black background.
Fifty shades of (dark) gray
Dark mode web design doesn’t just mean choosing a black background color with a value of pure black (Hex code #000000) and calling it done. What works in one darkly-themed design solution might not make the same impact on another.
To get a look that works, color selection requires more nuance.
When you are ready to paint it black, don’t limit yourself to #000000. With tons of different dark mode website background color solutions available, consider if a cool black or warm black will best serve the user experience, complement the overall webpage design, and enhance your brand identity color palette.
Pro-tip: Dark mode web design doesn’t have to mean going grayscale.
Choosing a dark mode website doesn’t have to literally be black and white. There are plenty of ways to get a dark mode web design look with other colors with qualities similar to black.
Take world-famous Mirazur, for example. Their web design firm picked an earthy coffee-black for its dark background color to create a homepage experience to match the French restaurant’s reputation of creating once-in-a-lifetime dining experiences.
Their site also features rich background colors—like velvety eggplant and smokey pine green—to achieve a dark mode look.
Best black background alternatives for dark mode website design
Unsure where to start your hunt for the perfect dark mode background hue? Here are some of the most popular dark mode Hex code values used to add rich darkness to websites:
Pros and cons of dark mode web design
Black backgrounds help make images pop
Have you ever noticed that many museums and photographers often use black backgrounds on their dark mode websites? It’s not just a sophisticated aesthetic preference. They make that choice deliberately to ensure their photos and illustrations come alive. White backgrounds often wash out images, but—because the color black recedes—dark backgrounds make pictures with brighter colors stand out and come alive.
Another perk? If most people access your site from their smartphones, you’ll have delighted users. That’s because a dark mode web design interface featuring a black background requires less battery power to display on top of looking great.
“The eye is always caught by light, but shadows have more to say.”—Gregory Maguire
Darker website designs may hinder readability
Researchers have found that light text on dark backgrounds is more challenging to read than dark type on white backgrounds due to the “halation” effect. This phenomenon makes dark mode website design less ideal for almost all copy-heavy websites.
According to user experience designer Jacob Nielson, “Optimal legibility requires black text on white background. White text on a black background is almost as good. … Legibility suffers much more for color schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.”
If your website is likely to be used at night or by users in dimmer/low-ambient light settings, researchers have found that creating a dark mode web design might be your best bet for limiting eye strain. Staring at stark ivory screens created by bright white website backgrounds can cause discomfort when users are in dark rooms.
As with most things, there are exceptions in this legibility debate. For instance, users with cataracts actually find websites with dark mode backgrounds easier to read than those with white backgrounds. Double-check your website persona research to learn if there are any demographics for which it would make sense to pursue a dark mode website redesign.
Dark mode elicits powerful emotions
Black is anything but neutral. Ebony is always a dominant color associated with elegance, style, and power. When used strategically as a website’s background color, it can add visual appeal and depth.
Pro-tip: Check out what your competition is doing online.
Design decisions shouldn’t just be based on aesthetics and usability. You have to think about your business needs, too. If your customers see dark mode web designs when they visit your competition online, going with a layout that’s attractive, light, and airy may help you stand out from the crowd in their browsers.
46 examples of dark mode website designs
Saturday Night Live
The British Museum
Kansas Heart Hospital
Apple AirPod Pros
AMA Journal of Ethics
The United States Marines
Penn & Teller
Regents School of Austin
FAQs about websites that have dark mode layouts
When did dark mode start getting popular?
Dark mode began to creep back into the zeitgeist as a favored design trend around 2010 with the release of the Windows Phone 7. Since then, it has been gaining popularity among app and website developers at leading technology firms, as well as designers at companies big and small.
Today, even Google offers a Chrome extension called Night Eye for dark mode fans!
Why is dark mode design a trend? Are dark websites good? Should my website have a dark mode?
It depends on your company’s industry and its overall visual brand guidelines.
Generally speaking, though, people do like websites with dark backgrounds. In fact, about 82.7% of people prefer dark mode when using their devices, according to survey findings tracked by Thomas Steiner, a web developer advocate at Google.
What are the features of a high-contrast web design?
High-contrast web designs are those where there is a big difference between the two primary colors in the site’s design. Dark mode websites are often classified as high-contrast layouts because slate, charcoal, and black backgrounds are often paired with #000000 (aka, white) typography.
Why is having sufficient color contrast important in web design?
Designing so that there is enough color contrast between different parts of your website layout helps people—especially low vision users—read and navigate webpages.
What is an achromatic color?
Achromatic colors are non-colors. They aren’t part of the traditional color wheel spectrum. Black, white, and gray are all considered achromatic colors because these neutrals don’t have a hue, making them popular pairing options when developing high-contrast, dark mode web designs.
What psychological feelings do people associate with the color black?
People typically associate the color black with a wide range of feelings, depending on how it’s treated in a dark mode web design. Some of the attributes it can convey are:
- strength, power, and authority
- elegance and sophistication
- fear and evil
- death and mourning
- mystery and magic
Is a dark background better for website? Is a black background good for a website?
Redesigning a company website is a significant investment. Making an investment of time and resources to change your website’s layout to a new look that features a popular aesthetic—like dark mode—shouldn’t be the main reason you update your site.
If you are revamping your website for other business or technology reasons, considering a dark mode design isn’t a bad idea if it will help you meet your goals. Even if you don’t go all in, there are lots of ways you can bring in what works with a dark mode web design if that’s an aesthetic you like.
Can you make any website that you visit be dark mode?
Yes! If you use Chrome, you can personalize your web browsing experience and turn websites to dark mode, even if the sites you are on weren’t designed to display that way. One option is to use the previously mentioned Night Eye browser extension from Google. Here are operating system-specific instructions for how to get black backgrounds on websites you visit:
This post was last updated on April 12, 2022.
You might also like: