loading...
Cover image for Why you should always set a background color

Why you should always set a background color

bcalou profile image Bastien Calou ・8 min read

CSS Adventures in Canvas Land (3 Part Series)

1) What is the color of a blank page? 2) The trouble with Chrome, iframes and mix-blend-mode 3) Why you should always set a background color

Raphael Schweikert commented the first post of this series and made some illuminating points:

I remember in the ’90s when most browsers’ background color was grey. IE was the only one that has a white browser background by default. Others followed suit.

Even if like me you didn't lived those times, you probably encountered these greyish screenshots of the past.

And so Internet Explorer made a decision that would shape the web as we know it now: white.

Fan theory: Gandalf is actually Internet Explorer. The tempting but dangerous ring is JavaScript. Go rewatch them now.

What about the present?

Raphael also explained that you still can change this. In Firefox, it's easy:

  • Go to about:config
  • Search for the browser.display.background_color setting
  • The default value is #ffffff. Change it!

This is not a secret developer thing: all the options mentioned in this post can be configured by anyone using a more friendly interface.

The color configuration panel in Firefox

Not every browser handles this the same way: Chrome, for example, encourages you to use extensions and themes. But here's the point: the user won't necessarily have a white browser background. As always, assumptions are our enemies. We know nothing.

What happens when the browser's background is not white?

Let's say I'm a fan of dark mode and I set the browser's background color to #000000.

A first effect is that when there is nothing shown, because I'm loading another website, my screen will be black.

A soothing black fills the screen while the new website loads

A Reddit user explained this in a post titled How to not get blinded by white light when opening a new site. That's indeed the immediate improvement, but that's not the whole story.

Another post whose title I love completes the picture : I changed the background color to black. Now I can see nothing.

Oops, by setting the background to black, this user has turned the web… invisible.

A racoon looses its candy

Remember what explains the w3c:

If the canvas background is not opaque, what shows through is UA-dependent.

That means that if you don't set a background color to your page (which will fill the canvas), the browser's background will show through.

You can see the browser's background if the canvas is transparent because no background color is set.

While a lot of websites explicitly set their white background, that's not always the case, and that's how the web can become invisible.

Here's what TechCrunch looks like with my browser's background set to black:

The website is not legible

Hard to read? Well, that's what black text on a black browser's background will do. Indeed, TechCrunch's CSS doesn't set a background color.

The fix is very simple:

body {
  background-color: white;
}

The website is legible

We did not change the browser's background: it's still black. But the canvas, which was transparent, is now white.

So here's a piece of advice from Raphael:

I have set [the browser's background color] to grey to check if I haven’t accidentally forgotten to add background:white to a page that should have a white background.

This looks like a great tip and prompted me to write this new post. The drawback is that you'll see a grey background on TechCrunch and other "transparent websites" (unless you use separate environments for development and casual browsing, of course).

Are there a lot of transparent websites?

While this is not representative of "the Web", I tested the top 100 of most visited websites, and 14% had a transparent canvas, letting through the yellow background color I used to lead my investigation.

A not so healthy background color

Among them: The Wall Street Journal, Paypal, Vimeo, AOL, the BBC…

I kept this dreadful yellow as my background color for a few days now, and I find the 14% ratio to be consistent with everyday navigation. I can tell you that reading things against such a background motivates me quite a lot to finish this writing.

What about the user?

You might think:

If the user decides to use black as the background color, maybe they have a reason and we should not interfere?

That's complicated. Who changes the "universal" white background?

It might be the user. It might the user agent itself (which could be a computer, a phone, but also a lot of different devices).

It may be impossible to have statistics about this, but a thing we can be sure of is that an undetermined fraction of our users won't have a white background. And so a transparent website will break.

Except if the user/browser also changes the default color of the text. In Firefox, that's easy. Update the browser.display.foreground_color parameter.

Any text whose color is not set in CSS will use this value. Let's go back to TechChrunch.

The website is partially legible

That's not great. Yes, some of the text is now white. But that's only the text whose color was not set in CSS. Since it's common for text to have a color slightly different than black, there is still a big part of the content that can't be read.

For this to work, you'd need a website without an explicit background color and without an explicit text color.

There is no CSS on motherfuckingwebsite.com, so it works well.

Note that you can also set the color of links, focused text and so on, but that's the same rule: it will only work if no CSS is applied, which is unlikely for most websites. A color clash is bound to happen.

So I think it comes down to two solutions:

  • Specify nothing and have a super simple design that will adapt itself to the browser's color scheme.
  • Specify a background color and a default text color.

That's why you may want to add the following lines to your boilerplate:

body {
  background-color: white;
  color: black;
}

I guess it's one of these "very specific but so easy to solve that it would be a shame not to" situations. You never know what strange combination of device characteristics your website will have to work with.

So what's the point of changing the browser's colors?

I'm a big advocate of respecting the choices of the user (or its browser). The CSS we write should not be imperative orders to generate a pixel perfect page, but a set of indications that the browser can use, among other things, to know what the result should look like.

On the other hand, I think we established that it's more safe to "force" the background and the text color of a website, otherwise it could quickly become unreadable.

Fortunately, both approaches can be reconciled, because our browsers are smart. And that's the last setting I want to talk about: browser.display.document_color_use.

When this setting is set to 2, Firefox will override all the CSS colors with the ones defined by the user or Firefox itself. In other words:

I don't care about your CSS, just use these colors!

Let's try again the dark mode thing by setting Firefox's background color to black and the foreground color to white. Only this time the CSS won't be able to override our choices, thanks to the document_color_use setting.

TechCrunch with a customized color scheme

It now works. I even changed the color of the links to something that felt more right to me. The CSS has not changed, but Firefox overrides it.

Now that the browser can only use the color scheme we have defined, it's more likely that websites will show an acceptable display.

I tested the 14 transparent websites of the top 100, and each of them worked well. I estimate that something like 95% of the content presented great readability with my customized color scheme. But of course, it's not perfect.

Vimeo's homepage in dark mode

Vimeo's homepage is quite legible... with the notable exception of the logo and the top right links.

Note that when you use the document_color_use parameter, every website is impacted, not only the transparent ones.

dev.to has a background color, which is overriden by my Firefox settings

That cannot replace a hand-made dark mode (and dev.to has one), but most of the times you get a good result.

More important than dark mode, it's an great option for accessibility. Here's TechCrunch with the document_color_use parameter enabled and Firefox's default color scheme:

TechCrunch with Firefox color scheme

Wow, that's a lot of links. Almost everything here is inside <a> tags, hence the blue color. Let's scroll a bit, a compare the original design with what we have now:

Top: default behavior. Bottom: Firefox's color scheme.

When Firefox's color scheme is forced, you can see pure black for text (instead of the medium gray of the original design) and blue for links. It's a bit brutal but excellent for visual accessibility.

Actually, this is what will automatically happen on Windows if you enable the "high contrast mode" of the OS. No browser manipulation needed.

This being said, this cannot replace good accessibility design. You could say that's it because the web is not super accessible that such options are needed.

Always show your true colors

So here's what we learned:

  • Always specify a background color and a text color on your page, because there is no such thing as a "universal default value".
  • If a user or device need to override them, they can and that's great!

As for me, I swear I will never look at a white pixel the same way again.

CSS Adventures in Canvas Land (3 Part Series)

1) What is the color of a blank page? 2) The trouble with Chrome, iframes and mix-blend-mode 3) Why you should always set a background color

Discussion

markdown guide