How to Contrast Background and Foreground Colors in Web Design

This article explains how to effectively create contrast between background and foreground colors in web design.

How to Create Strong Contrast

Some colors may be bright and show up vibrantly on a particular background color, such as blue on black, but they are poor contrast choices. If you were to create a page in all blue text on a black background, for example, your readers would experience eyestrain very quickly.

Study the chart below to get a sense of the best background/foreground combinations.

Use Online Contrast Checker Tools

In addition to your own design sense, try some online tools to test your site's color choice. CheckMyColors.com will test all of your site's colors and report on the contrast ratio between elements on the page.

Additionally, when thinking about color choices, you should also consider website accessibility and people who have forms of color blindness. WebAIM.org can help with this, as can ContrastChecker.com, which will test your choices against Web Content Accessibility Guidelines.

Why Is Contrast Important?

Strong contrast plays an important role in the success of any website's design. Adequate contrast ensures a quality user experience and easier readability that will contribute to a site's long-term success. Websites that are too low in contrast, however, can be hard to read and use, which will have a negative effect on any site's effectiveness.

While it may be easy to determine which colors do not work well together, it's a tougher question to decide which colors pair effectively, both in contrast to others and within the design of a website.

Branding Standards and Contrasting Color Choices

Contrast is just one of the factors to consider when you choose colors for your website's design. When selecting colors, you will likely also have to be mindful of the brand standards for the client, whether it is a company, other organization, or even an individual. Though color palettes may be consistent with an organization's brand guidelines, they may not translate well for online presentation.

For example, yellow and bright greens are terribly challenging to use effectively on websites. If these colors are in a company's brand guidelines, they will likely need to be used as accent colors only, since it is hard to find colors that contrast well with either.

Similarly, if your brand colors are black and white, this means great contrast, but if you have a site with lengthy amounts of text, a black background with white text is going to make reading very an eye-straining experience despite the inherent strength of contrast between black and white. In this case, it is advisable to invert the colors, using black text on a white background. That may not be as visually interesting, but it is a far better contrast and readability choice.