Being able to easily read or perceive content is inarguably an important part of browsing the web. And having an easy to read color scheme is great accommodation to make for all of your users. After all, for some users, sites without these accessibility considerations will be completely unusable. In the US, approximately 12 million people over the age of 40 have vision impairment. That’s a lot of people!
Color contrast accessibility is a larger concept than just the color scheme of your page. It also extends to elements on your page such as buttons and highlighted items. It’s important that anyone interacting with your site can understand the purpose and state of these elements. Imagine how frustrating it would be to click a button on a website and have no way of knowing whether anything happened or not.
How do I know if my color contrast is accessible?
Color contrast guidelines are outlined by the WCAG 2.0. There are different standards for A, AA, and AAA compliance. There isn’t an official color contrast standard for ADA compliance in place for the web yet. However, WCAG 2.0AA is the standard we’ve seen most referenced in web accessibility lawsuits thus far.
Fortunately, there are lots of tools that you can use to test against this standard. WAVE by WebAIM is a great tool for testing an existing site. It also tests other WCAG standards and returns the results in an easy-to-understand format.
Legal concerns aside, it really is in your best interest to ensure that you have an accessible web application or site. Proper accessibility means your site is easier for anyone to use. Accessible sites also appear higher up in internet searches. And color contrast best practices tend produce logos that are much easier to recognize from far away or in a smaller size, such as when used as a mobile icon or web favicon.