Can White Text Against a Dark Background Hurt Your SEO?

There’s a surprising amount to consider with the use of color on your website. Are your colors consistent? Do they match your branding? Are you using strange gradients or bizarre shades in different parts of your site?

Most of these questions are pretty niche, but one of them has been coming more and more into the forefront over the last few years. Does using light colored or white text on a dark colored or black background hurt your SEO?

A Simple Answer

I’ll go ahead and, unlike most other posts I write, give you a nice and simple answer right off the bat. No, using light text on a dark background is not going to hurt your SEO, assuming you’ve done it right. What does doing it right mean? Well, for that, you’ll have to read the rest of this post, now won’t you?

A Matter of Usability

Google has two driving factors behind virtually every choice they make with their search algorithm. The first is confirmation of trust. One of the main goals of the algorithm is to promote trustworthy content and to demote less trustworthy content. It doesn’t always work as intended, of course. There’s plenty of highly circulated fake news and various anti-climate change or anti-vaccination content or what have you, with their own networks of people who believe it boosting its “trust” even when it’s objectively false.

As an aside, that’s a problem Google is going to have to deal with sooner or later. Thus far, they have taken a position of impartiality, allowing information to filter to the top based on popularity, not on fact. They’ve decided not to be arbiters of truth. Yet we’re reaching a turning point in human history, where hugely popular misinformation is directly damaging society, nature, and people’s lives. How will Google deal with their role as information brokers? Well, maybe that’s why they quietly removed their “don’t be evil” mission statement.

In any case, the second element of Google’s analysis is user experience. You’ll notice that virtually every site that ranks well in Google has good usability. You won’t find weird tiled animated gif backgrounds, white text on yellow backgrounds, buttons hidden behind buttons, or other usability issues.

Google considers the user experience a hugely important part of what they do, and that’s why a ton of Google’s webmaster recommendations – and many of their analysis tools – are focused on providing tips and assistance for usability.

The Historical Perspective

We think of the black text on a white background to be a pretty standard, default setting for the web. Except, why do we? How many of the websites you visit actually have white backgrounds these days? I know a lot of the ones I visit have off-white, subtle gray backgrounds, or even colored backgrounds. Google itself is, in fact, one of the few to still use pure white.

The reason we think of black on white as a default is because of pre-computer technology. That’s right baby, it’s paper! Paper is white – most of the time – and printers, printing presses, even hand tools generally use a black ink as the default. Everything from books to newspapers to magazines use black on white as the default.

The reason for that, of course, is that paper comes out naturally white, beige, or another off-white color. The pure bright white we’re used to from printer paper is actually because of bleaching it during manufacturing, but it’s still a light color. Meanwhile, it’s easiest to make dark colored pigments for ink. A huge array of possible dyes could be used to make dark colored inks, while lighter colored dyes are more difficult.

Thus, when computers came about and the internet spontaneously erupted from the minds of a few brilliant people, the default became a nice, usable black on white. Just ignore that little green-on-black era, won’t you? Actually, keep that in mind; I’ll mention it later.

The shift to the now-default of black on white had a few reasons behind it, but the fact that we’re all generally used to that format was a huge part of it.

Modern Design

In the era between the advent of computers and the last decade, the topic of whether to use black-on-white or white-on-black has been a matter of intense discussion. Most webmasters go with black-on-white simply because it’s easier, it’s the default, it’s less strange, more familiar to users. When you open a website and see light-on-black, it gives you a moment of pause, you have to take a moment to adjust.

However, a lot of things have changed in the last few years, particularly with the advent of mobile computing. Phones, believe it or not, have had a huge impact on web design, and I don’t just mean Google’s focus on mobile-first indexing and all of that.

Have you guessed what I’m talking about? I’m talking about night mode. Night mode has a few different meanings on different apps and kinds of design.

The first variety comes from the modern understanding that blue light is bad for your eyes, particularly at night. Several apps, like F.Lux and the Android Night Mode will tint your screen an orange shade, to lower blue and lower brightness during the darker hours of the day. It’s a more natural shade of light with less potential eye damage. I’m not really concerned with this kind of night mode, though.

The other kind of night mode is the kind you see in modern apps. Reddit has it as an account setting. So does Twitter. It changes the color design of the site. Think about Twitter screenshots you see floating around. Some are white backgrounds with black and blue text. Some have a navy blue background with white text.

Both versions of these sites are equally usable in general, right? Night mode is made to do the same sort of thing the f.lux apps do; make it easier to look at a screen at night.

See, that’s the biggest change mobile computing has brought to design. People are increasingly using their devices in the dark. You might look at your phone while riding in a car at night. You might play around on your tablet in bed before you sleep. You might just work late hours, deep into the night, and spend most of your daylight time asleep. Who knows!

The point is, in some ways, night mode design has become an accessibility feature. You can turn on night mode at night and lessen eye strain and reduce blue glow that can hurt your eyes and the quality of your sleep.

The Problems with Dark Design

Darker designs like night mode – and the old green-on-black designs – have issues of their own. For one thing, people with astigmatism might suffer for it. Astigmatism is a common defect in the eye that warps the shape of the eye itself. It’s easy enough to correct with glasses or contacts, but it can still effect vision. One thing that was discovered with the green-on-black design was that users with astigmatism found it harder to read the light text on the dark background.

Essentially, and this puts it pretty simply, light backgrounds cause your pupils to shrink, while dark settings allow the pupil to dilate to let more light in. That’s fine, except for people with astigmatism. The wider pupil allows the misshapen lens to have more of an effect on the text, making it blurrier.

Obviously, we don’t often think of users with vision problems when we’re designing websites. Mobile usage comes more heavily into play here. Night mode is excellent for, well, night time, but during the day it can make it extremely hard to see the app on the screen, especially if you’re outside and fighting the glare of the sun.

This is why all of these features are options. Twitter and Reddit have night mode that you can turn on and off at a whim, with only a couple of taps or clicks. The f.lux app adjusts dynamically depending on the time of day and even geographic position, to account for the hours when sunlight is available.

The key here, to tie things back to Google’s focus on usability, is choice. The user can choose whether they want to view the site in day or night mode. Google will index the site under whatever the default mode is, usually day mode, and that’s that.

Properly Using Night Formatting

If you want to use a night mode, or if you just want a light-on-dark color scheme for your site, that’s absolutely fine. You’re not going to be penalized by Google unless you’re doing something that hurts the user experience.

While technically forcing night mode on all users at all times might hurt some of them – the aforementioned vision problems, or the issues with viewing a site during the day – Google isn’t really going to take that into account. Google has billions of users to think of, and small subsets of the population aren’t going to make massive changes in design.

What you need to do when using a light text on a dark background is make sure that’s how it’s always going to load. That means specifying the light font color and the dark background color in your code directly. Don’t use an external CSS file, a script, or an image to set either attribute.

For example, one issue I’ve seen is a site that uses a dark colored image as a background with white text over the top of it. This is relatively common for some restaurants, some space-themed sites, and other kinds of night-like sites.

Well, what happens if the background image doesn’t load? If you haven’t specified anything else, the site will render the fallback color, which is white. Then you’ll have light text on a white background, and that’s a huge no-no with web design. What you need to do is specify a fallback color, even simple black. Something like this is more than enough to cover it:

Background:url(yourimage.jpg) #000000;

If the image doesn’t load, it defaults to the color, which is black. You can, of course, specify a different color if it suits your design better.

What Not To Do

I’ve made a point of addressing user accessibility and the user experience, and that should guide your design.

Here are some things you should definitely not do.

• Never use light-on-light or dark-on-dark. You need enough contrast that users can see your content. Colors that are too similar will result in a Google penalty for trying to hide content, as it was an abusing SEO technique years ago.
• Never use clashing colors. Bight yellow on a bright pink background might seen fine for a 4 year old’s birthday party, but it’s going to give any adult a headache after about five minutes.
• Never allow a fail state where the site is unusable. Play with your design using script blockers or element blockers to block specific images, ads, or scripts and see how your site looks. If it breaks, fix it.

If at all possible, give your users a choice between a day and a night mode. It’s not all that difficult to implement a switching CSS style sheet and a script that changes it. You can have the best of both worlds simply by giving your users a choice.

Looking for help with SEO for your business or website? We have you covered. Check out our comprehensive SEO directory to find the right SEO agency for your needs.