How to Contrast Background and Foreground Colors in Web Design

Improve website readability and user experience with correct contrast

Color contrast table

Jeremy Girard

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 can be hard to read and use, which will have a negative impact on any site's success. Poor color contrast issues are often easy to identify; often you can simply look at a page in a web browser and see whether a text is difficult to read because of poor contrasting color choices.

While it may be easy to determine which colors do not work well together, it can prove challenging to decide which colors will work well in contrast to others and within the design of a website. This chart shows a variety of colors and how they well they contrast as foreground and background colors. You can see some effective pairings as well as a poor pairing that should be avoided when choosing colors for your site projects.

Not all strong contrasts are good contrasts

One thing you should note in the chart is how some of these colors may be very bright and show up vibrantly on a particular background color, such as blue on black, but they are labeled as poor contrast choices. This is because the color combination, despite its contrast, still results in text that is difficult to read. If you were to create a page in all blue text on a black background, your readers would experience eyestrain very quickly.

There are rules and best practices for contrast, but as a designer, you must always evaluate those rules to make sure that they work in your particular instance.

Branding standards and contrasting color choices

Contrast is just one of the factors to consider when choosing 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 instance, 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.

Online tools

In addition to your own design sense, there are some online tools that you can use 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 (WCAG).