• Skip to primary navigation
  • Skip to main content
Bet Hannon Business Websites

Bet Hannon Business Websites

Building sites that grow with your business

  • Home
  • About
  • Portfolio
  • Accessibility
    • Website Accessibility Audit
  • Blog
  • Contact
  • Show Search
Hide Search
You are here: Home / Design / Website Color Contrast: How to Check For It

Website Color Contrast: How to Check For It

Author:
Laura Byrne
4 minutes

A color wheel demonstrating color contrast.

Website Color Contrast Is an Important Accessibility Issue

Have you ever visited a website and struggled to read the text? As a generality, the reason you are experiencing difficulty is likely 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.

The words "Register Today" in light blue on a bright pink background to illustrate poor color contrast

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.

Arial Font Example in dark red size 5 and 20 side by side for comparison to demonstrate accessibility contrast
Courier New Font Example in dark red size 5 and 20 side by side for comparison to demonstrate accessibility contrast

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.


Do You Need Help with Website Accessibility?

Do you want an audit of your website to check for accessibility issues? Do you want someone to remediate accessibility issues on your website? Are you looking to revamp your website and want to make sure that accessibility is factored in from the beginning? Contact us, and start a conversation.

Author: Laura Byrne

Laura Byrne headshot

With two decades of experience in nonprofit marketing, public relations, and freelance writing, Laura has managed multiple websites and worked with content management and editorial plans on over 50 websites.


Bet Hannon Business Websites logo

Never miss another article from us. Sign up today to receive our monthly newsletter to learn more about website accessibility, best content practices, and more.

Sign up for our newsletter

Author:
Laura Byrne
4 minutes

Categories: Content Tips, Design, Website Accessibility, Website Accessibility and Compliance

About the author

Bet Hannon Business Websites logo

Bet Hannon Business Websites

Established in 2008, Bet Hannon Business Websites has been helping businesses, large and small, manage their WordPress websites. In 2018, we dedicated ourselves to building, designing, and writing with accessibility in mind to ensure everyone has universal access to the websites we create. Our combined experience extends well beyond online solutions; we're here to teach and we're here to help.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Footer

Like what you're seeing? Designed and developed by us!
Coyright © 2022 · Bet Hannon Business Websites

Connect with us

  • Privacy Policy
  • Accessibility Statement