Are the colors on your website accessible?

Colors choice is important. It helps sets the tone for what you, your brand/business and your website are all about. If you’re a middle grade or picture book writer, you might use warm, primary colors to evoke a playful sense of youth. If you’re a fantasy writer you might look for more mature, deep colors to strike a serious, adventurous tone. But there’s one more important thing you should consider before selecting your color palette–make sure your color choices are accessible to all users, regardless of visual or cognitive disabilities.

What is web accessibility and why should you care?

Simply put, web accessibility means that your website is designed and developed in a way that allows ALL people to use it, regardless of any chronic or temporary disabilities they may have. Web Content Accessibility Guidelines (WCAG) are developed by The World Wide Web Consortium in collaboration with individuals and organizations. It strives to define a single, shared, international standard for accessibility across all digital content.

From a font perspective, this means that your font needs to have enough contrast between it and its background so that it can easily be read. For example, imagine an individual who is color blind is trying to navigate and read your blog content. Can they see your headlines and the body of your post?

There are a number of benefits to ensuring your color (and your whole website for that matter) are accessible. In addition to building content that all can experience and enjoy, you’re also optimizing your content for search engines (SEO).

Search engines want to be sure they’re delivering the highest quality results to their users. This means search engines not only evaluate WHAT the content on your site is but also HOW it’s built and displayed.

In this regard, there are a number of ways that SEO and accessibility overlap: page structure and heading tags, image alternative text, as well as size and contrast of text, to name a few.

Double-check colors in pre-built website templates

You might be thinking, “I picked a template from Squarespace or WordPress, so I’m good. They must screen or ensure those meet standards right?”

Unfortunately, that’s wrong.

Few sites screen template designs (especially their free ones) to ensure accessibility standards are being upheld. So it’s your responsibility to confirm the colors you want to use are accessible.

How to test contrast and accessibility

How much contrast do you need? WCAG requires a 4.5:1 contrast ratio between the foreground (your text) and the background.

Thankfully there are a number of sites that offer free tools that help you test the accessibility of your colors. I prefer this contrast checker by Web Accessibility In Mind, because it’s easy to see if your color passes or fails WCAG standards, and allows you to manipulate a color’s hue to see if deepening or lightening the color improves the contrast ratio.

A screenshot of WebAIM's contrast checker shows a light purple color on white background fails accessibility test

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s