Website Color Contrast: How to Check For It

Website Color Contrast Is an Important Accessibility Issue

Have you ever visited a website and struggled to read the text? Usually, the reason you are experiencing difficulty is related to color contrast. 

Under current website standard practice, websites should be striving to hit the WCAG Level AA standards or higher. Depending upon the nature of your business, having an accessible website isn’t a goal, it is a mandate. You can be denied funding, contracts, or even sued if your website does not meet minimal accessibility standards. Color contrast plays a big role in these standards.

Are There Reliable Tools That Aid in Checking Color Contrast?

How can you check to see if the colors on your website are meeting the WCAG Level AA requirements? Luckily there are some great tools out there that can help you with color contrast. Even better, many of these tools are free! You also don’t need to be an expert in CSS, design, or coding to understand how these tools work.

Check out the video below to see how to check for color contrast on a website.

What is Website Color Contrast?

Color contrast is defined as the difference in light between font (or anything in the foreground) and its background. In web accessibility, how well one color stands out from another color determines whether or not most people will be able to read the information.

Sometimes color contrast is obvious. For example, most people would realize that the below image would be very difficult to read. The light background and light font make it extraordinarily difficult to see the text “Register Today”.

Users would have a tough time discerning that this Call to Action button was on a website, let alone click to take it. It might simply look like a decorative element, and they would not even realize that they had the option of making a choice.

Website Color Contrast May Involve More Than You Realize

The above illustration is fairly obvious. However, sometimes the choice is less obvious. People with 20-20 vision may experience no issues, but people who are far sighted, have lower vision, color blindness, and other challenges may struggle when differences are more subtle. What seems highly legible to one person, may not in fact be legible to many other people.

Size and weight affect website color contrast

Aside from the shades of the colors, there are other factors that affect color contrast. Size and weight affect color. Typeface in size 11 font is not as readable as the same type in size 20 font.

Both of the above examples contain dark red text on a white background, but due to size and weight, only one item meets acceptable color contrast ratios and the other doesn’t.

Think of weight as how skinny and fine the lettering is. The thinner a font, the more contrast that is required. In the example above, you can see how the very slender Courier font is much more difficult to read that the identically sized Arial font. However, when Arial font is too small, it too is unreadable.

Website Accessibility is for Everyone

Poor color contrast doesn’t just affect those who have color blindness, low vision, or other conditions affecting eyesight.

We are all getting older. As we age, our midrange and close range vision deteriorates. Color contrast becomes a major issue.

There are also situational issues where color contrast makes a less than ideal situation worse. For example, looking at your smart phone in sun or in a room with florescent light glare is something we have all had to deal with.

There are also everyday situations like a busy parent holding a fussy toddler while multitasking on their phone, or someone post Lasik/cataracts surgery trying to use the web before they are 100% healed. Poor color contrast is not improving their day.

---