Accessibility Color Checker: How To Check Your Website [2023]

Inside this Article

How Do I Use a Color Checker To Improve My Site’s Accessibility?Quick Solution To Make Your Website’s Color Scheme Accessible How to Check Your Website’s Overall Accessibility Conclusion FAQ

Right now, the WCAG 2.1 guidelines are your best guide to making sure people can actually read what’s on your websites, especially people with low vision or similar visual disabilities. But WCAG 2.1 compliance can be a little tricky. For example, you need to reach a minimum text to background contrast ratio of 4.5 to 1*, and that’s to say nothing of Level AA and Level AAA compliance.

You should not try to eyeball this. Don’t worry, we’re going to make it easy for you to check and fix this sort of thing with a step-by step guide and a great color checking tool linked below.

However, if you’d like to save yourself a lot of work and time, you should try accessWidget by accessiBe. This is a plugin that can be used with WordPress, Wix, Squarespace, and manually-coded websites to help you reach WCAG 2.1, ADA, AODA, Section 508, and EAA/EN301549 compliance with minimal effort.

* Note for the newbies: the contrast ratio is a measurement of the comparative luminance (or “brightness”) between two colors.

Make Your Site Accessible With accessWidget >>

How Do I Use a Color Checker To Improve My Site’s Accessibility?

This part is actually really simple, though it takes a little bit of work. You’re going to need to use the online Contrast Checker tool from WebAIM. WebAIM is a non-profit organization based at Utah State University dedicated to improving accessibility all over the web.

The actual checker looks like this:

The WebAIM contrast checker — WebAIM’s contrast checker keeps things simple

You just have to grab your foreground color (e.g. the color of your text or icons) and background color as hexadecimal values (also called hex values, as specified in the HTML or CSS), and the checker will tell you if there’s enough of a contrast ratio between the two. Remember, the minimum contrast ratio that you’re looking for is 4.5 to 1. Black text on a white background has a ratio of 21 to 1, so you actually have a lot of wiggle room.

Examples of colors that have an exact 4.5 to 1 contrast ratio — The minimum can still be hard to read for some people

Above is an example of the minimum contrast you need, as screenshotted on WebAIM’s website.

For this tutorial, I’m going to grab some colors from different elements on my personal WordPress test site, using my favorite slightly-flawed test theme: Ameya. Here’s what that looks like:

My test website — This is my usual test website

Now mostly the contrast looks okay, right? Well, there are a few bits and pieces that concern me. I’d specifically like to check these icons in the header:

Some low-contrast icons in the site header. — Those icons look a bit low-contrast

And these two (repeated) text elements from further down on the page:

Some low-contrast text — The text in the “Our Services” section particularly worries me

You might be thinking, “Wow, that logo sure has terrible contrast!” And you’re right. This is a lesson in what happens to logos in WordPress child themes if you’re not careful. The funny thing is that although icons must have a basic amount of contrast, logos themselves don’t count towards the contrast/usability score in WCAG 2.1. This is, I’d imagine, a concession to the needs of company branding.

I’d still change it though.

The ColorPick Eyedropper extension in action — Grabbing the HEX values is easy enough with an eyedropper tool

Now, I’m just going to grab the foreground and background colors of each, and show you the results. If you don’t feel like digging into your site’s code for the hex values, I recommend using an “eyedropper” tool like the ColorPick Eyedropper extension for Chrome and Chrome-based browsers, shown above.

The results for my test on the icon colors — The icons pass Level AA, but not Level AAA

The results for the icons are interesting. With a contrast ratio of 5.12 to 1, it just barely beats the minimum requirements for normal-sized text, but does not meet Level AAA compliance. (Level AAA would require a 7 to 1 ratio.) However, since these are logos, they can technically pass.

Note: if the social media icons didn’t pass the test, but had associated text labels that did, it would still count.

The results for the first text sample. — This text/background combo can look kind of “dim”, but passes all tests

The light gray text on the dark blue background did even better, passing all tests with a ratio of 9.99 to 1.

CAPTION: I blame this failed test on people badly copying early 2000s Apple ads

The text in the “Our Services” section failed across the board, as I suspected it would. That light-ish gray on white has a contrast ratio of 2.74 to 1, which is just not enough.

The results of the text in the Our Services section — Testing hover states is required by WCAG.

Incidentally, you also need to test what the contrast is like for elements in their “hover states” like the box with the background image above.

A screenshot of some gray text on a dark photo background — Turns out that medium-gray on dark grey (or an equivalent hue) won’t pass the test

That text also failed all the tests that mattered. 3.76 to 1 just isn’t enough for anything but large text and graphical elements.

Lastly, make sure to check your text link color contrast. This can be accomplished with the Link Contrast Checker from WebAIM. This tool will measure the regular body text to background ratio, but also the contrast ratio between hyperlink text and regular text… and the background again. You want them all to look sufficiently distinct.

The results of the text on image background test — Hyperlinks (especially in body text) should be underlined, or at least underlined in a hover state

Above are some examples of hyperlink text on my test site.

A screenshot of some text and links on my test site — This is not a situation where “2 out of 3” counts

The test results show that the contrast between the link text and body text is fine, as is the ratio of body text to background. But, at a ratio of 2.84 to 1, the hyperlink text is just a bit too light against the white background to pass.

And that’s that. You now know how to manually check your website’s colors to make sure that all people can read and use your website, as well as to conform to the WCAG 2.1 accessibility standard. Now you just have to go into your website’s code and use more appropriate colors, or…

Quick Solution To Make Your Website’s Color Scheme Accessible

Remember how I recommended accessWidget by accessiBe before? Well, again, it’s a great option. For example, if you’re not very technical but you’ve got a WordPress site with a premade theme, and you don’t know (or have time to figure out) how to get into all the various CSS files to make manual changes, accessWidget will do everything for you.

The link contrast checker results — Here’s the Dark Contrast mode in action on the Playmobil website.

In addition, visitors to your site with visual disabilities can use the accessWidget front-end features to adjust your site to their needs, and that includes the ability to choose one of several color contrast options.

accessWidget also offers tweaks for type styling, focusing on the important bits of a page, increasing compatibility with screen readers, and more. You can, again, install it on just about any kind of website (including Wix, Squarespace, WordPress, and custom-coded sites).

How to Check Your Website’s Overall Accessibility

If the tutorial above seemed like it would be a lot of work, what with copying and pasting colors for all sorts of different website elements, I don’t blame you. You can get results a bit faster with WebAIM’s WAVE tool, which will check your site’s color contrast, as well as let you know about any usability issues in the structure of your site, and other WCAG guideline errors.

accessiBe's color settings in action — The Web Accessibility Evaluation Tool (WAVE) by WebAIM in action

It’s not perfect, though, and will occasionally bring up errors in cases where they might not really apply. That’s why I taught you the manual methods above: for those times when you need to be sure.

Or, you may want to try accessWidget’s free trial to resolve these issues quickly and automatically.

Try accessWidget For Free >>

Conclusion

Meeting the WCAG 2.1 guidelines for color contrast doesn’t have to be overly complicated. Developing an inclusive, accessible design and sticking to it in the first place will save you a lot of trouble, and WebAIM’s tools can help you find potential problems on existing sites. It takes some work, but it’s worth it.

However, if you’re looking for an easier solution to help your website reach WCAG compliance, accessWidget by accessiBe can implement a lot of handy accessibility features with minimal fuss. (On WordPress, it’s just a couple of clicks to install the plugin.)

FAQ

How do I make my WordPress site accessible?
By building your own theme from scratch and doing it right. Okay, that’s not feasible for everybody, but you can do a lot to make free and premium themes more accessible with the right tools. We have a whole guide to the best accessibility plugins for WordPress. Start there, and do a little reading on accessibility in general while you’re at it.

Can I make my Wix or Squarespace websites ADA compliant?
Websites built with the two most popular website builders aren’t, unfortunately, always ADA compliant right out of the box. But both Wix and Squarespace sites can be made compliant by applying a few useful tricks. Here’s our guide to Wix accessibility, and our guide to Squarespace accessibility to get you started.

Can accessWidget fix the contrast on my website?
accessWidget by accessiBe does have quite a few tools for helping to deal with color contrast issues, including the ability to: change colors sitewide, apply a high contrast mode, apply a dark contrast mode, reduce or add color saturation, and a whole lot more. We tested this plugin – read about everything that accessWidget can do in our review.

Where can I start learning to build accessible websites?
There are a number of fantastic resources for this, including the W3C, WebAIM, Mozilla’s MDN Web Docs, and more. Building accessible websites mostly involves keeping accessibility in mind from the moment you start building your website. However – if you don’t know much about building websites at all yet, check out our guide to building your first website.