Effective Color Contrast for Websites and Web Applications

Effective Color Contrast for Websites and Web Applications
Effective Color Contrast for Websites and Web Applications

Not sure on what’s the best set of colors to use for your project? In this article, we’re going to focus on the use of color in websites and web applications and why contrast is an important matter.

What is Contrast?

In a nutshell, contrast is the difference between two colors. If you imagine a color wheel, and you have two colors that are far apart or polar opposites, these colors are going to have a lot of contrast because they are different. Whereas, if you take two colors that are very close together on the color wheel, it’s going to be harder to tell the two apart.

We can’t emphasize enough that color is a very powerful communication tool and we certainly don’t want to limit ourselves to black and white just for the sake of contrast.

Basically what this means is that when you’re going to create a color scheme for a project, you should adhere to these standards and the reason why there there’s a AA and AAA is because we all have different issues with our eyesight. Some people may have perfect eyesight but there are also some people who don’t have 20/20 vision so if you can create your color palettes that can reach as many people as possible.

Color contrast is one of those important guidelines, which makes sure that people who cannot see certain colors or who do not see colors at all are able to normally use any website or web application. We will giving some examples further in this article to explain why poor color contrast leads to a bad user experience for these people.

Choosing the right color contrast
Choosing the right color contrast

Efficient Color Contrast

So how much color can we use and still have good contrast?

The reason why this is important in web design is that oftentimes, our whole goal is convey some information to the user, usually through text and images. But if the contrast of our text is a little too subtle and too mixed in with the background, it might be difficult for the user to read the page and would degrade the user experience.

On the web, we actually have guidelines on what our contrast minimums should be. On the Web Content Accessibility Guidelines section 1.4.3, it’s indicated there that for body text, you have to aim for a contrast ratio of around 4.5:1 for smaller texts or some of your general body copy.

And for larger text, you need to format it with 14 point bold or 18 point and you can ratchet that contrast ratio down just a little bit to 3:1.

It would also be better to consider who your audience is going to be when you’re building your site or application and that can help you decide on where you want to aim on the contrast ratio scale.

Color Contrast Examples

To give you a better understanding about contrast, we’ve prepared some examples for you to look at:

In this first image below, we used the fuchsia color which is pretty similar to a purple or pink. Here, we can see in the image that some very poor contrast ratios exist for the majority of the named colors in the HTML 4 Specification.

Poor contrast for fuchsia
Poor contrast for fuchsia

If we look for example at red with a contrast ratio of 1.3, we can see here that when that is sized at 14 pixels on the screen and it’s obvious that it is already very difficult to read.

Similarly with grey with a contrast ratio of 1.3 as well, it is also very difficult to read on the screen.

When we have contrast ratios that are greater than 4.5, which means that they have a very strong contrast ratio, this means that this content is very easy to view on the screen.

4.5:1 contrast for fuchsia
4.5:1 contrast for fuchsia

Now let’s look at this next example where the black text on a fuchsia background has a contrast ratio of 6.7 and navy on a background of fuchsia has a contrast ratio of 5.1.

Both of these pieces of text that are rendered at the smaller font size are able to easily be read because of this strong contrast.

3:1 contrast for fuchsia
3:1 contrast for fuchsia

Here’s our next example with a 3:1 contrast. We actually have specific requirements around the size of our font when we can use colors that contrast at this ratio.

For maroon and fuchsia, the contrast ratio is 3.5 while for white and fuchsia, the contrast ratio is 3.1.

What this means is that if we use a font that is at least 14 points and bolded or 18 points regular, then these are sufficient color contrast.

14pt bolded font and 18pt regular fond on a fuchsia background
14pt bolded font and 18pt regular font on a fuchsia background

There is enough difference between the lightness values of these colors that we can actually use those in our web content and expect that a large group of people will be able to use our content.

These examples clearly demonstrate why the contrast ratio exists. It is a specific algorithm to make sure that your text can be read by the largest number of people. And always remember: the higher the ratio, the easier it is to read.

And there you have it. We hope that we were able to give you at least a basic understanding of color contrast and how it could affect certain users particularly those with reading disabilities. Be sure to remember these tips when you are designing your web applications and websites in the future.

About the author

David Cote

Add Comment

Click here to post a comment