The accepted formula for website design is a white background, black or dark gray text, and liberally sprinkled brand coloring. The vast majority of top performing websites use this formula to good effect. But is this the only formula that can succeed? In this article, we’ll dig deep into creating a design with a dark background – and why sometimes it’s best to use this concept, as sometimes websites with a dark background can outperform white.
Fire up a WordPress theme, SquareSpace, Webflow, Weebly, or one of the many other web design tools and it will automatically load a page with a white background with black text. You can change it of course, but this combination is the perceived standard.
It doesn’t have to be.
When done right, a dark background for a website can work better than you think.
The first concern of any web design is what does the user want? What colors are appropriate for the medium, brand, intended use, target audience, and what would work on the devices used to access the site?
Most customers assume it will be a white background with black or dark sans serif fonts. This hypothesis may not be so black and white (pun intended).
- Why white?
- What you need to know about dark backgrounds
- Visual perception of darkness
- The contrast look
- The readability aspect
- The emotional perception aspect
- Benefits of dark backgrounds
- 1. Less eye fatigue
- 2. Elegant
- 3. Familiarity
- 4. Stands out
- 5. Fade in the background
- Disadvantages of using dark backgrounds
- 1. Careful consideration
- 2. Careful planning
- 3. Careful balance
- 4. Accessibility
- When to use a dark background
- When You Shouldn’t Use a Dark Background
- 10 Examples of Dark Background Themes
- 1. Divi Layout Pack with Web Freelancers
- 2. Astra with Photographer Startup Site
- 3. Genesis with Parallax Pro
- 4. Lens of PixelGrade
- 5. Divi with Electrician Dark Pack
- 6. Aldo by ThemeRex
- 7. Neve Pro with Dark Parallax Images
- 8. Telling with player layout
- 9. Next
- 10. Hestia Pro with Dark Parallax Images
- Conclusion: Using Dark Backgrounds in Web Design
There are two main reasons why the combination of black on white is considered the norm.
But that’s actually rooted in the story: print and readability.
Back when we did everything on paper, the off-white color of the paper meant it was easier to use black for the ink rather than color the paper. You needed less dye and it was a much cleaner and easier job. These early printed brochures were in black ink on lightweight paper and the printed media remained that way.
The other reason is readability. For many users, especially those on mobile, white on dark doesn’t always read well. People with visual impairments like astigmatism have trouble discerning white text against a dark background. Anything that causes the pupil to dilate like a dark screen does means the impairment is magnified, making a page very difficult to read.
However, good design can overcome these shortcomings and can impact, convey emotions and influence the visitor in ways that a white background simply cannot.
What you need to know about dark backgrounds
I say a lot of black here and no black.
Black is the obvious choice for a dark background for a website, but it’s not your only option. There are thousands of variations of dark backgrounds and black is just one of them. Dark red, dark green, dark blue, and others can all work with the right design in the right situation.
There are many aspects to using color in design and I won’t dwell on each of them here. I’m just going to focus on the dark background aspects.
Visual perception of darkness
A much-cited survey conducted by ProBlogger in 2009 showed us that internet users aren’t as supportive of white backgrounds as one might initially think.
Although now ten years old, the poll found that only 47% of respondents still preferred light backgrounds. Another 36% said it depends on the blog, 10% said they always prefer dark and 7% couldn’t decide. The majority may prefer a white background, but 43% said they like black or it should depend on the overall design of the site.
Another poll four years later at CSS-Tricks found that the majority of respondents actually preferred light text on a dark background. To be clear, this was a survey about using coding tools and asked which configuration users preferred for their code editors, dark on white or white on dark. Of those who responded, 63% preferred a dark background.
The contrast look
The catchy title ‘ The Impact of Text and Background Color Combinations of Web Pages on Readability, Retention, Aesthetics, and Behavioral Intent ‘ is an interesting study.
He examined how the contrast between background and text colors in a web design was the deciding factor in its usability and not the colors used. We are not talking here about aesthetics, but simply about user-friendliness.
The study found that polarization influenced readability more than the actual color of the background. So white on black is just as effective as black on white as long as there was enough contrast between the two colors, legibility, readability and ease of use is maintained.
Contrast is extremely important in web design.
Some modern websites try to use low contrast designs with mixed results. Even Apple have tried it with a few pages on their own website.
Low-contrast pages are harder to read, don’t work for the visually impaired, and require more effort from the reader to understand. None of this makes for good page design.
This goes against the contrast aspect and it is the reader who suffers. In my opinion, it doesn’t matter if you use dark on light or light on dark as long as the contrast ratio is as wide as possible to improve readability.
The readability aspect
Dark backgrounds can be the perfect design choice in certain situations.
Text-heavy websites are not one of these situations. While contrast has a greater influence on the readability of a page, the choice of color also has an influence. According to Jacob Nielsen, negative text, that of white text on a dark background, takes a little more effort to read and reads more slowly than positive text which is black on a white background.
Other than that, as long as the contrast between the text and the background is sufficient, readability is not affected.
I would add a little to that. Saying white text on dark backgrounds does not affect readability as long as you design it correctly.
For me this means:
- Clever use of empty space between blocks to prevent light leaks.
- Proper readability rules are followed in terms of short sentences, short paragraphs, short words, and easy-to-digest copy.
- Careful font selection to maximize readability on different screen sizes.
- Maintain maximum contrast when working with dark backgrounds.
- Avoid gradients and shadows with a dark background.
Font choice is important in any web design, but even more so when it comes to dark backgrounds.
We usually select serif fonts because they add a touch of class or elegance to a design and use sans serif for modernity. When dealing with light text on a dark background, the choice is limited to sans serif only.
Serif fonts can work but require more work on the part of the reader to understand. This is exacerbated when using smaller screens or mobiles.
The emotional perception aspect
We all know that different colors can evoke different emotions. We’ve known this for years, and more recent studies have backed it up with evidence. We know that different color combinations affect the brain in different ways and some marketers believe that using color alone can increase conversion .
Color psychology tells us that when we see colors, our brain signals the release of hormones that can cause us to feel emotions. Different colors cause the release of different hormones which can influence how we feel about something of a particular color. This combines with our perception of what a color means which can be used against us for marketing and selling.
We have deep-rooted ideas about what a color means.
For example, black is often associated as a powerful, erotic, mysterious, formal and elegant color. White feels clean, fresh, modern, youthful, approachable and familiar. Rouge is bold, powerful, confident and sensual.
Each color invokes different feelings in the reader, which is why as web designers we spend so much time trying to find the perfect combination and then even more trying to convince the customer that the colors we have chosen will work.
Benefits of dark backgrounds
Dark backgrounds are not suitable for all designs or projects.
When appropriate, a dark background can add character, impact, emphasis, and some emotional response to a web design. I’ve already covered all of this, so let’s look at some other benefits of using dark backgrounds in design.
1. Less eye fatigue
Apparently it’s easier to read longer when a dark background is used. Even if we read more slowly, as long as that contrast ratio is wide enough and the design is otherwise sound, we can read without eyestrain for longer periods of time.
Speaking of eyes, dark backgrounds will impact sleep less too . The screen will contain less blue/white light than a traditional web page. This blue light is now thought to impact our circadian rhythm and affect our sleep, cause disease and negatively impact our daily lives.
There’s a reason every woman has a little black dress or why limos are black. It adds a sense of style and elegance that is hard to find elsewhere. As long as the overall design is high quality, using dark backgrounds immediately gives that feeling that can sway a buying decision, create an emotional connection, or cause the reader to take what they see more seriously.
Websites with dark backgrounds were very rare. The ones we saw often didn’t follow usability guidelines at all and didn’t work well. With more program user interfaces using dark backgrounds, games increasingly using dark backgrounds in menus, navigation and cutscenes and night mode in all sorts of devices, darkness is no longer a niche.
We see it everywhere. Many Adobe products, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop and Dreamweaver and many other top programs.
Now that we’re more accustomed to seeing bright text on dark backgrounds, it doesn’t come as a surprise or negatively impact our expectations as it once did.
4. Stands out
Although websites with dark backgrounds are becoming more and more acceptable, they are still in the minority. This provides an element of impact as soon as someone lands on the page. Even before a word is read or an image is scanned, your page is already making an impression and causing the reader to look with fresh eyes at the design.
As long as this design builds on that initial first impression with good readability, good use of space, and impactful images, you’re a winner.
5. Fade in the background
Dark UIs and backgrounds provide that first initial impact, but can then quietly fade into the background to let the content shine through. This is most true in UI design, but has relevance in web design as well. Carefully placed images and content with the right level of contrast will then stand out much more while the background itself disappears from view.
This can help to read page content in bright environments like outdoors or under strong light. In darker environments, a white or light background can strain the eyes and be difficult to read. In brighter environments, a dark background can be the opposite. Although we can’t design for specific environments, it’s never an advantage of a darker background that it reads well in sunlight.
Disadvantages of using dark backgrounds
Using a dark background in design is not universally positive. There are a few downsides to this style and they shouldn’t be underestimated.
1. Careful consideration
Dark backgrounds will not work for all clients or all situations. This design theme requires a lot more thought and planning than the traditional light background. It will also require more user testing to ensure the balance is right before launch. Not all branding schemes will work with dark backgrounds. Not all products or topics will work with either.
Some customers still perceive dark backgrounds negatively as we did before. Even if you’re convinced that a dark background is the way to go, you may find it harder to convince your client than if you went the traditional route.
2. Careful planning
All design choices require careful planning, color, font, and image choice. Using dark backgrounds adds even more reflection to this. White/dark space becomes even more important to prevent light from escaping into darkness and to ensure text readability. Images and design elements need proper separation to keep them readable and to prevent light or color leakage into other areas.
The development process may take longer with a dark background because of this. More user testing may be required and other mobile experience improvements may also be considered.
3. Careful balance
Using dark elements in a design adds weight to a page. Too much weight and the page may seem bulky and heavy. This is even more true when it comes to dark backgrounds. Each page should be balanced very carefully to prevent it from feeling heavy and to bring out its inherent elegance rather than discomfort.
This is a tough question and will require a lot of refinement and lots of white/black space on the page to keep it balanced.
Accessibility is one aspect of dark designs that doesn’t get much attention. Every web design should have accessibility in mind from the earliest planning stages. Fortunately, as long as you follow the general rules of high contrast between text and background, the majority of users will be able to read and understand your page.
The Web Content Accessibility Guidelines (WCAG) requires a color contrast of 4.5.1 between text and background for normal text and 3:1 for large text. It suggests white text for black backgrounds but there is some wiggle room for other colors as long as the contrast ratio is kept as wide as possible.
I mentioned astigmatism earlier because it is a deficiency that is negatively affected by the use of dark backgrounds. Astigmatism is an imperfection of the cornea that causes blurred or distorted vision. On a dark background, the pupil must dilate to read, which accentuates the blur.
Although it’s just a deficiency in a multi-person world, about 33% of Americans have some form of astigmatism . If you extend this to a global audience, almost a third of your potential audience may suffer from astigmatism to one degree or another. This is something that every design must take into account.
When to use a dark background
There are a range of situations where dark backgrounds lend themselves well to web design. They include:
- When you want to have that initial visual impact.
- When darkness matches the client’s brand identity.
- When presenting luxury or high standing products or services.
- When the design is modern or minimalist.
- When you need to create drama or mystery in a design.
When You Shouldn’t Use a Dark Background
Likewise, there are times with a dark background will not be your best bet and should be avoided at all costs. Even if the customer insists on using one.
- When the page is content heavy.
- When the brand voice does not support it.
- When the target audience is known not to respond well.
- When there is a lot going on with the page and white/black space is paramount.
- When the intent is B2B or official, such as government.
10 Examples of Dark Background Themes
To show you what I mean about dark backgrounds that look amazing when done right, I’ve rounded up ten great themes that use them. Each is slightly different in terms of design, but all have one thing in common, they use dark backgrounds for maximum effect.
1. Divi Layout Pack with Web Freelancers
The Divi WordPress theme must be one of the most flexible. Although many of its templates are on a light background, you can reverse it in seconds. Add the Freelancers Web Layout Pack to Divi and you can have a great website with a dark background for any use.
All you have to do is install both themes, activate the theme, open a page, and switch the backgrounds to dark. Then use the “Extend Background Color” option in the page sections to align everything.
2. Astra with Photographer Startup Site
Using the Astra framework with the Photographer demo site installation provides an excellent website with a black background. Good use of space, contrasting fonts, and minimalistic design make this theme stand out.
3. Genesis with Parallax Pro
Parallax Pro is a theme for the Genesis framework that uses an alternate monochrome design to great effect. This is another simple design that lets the page content shine through and provides a great example of how dark backgrounds can work so well.
4. Lens of PixelGrade
Lens From PixelGrade uses a grid design to give us a portfolio or image showcase using a dark theme. The dark background is only really visible in the side menu and the theme uses contrasting colors in a very interesting way, adding colors other than black and white to really stand out.
NB: We have 20% off directly from PixelGrade, exclusive to CollectiveRay visitors. Simply click on the link below, your discount will be automatically applied during checkout. This offer is valid ONLY until the end of September 2019.
5. Divi with Dark Electrician Pack
Another Divi theme, this time the electrician in the dark landing page. This is a very high quality theme with a dark background, crisp typography, good use of images and complementary colors to add interest. This one is a personal favorite and I think it works incredibly well.
6. Aldo by ThemeRex
Aldo by ThemeRex is a theme that makes looking stylish easy. It’s an effortless theme that would work for many topics and balance a lot of page content with a dark background without overwhelming the page. It’s a very polished design that works well on any screen size.
7. Neve Pro with Dark Parallax Images
Neve Pro with Dark Parallax Images uses Neve theme with all its power, speed and features. Combined with a dark background and complementary theming, this WordPress theme is one of the best around. The pages are well balanced, they load quickly, the content guides the reader smoothly along the page, and you don’t miss a thing.
8. Telling with player layout
The Telling with Gamer layout is a great example of how to use other bright colors to enrich a dark background. Don’t be fooled by the gamer nickname, you can use this theme for anything and it would still look amazing. A strong menu, excellent layout, superb sharpness and contrast, and good use of space are just some of the positives.
9. Next Release
Nextout is a very elegant WordPress theme that uses a lighter dark background with contrasting and complementary colors. With an attractive top slider, you scroll down in a tiled layout that would lend itself perfectly to image-oriented websites. With smooth navigation and thoughtful layouts, this is definitely one of the best web themes here.
10. Hestia Pro with Dark Parallax Images
Hestia Pro with Dark Parallax Images is another very elegant theme that balances dark backgrounds with light elements, contrasting colors and excellent typography. The pages are rich but not overdone, and the balance is perfect no matter what type of screen you’re using. It could work on any device, for any subject and is definitely worth trying.
Conclusion: Using Dark Backgrounds in Web Design
One of the best things about the modern internet is the freedom to express yourself and break the rules. While some of these rules should absolutely not be broken, some can. Like the traditional black-on-white design that has been with us since the 17th century .
I think dark backgrounds can look amazing when done with a keen eye. They make that initial impact and then fade into the background. They work well in most lighting conditions, and a well-balanced page with smart use of space can make the background emphasize the product or intent of a page better than backgrounds. white planes.
Dark designs aren’t suitable for all projects or intentions and require a lot more planning, refinement, and testing than white backgrounds. However, done right, I think all that extra time and effort can be worth it!About the Author