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.
And so Internet Explorer made a decision that would shape the web as we know it now: white.
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_colorsetting - 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.
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 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.
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.
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:
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;
}
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.
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.
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.
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.
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.
Note that when you use the document_color_use parameter, every website is impacted, not only the transparent ones.
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:
Wow, that's a lot of links. Almost everything here is inside <a> tags, hence the blue color. Let's scroll a bit, and compare the original design with what we have now:
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.
Top comments (0)