A good and reliable Web Accessibility Contrast Checker is a very important tool in my accessibility toolbox. A contrast checker is one of the goto tools I use when I am running an accessibility audit or if I'm designing a website. The good news is that there are a ton of contrast ratio checkers available that are completely free without you having to download anything.
Here is a completely free contrast ratio checker that I used myself for a long time while I was doing accessibility audits.
The only reason I don't use this contrast ratio checker anymore is that use a version of it inside an accessibility plugin available on the WordPress repository that is completely free. But, if I wasn't using that plugin already I would be using the contrast checker I recommended.
Disclaimer: I have absolutely nothing to do with this contrast checker, website, or company and I get nothing from this recommendation, it is just a good contrast checker and one that I have used time and time again. Also, I am not mentioning the plugin I use because this article is about the free contrast ratio checker.
Here is the actual WCAG 2.1 guideline that explains what the contrast ratio minimums are and exactly what it takes to be compliant.
Success Criterion 1.4.3 Contrast (Minimum) Level AA
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
-
Large Text
- Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
-
Incidental
- Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
-
Logotypes
- Text that is part of a logo or brand name has no contrast requirement.
Remember that if you design with these guidelines in mind you won't have to go back and remediate your website later and we all know it's much more expensive to go back and fix an issue instead of just design it that way. The contrast ratios between the backgrounds and the text is a fundamental design issue and are very important to your ADA Section 508 compliance.
One of the most common contrast ratio failures I see during accessibility audits is text links. I see so many websites that have 100's or 1000's of text links that are light blue and just under the minimum contrast ratio that is 3 to 1. Luckily though, there is a very easy fix and that is to just pick a darker blue for your text link. The color I recommend is #0062cc
I hope this has helped you in your process of becoming Section 508 or WCAG 2.1 compliant. It is up to us to make the internet accessible to everyone.