Using Contrasting Foreground and Background Colors in Web Design

Improve your website's readability and user experience with adequate contrast

Color contrast table
Color contrast table.

Contrast plays an important role in the success of any website's design.From that site's typography, to the images used throughout the site, to the contrast between foreground elements and background colors - a well designed site must have adequate contrast in all these areas to ensure a quality user experience and long term site success.

Low Contrast Equals a Poor Reading Experience

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. You can usually do so just by looking a page that is rendered in a web browser and you can see if the text is too hard to read because of poor color choices. Still, while it may be easy to determine which colors do not work well together, it can actually be very challenging to decide what colors work well in contrast to others. You may not what doesn't work, but how will you determine what does work? The image in this article should help show you a variety of different colors and how they contrast as foreground and background colors. You can see some "good" pairings and some "poor" pairing, which will help you make the right color choices in your projects.

Regarding Contrast

One thing you should note is that contrast is more than just how bright a color is compared to the background. As you should be see in that aforementioned image, some of these colors are very bright and show up vibrantly on the background color - such as blue on black, but I still labeled it as having a poor contrast.

I did this because, while it may be bright, the color combination still makes the text difficult to read. If you were to create a page in all blue text on a black background, your readers would have eyestrain very quickly. This is why contrast is not just black and white (yes, that pun was intended).

 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.

Choosing Colors

Contrast is just one of the factors to consider when choosing colors for your website's design, but it is an important one. When choosing colors, be mindful of the brand standards for the company, but also be willing to address color palettes that, while they may be consistent with an organization's brand guidelines, do not work well online. For instance, I have always found yellow and bright greens to be 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, having a black background with white text is going to make reading very hard. Even the contrast between black and white is great, white text on a black background causes eye strain for lengthy passages. In this case, I would invert the colors to use black text on a white background.

That may not be as visually interested, but you will not find better contrast than that!

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 

Original article by Jennifer Krynin, edited by Jeremy Girard 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 WCAG guidelnes.