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