How to pick a good background color.

How to pick a good background color

The first thing to do is understand the rules for picking a background color that applies to your situation.

For example, picking a background color for a user interface is much more different than for someone looking to design an attention-grabbing billboard.

For the user interface, it's important to pick a background color that blends in, and for the billboard, it is better to go for a high-contrast background color.

Let's look at a few examples.

UI design

For UI design, the background is literally on the background. It shouldn't grab attention because it distracts users from the important information in the foreground.

You can do this, for example, by picking a very low-opacity shade of the accent color you use for your design. Here's how UX Dictionary does that.

Another way is to use a very subtle grey color, like #f5f5f5 or something that adds just a hint of your main accent color.

Print media and commercials

This category is the opposite of UI design because it is all about grabbing attention. In color theory, the number one way to grab attention is by creating contrast. You can find a contrasting color by looking at the color's opposite on the color wheel.

The images above by Meg Lewis and Rachel Gillespie are excellent examples of this. The contrast of the background to the foreground is very high. If this were in UI design, both background colors would be much subtler.

Should you use a light or a dark background

Choosing between a light and a dark background depends on the use case of your design.

Using a dark background is the way to go if you design something people look at for a long time, like a coding app, for example.

Dark mode is super popular. It even became a meme within the software development community. But the good thing about dark mode is that it is much easier on the eyes. That's useful when your design involves a lot of text and focused reading.

On the other hand, a light background helps when working in a bright (office) environment. On monitors, a bright background emits a lot of light. It counters the bright environment and makes your text readable.

Using a light or dark background color can also depend on the context. For example, designing a Halloween poster benefits from a dark, spooky background, whereas a colorful and light background is more suited for a summer holiday commercial.

How do I choose a background image

Choosing a background image is usually something you do for print design, landing pages, or hero sections in web design. The most important thing to remember is that it shouldn't conflict with the foreground content.

For example, if you design a landing page, you don't want the background image to conflict with the main header, subtitle, and call to action.

But what if you found the perfect image, and it conflicts a bit with your content?

You can add a layer between the background and the foreground. Give that layer a dark-colored fill on a 20% opacity. That's enough to darken the background a bit more.

It helps a lot with the readability of the text and the content you put on top of the background image.

Next steps

Now that you know how to pick a background color, you're one step closer to creating a complete color scheme. That usually involves picking a font color and accent color, too.

Check out my guide on that next.