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 complementary and contrasting colors. 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.” 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.”
Get Your Contrast Up to Code
Use this 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, if you use the Contrast Checker and see that your site fails, then you should let us know in the form below. We should be able to make the necessary changes so that your site complies with the WCAG 2.0 regulations. We’ll also make sure that the new colors for your site match the look and feel you want to have on your site.
If you want to tackle the problem right away, without making all of those possibly expensive changes, we can perform the upgrade that will enhance the contrast of almost all website text. Our tool gives users the option to select the Contrast feature on the menu. Look in the upper right corner for the disabilities logo, click on it and try it. 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!