Is the text on your website ADA accessible? Part one: Color.

The Americans with Disabilities Act (ADA) has changed the lives of countless Americans by prohibiting discrimination against individuals with disabilities. But while the more prominent protections focus on employment nondiscrimination and building access, the ADA also has major implications for websites and other digital design.

It’s important for businesses and organizations of all kinds to understand and meet these standards. But it’s especially crucial for the fields of finance, healthcare, education, and certainly government. And while the ADA guidelines can seem overwhelming at first, in reality they simply prescribe, in specific ways, a thoughtful, clean design that prioritizes all users’ experience.

The standards

The ADA focuses on four general principles that provide a road map for designers and developers working toward ADA accessibility: Websites must be perceivable, operable, understandable, and robust. These may seem like simplistic goals, but for people with visual, hearing, or physical challenges, these essential elements are often compromised, unintentionally, by everyday design choices.

Each of those principles is supported by 12 specific, actionable design and usability recommendations. Conformance to these recommendations is rated on a scale from Level A to AA and finally AAA. Level A recognizes that the design meets a basic minimum standard for the given guideline and level AAA indicates an ideal solution for the given guideline. (Level AA is, obviously, a midpoint between the two.)

ADA accessibility isn’t enforced by the government, per se. Unlike the case of GDPR in Europe, the government doesn’t mandate that companies and organizations update their designs to follow the standards. Instead, compliance is often enforced through lawsuits brought by private parties on the grounds that a company’s web experience is not ADA accessible.

This is all quite a bit to digest, and there are numerous resources offering detailed explanations of the guidelines and their respective criteria for the conformance levels. But for the purposes of this article let’s focus on three general guidelines related to text.

How to use color to make your website ADA accessible

Designers have long used color to establish hierarchy and differentiation on a page, but doing so can impact readability for people with visual challenges, namely color blindness. The ADA stipulates that color should “not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

In other words, color alone should not be used to indicate important phrases within text, to distinguish instructions or calls to action, or to indicate when an action has been completed (clicking a button for example). 

Instead, designers should solve these issues by tactfully using a range of weights, sizes, and styles to indicate headings, instructions, and calls-to-action. The Harvard Medical School website is a good example of this principle in practice. A single, versatile font family can provide all the variety you need, but designers can approach these use cases by using different fonts for different purposes.

And to be clear, this can all be done in addition to using color. The ADA guideline simply says color can’t be the only distinguishing characteristic of a piece of text.

“Back in the day, we used color to show hierarchy,” says Marc Rust, Senior Creative Director at Boston Interactive. “Now we use font size, rather than color, to maintain readability and ensure ADA accessibility. Font choice matters more than ever to make the design work.”

Check back soon for more of this series, which will outline how text contrast and the use of live text factor into creating an accessible website. Not sure if your digital properties are ADA accessible? We can help.