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, howver, 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 decide which colors pair effectively, both in contrast to others and within the design of a website.

Strong Contrasts

Some colors may be bright and show up vibrantly on a particular background color, such as blue on black, but they 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 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.

Online 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.