Why is Color Contrast So Critical? Feb 20, 2017

Colored pencils in a circle

Remember the websites of the 90s and early 2000s? The bright color text glaring against light backgrounds (not to mention the excessive use of unreadable script fonts) isn’t always a thing of the past. Some websites still present information in a way that is unreadable to a great deal of the population. The issue here is that the color contrast is off, and as a result, the text is basically unreadable. Even if you don’t have poor eyesight, color contrast problems can make it really tough for you to get the most out of certain websites.

What is Color Contrast

When you were in school, you probably learned about complimentary and contrasting colors. I remember picking out primary color crayons, and trying to figure out which colors they looked best next to when I was drawing pictures. While certain colors might look pretty next to each other, they might not be best for a website because of a little thing called color contrast.

My favorite definition of color contrast comes courtesy of the Colors on the Web site, “Simply put, contrast is the difference between two colors. On a web page, the amount of contrast required varies with different parts of the page. You usually want a high contrast between text and its background color. But too high contrast between design elements might give an unsettled and messy impression.”[1] There you have it; there is a color contrast sweet-spot where the colors on your website are different enough to be readable, but not so different that they give your site a chaotic or unpleasant visual presentation.

How Do I know if My Site Is Bad?

It isn’t always easy to tell that there is a color contrast problem. The text might appear just fine to your eyes, while someone else might have a difficult (or impossible time) reading it. This is one of the toughest parts of web design and accessibility. Everyone’s experience is different, and everyone has a unique perspective. Some web designers and website owners find this incredibly frustrating because it is so difficult to predict what issues someone might have when interacting with a website.

While that attitude isn’t great, it’s something that is pretty common. Much like the statement “You can’t please everyone all of the time” this attitude is a bit defeatist and can create an easy escape route to being too lazy to make critical modifications. I’m not trying to shame people into making their websites accessible, but I am trying to show how flawed that thinking is. Especially when it comes to color contrast, because that’s a pretty easy situation to fix.

WCAG 2.0’s guidelines give you a very precise guide for what color contrast ratios are acceptable for websites. Here’s what the W3C group has to say about color contrast ratios:

  • “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 except for the following: (Level AA)
  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.”[2]

Get Your Contrast Up to Code

UserWay has a handy color contrast tool that can help you figure out if your colors are within the WCAG 2.0 guidelines. All you have to do is enter the hex codes (also known as the 6 digit and number code that represents the colors on your site) into the Foreground Color and Background Color boxes. The site will then generate an image that matches what your site looks like, and will tell you whether or not you pass the AA (and stricter AAA) requirements.

If your site fails, then you will be able to use the tools and make small modifications to see if you can get colors that will pass both requirements. You will then be able to take the new color codes and enter them on your site so that it is readable. If this sounds a bit overwhelming, that’s ok! There are two options to help you out.

First, you can talk to your web designer. If you use the Contrast Checker and see that your site fails, then you can easily email your results to your web designer right from the UserWay site. They should be able to make the necessary changes so that your site complies with the WCAG 2.0 regulations, and also make sure that the new colors for your site match the look and feel you want to have on your site.

Second, if you want to tackle the problem now, you can install the UserWay widget on your site. This helpful tool is totally free and only takes a few minutes to install (and you don’t have to mess with your website’s code). Once the UserWay widget is installed on your site, it will give users the option to select the Contrast feature on the widget. This will give them the ability to invert the colors, make the site have a dark contrast, or give it a light contrast. This way, they can choose to customize the site to make it as readable as possible for their particular eyesight.

Making your website accessible is a critical step to ensuring that everyone can access the content you provide. While there are a lot of things to consider when building a website, creating one that strongly adheres to the WCAG 2.0 guidelines (and future iterations of these rules) will only serve you well in the future. As more and more internet users age, these accommodations will become increasingly more important in allowing them to use the web without hassle. Updating the color contrast on your site is just one more simple way to help your visitors out. After all, they’re the reason you probably have the site in the first place!

Were you surprised by your color contrast results? Did you need to make a big change to get your site to comply with the contrast ratio guidelines? Share your color contrast thoughts in the comments below!

Similar posts

Computer screen with accessibility in the news written on it
Accessibility News - Summary for the Week of February 17th, 2017
It’s Friday February 17, 2017, which means now is time for us to take another look at the new accessibility developments that have happened over the course the week. One item I’m particularly…
Computer screen with "Accessibility in the News" written on it
Accessibility News - Summary for the Week of February 24th, 2017
Today is Friday, February 24th, 2017 and it’s about time for another quick recap of accessibility news stories. This week we are looking at an exciting outcome from a stem cell study done on patients…