Color plays an important role on websites relaying a specific mood and theme to the user. Red can emphasize passion and activity; blue, calmness and trust; and so on. But when creating a color palette for your website, do you only consider the colors that match your branding or design? Many people often overlook the importance of color contrast and the role it plays in ADA website compliance.
Contrast, specifically for the web, refers to the distinction between foreground text color and the background color. For normal-sighted users, contrast does not typically pose an issue. But for users with a visual impairment, poor contrast is disruptive and can leave your users unable to access your website’s content.
Website accessibility has become a larger focus of discussion the past several years. With new legislation on the horizon, websites – especially those offering public services such as stores, hospitals, banks, and schools – will be held to higher standards regarding website accessibility. An inaccessible website opens up the possibility of litigation down the road if non-compliance to current (and new) standards can be proven. Now is the time to be proactive and consider how users with disabilities are interacting with your website.
Being proactive about ADA website compliance during the development of a website will yield many other benefits beyond opening up your website to a wider variety of users.
- SEO – If your website is accessibility-friendly, it will generally be SEO-friendly. Accessibility and SEO are often intertwined as the best-practices between both tend to benefit each other.
- Protection from future litigation – In 2017 alone, the number of accessibility-related lawsuits has been more than 2015 & 2016 combined. Addressing website accessibility from the beginning of development will decrease the likelihood of future legal issues.
- Goodwill with your community – Few websites are built with accessibility in mind, so those with that functionality built-in stand out among their peers.
This is the second article in our four-part, ADA Compliance series. Discover the other articles in our series:
- Part One: The Importance of Having an ADA Compliant Website (read here)
- Part Two: ADA Website Compliance & How Color Impacts Your Website’s Accessibility
- Part Three: WCAG Compliance & Rethinking the Carousel Trend (read here)
- Part Four: Website Accessibility Test … Is Your Website Navigable Without a Mouse? (read here)
The recommended color standard for ADA website compliance
The Web Content Accessibility Guideline (WCAG) requires website color contrast to have a ratio of 4.5:1 for standard font-sized text (14px-20px). It’s also required to meet Priority 2 (Level AA) compliance. This ratio establishes a base by which users with low vision or impairment should better distinguish between foreground text and background colors. Depending on your user base, this ratio may not even be enough.
Priority 2 compliance has become the accessibility standard for all federal websites, and will likely become the industry standard moving forward in the coming years.
Prevalence of visual impairments
According to the World Health Organization, an estimated 253 million people live with vision impairment, including age-related macular degeneration, cataracts, color blindness, and many others. With so many people suffering from some form of visual impairment, it’s likely someone with a vision impairment will access your website.
Color blindness
According to Color Blind Awareness, 1 in 12 men and 1 in 200 women, possess some form of color blindness. If portions of your website rely on color alone to communicate an action or information to your user, you risk creating a situation where a visitor with color blindness may not understand what action is being conveyed.
For example, if a visitor has trouble distinguishing between reds and greens designing a form to indicate it was not submitted successfully by only changing the button to a shade of red would not communicate the error to a color-blind user.
Additional gestures need to be provided so users have multiple ways of inferring form submission errors. Diversifying communication with varying actions and prevents dependency on one particular means of communication, and in this case an additional message alerting the user to the error with the form would prevent confusion.
How we can help
If you are worried about your website’s color contrast, there are a number of online tools available online for free, such as this evaluator offered by WebAIM.
Want to learn more about color contrast and ADA website compliance? Let our team of talented designers help you. Give us a call at 478-621-4491 or email us to learn more.