Your Website Accessibility and Color Contrast

My daughter received a sample of a new conditioner from her stylist during her last appointment. If you’ve used conditioners, you know, different products suggest different methods of usage. Some want you to apply to wet hair in the shower. Others suggest leaving it in for five minutes. Still others are designed to be left in the hair. The writing on this bottle of conditioner was so tiny, and the color contrast between the text and background so slight, that I had to take a picture of it with my cell phone and blow it up to read the directions.

Surely you’ve been there before too, right? Even with your glasses, you feel like grandpa looking for his magnifying glass to be able to read something.

Now imagine feeling like that every time you open a website page

Frustrating, isn’t it?

Accessibility for your business goes beyond ensuring that customers with physical disabilities can access your location. It also includes access to all your digital media such as your website, social media posts, and app development. Making sure your customers and prospects can easily access your website is the right thing to do. And if that’s not enough motivation, not building an accessible website can cost you money. In 2017, more than 814 federal lawsuits were filed against allegedly inaccessible websites. Accessible websites include a lot of technical and not so technical pieces. Today we’re starting with color contrast and website accessibility.

Let’s Talk Color Contrast

One of the most important aspects of being able to clearly read a website’s content and navigate through its pages involves color ratio. Color contrast affects more people than most realize. As we age, it’s harder to see colors with low contrast. Color blind readers may not be able to see low contrasting colors at all.

Contrast measures the difference in light between the foreground and background. In the case of websites, most foreground content will be fonts. Now you understand why color contrast affects your website accessibility so much.

WCAG 2.0 lays out guidelines for website accessibility best practices. It suggests a 1.4.3 contrast. What exactly does that mean? It’s the contrast ratio based on text size. They break it down further to instruct text and images of text to have a contrast ratio of 4.5:1. Larger text, 18 pt and higher, or 14 pt bold text are expected to have a ratio of 3:1. 

Here’s what different color contrasts look like. We used our brand colors and chose a common red for comparison as well. You can really see how much easier some color combinations are to read than others.

green color contrast example red color contrast example

How to Check Color Contrast

In a bit of good news, you can check your website’s color contrast using several free online tools. This tool by A11Y is our favorite. You can check the contrast of a webpage as a whole or test color pairs. These tools are great for building color combinations for use in graphics, especially for social media. Plugin your brand colors to see the ratio. Create a handy chart in Canva or Google Drive for reference when creating images. You won’t have to worry about what colors work well together.

How Does This Apply to Your Website?

Now we’re getting to why you’re still reading this article. Most websites are black text on a white background which is the absolute best contrast you’ll find with a ratio of 21:1. But most likely your entire website isn’t black and white. Most sites have a solid color menu bar at the top and in the footer. Many break up white space on the front page with another bar of color. Then you have those very valuable CTA buttons.

If the contrast between your “Click Here” text and the button isn’t high enough, your reader may only see the button or see your text as a smudge bundle of letters. Low contrast in the menu and footer will send your site visitors away faster than you can say “bounce rate.”

Where to Start with Color Contrast and Website Accessibility

The easiest way to achieve website accessibility is to plan for it when you design your website. If your site is designed and you love the look and function of it, all is not lost. You can start by adjusting your colors to create better contrast. Use the tools in this article to determine if and where you have problems with color contrast. Then, talk to your web designer about adjusting the colors. It’s honestly one of the easiest changes you can make to your website.

If your website meets all the color requirements, congratulations! Now you can turn your attention to other graphic elements your company uses for marketing like social media images to ensure you’re meeting the guidelines there too.

If your site isn’t what you’d like it to be, we can you create a beautiful website with the functionality you need that meets these accessibility requirements. One phone call to Hilary at 662-416-8674 starts the conversation to move you from a site you won’t recommend to your clients to one you’re proud to promote.

>>Read Next: Website Image Best Practices<<

Submit a Comment

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