CSS Basics: Using Fallback Colors

Something you very much want to avoid in web design is unreadable text. That can happen when the background color of an element is too close or exactly the color of the text. For instance:

.header {
  background-color: white;
  color: white;
}

Which could lead to text that’s there, but invisible.

You’d never do that on purpose of course! The trouble is it can sneak up on you. For one thing, the default background-color is transparent, so without setting any background the background of an element is probably white.

More commonly, you’re using a background-image that makes the background a different color, and you’re setting white text on top of that.

header {
  background-image: url(plants.jpg);
  color: white;
}

Under perfect circumstances, this is all good:

But let’s take a look at what it looks like while the website is loading over a very common “Slow 3G” internet connection:

There’s no reason our dear visitor needs to wait to discover the incredible savings awaiting them this Sunday! Fortunately, a tiny bit of CSS solves this.

header {
  background-color: black;
  background-image: url(plants.jpg);
  color: white;
}

The black background color will ensure the white text will be visible while the image loads (or if it never loads at all!). Getting slightly fancier, we could use a color used in the image. I like a little app called Frank DeLoupe for helping me pluck a color from anywhere on my screen. Then I’ll use that color as the fallback color using the shorthand syntax for backgrounds:

header {
  background: #334C23 url(plants.jpg);
  color: white;
}

Much much better.

This kind of thing takes very little effort, improves your design’s resiliency and UX, and I think you’ll find becomes are part of your CSS muscle memory the more you write CSS.

Another related topic here, since we’re working with a photograph, is the idea of a “Progressive JPG.” Photoshop has the ability to save a JPG in this format. This changes how the displays as it’s coming across the network. Here’s a comparison video:

Perhaps a more desirable loading experience, but not a replacement for a fallback color.

Leveling up!

Images are one of the heaviest parts of websites, and loading techniques for them are a big topic in web performance. Here are some more related to things to think about:

• Using CSS gradients we could replicate a blurry version of the image before it loads. Or even automate it.
• Check out the blur-up technique
• Check out this clever technique for using SVG polygons as a fallback image.