Table of Contents
Have you ever had your eyes dilated after visiting the eye doctor? If you have, then you probably know that reading can be extremely difficult through your dilated pupils and light-sensitive vision. While for you it’s just a once-a-year inconvenience, for some people that is the way they see every day. Helping them out by making your website comply with WCAG 2.0 guidelines means you’ll make their days a bit simpler and allow them to interact with your website much more easily.
There are a lot of modifications and accommodations you can make to help your website follow the WCAG 2.0 rules, and you’re probably wondering where to start. One of the quickest ways you can start getting your website up to code is to check the color contrast to ensure that it’s accessible for people who are visually impaired.
While some WCAG 2.0 rules are a bit vague, this one is extremely clear. The contrast rules state, “Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1…” Now there are some caveats to that, but knowing your baseline is important in this situation.
However, if you aren’t a web designer then you might now be wondering what any of this even means. If you want to learn a bit more about contrast ratios, that’s great! Check the end of this post for a recommendation on a helpful article that will help you to learn more. If you don’t want to know the details but you want your site to comply, then you’re in luck. There are some helpful websites that will check and see what your ratio is without you needing to get into the complex web design nuances. Here are three sites that can help you out:
We have a contrast checker and we think you should check it out! It’ll help you figure out if your site is WCAG compliant without any hassle. If you’re suspicious that your site’s color contrasting might be an issue, then you can simply select a foreground color and background color and get your results immediately. Want to pass your ratios to your team? You can easily email the results to yourself, your designer, webmaster, or your development team. If you don’t want to change your site after you get your ratios back, you can also install the UserWay widget so users can change the contrast themselves.
Why you should use it: It’s fast, simple, and gives you the information you need!
This wonderful tool has you type in the RGB hexadecimal codes for both the foreground and background colors your website uses. It’ll not only give you a very clear contrast ratio, but also help you to lighten or darken the colors if your ratio doesn’t meet the minimum standards. They also include a great explanation of the ratio and point you to some even more helpful online tools.
Why you should use it: You’ll get clear reading of your ratios, and an explanation of how to fix them if they don’t meet the WCAG standard.
While this site has fewer features than the first suggestion, the Contrast Checker runs on the same basic principle. You need to type in your RGB hexadecimal codes and it’ll tell you if your contrast ratio passes or fails to meet the WCAG 2.0 minimum standards. A helpful addition to this tool is the Colorblind Checker. Once you’ve put in your codes and gotten a ratio, you will be able to convert it to grayscale. This will show you how a color blind user would see your site, and you can decide from there if it’s too tough to read.
Why you should use it: You get your contrast ratio plus a helpful snapshot of how users who are colorblind perceive your site.
This handy plugin gets excellent reviews and has nearly 5,000 users. I’d tell you about it myself, but I think the developer description pretty much sums it up, “Checks for compliance with the contrast levels, brightness and shine in the color combination of foreground and background of textual content based on the requirements of WCAG 1 and WCAG 2.” The only downside? It’s only made for FireFox, so if you’re not currently running that browser you’ll need to download it.
Why you should use it: It’s a plugin so you won’t need to seek out your RGB hexadecimal codes and put them into a separate website to check the ratios.
It’s important to mention that these stand-alone contrast checkers don’t provide much other information. If you want a comprehensive report that will help you increase your site’s accessibility, there are plenty of sites that will give you both paid and free reports. Here’s a list of some of the most helpful accessibility compliance checkers we’ve found and why you should consider using them.
Looking for more details to make your website contrast compliant? Well kudos to you, and I highly recommend Cathy O’Connor’s detailed report in Smashing Magazine on how contrast and visual impairments can impact people’s perceptions of websites and apps. O’Connor gives you great tips on how to make sure you understand what other people are seeing, and why it’s important to help make your website more accessible.
Have you found a go-to contrast checker? Let us know what you use and some of the worst color combinations you’ve stumbled on around the web in the comments below!