ADA Compliant Colors – Helpful Guidelines and Tools

Picking out colors is one of the most important parts of the web design process. What colors evoke professionalism? Which are soothing for visitors? What color scheme will best match the logo a business already has? But there’s another vital aspect to web color choices – accessibility for those with visual impairments.

Color accessibility depends on the proper contrast, avoiding certain mixes of colors, and generally being aware of any color options that could cause a problem for individuals with visual disabilities. This is required for ADA compliance: Let’s look at what that means, and what guidelines websites should be following for their color schemes.

What Does it Mean to be ADA Compliant?

ADA refers to the Americans with Disabilities Act: This Act, first passed in 1990, was a civil rights law that required services be accessible to individuals with disabilities, and generally avoid any kind of discrimination related to disabilities. The ADA specifically focuses on public life, but this covers so many different types of businesses and services that it generally applies to any business serving customers in the United States.

The ADA is divided into several sections or “Titles” that apply to specific entities or situations. Private businesses are primarily covered under the “public accommodation” section in Title III. Other Titles focus on employment, government services, and so on. Public accommodations refer to businesses like retail, hotels, restaurants, healthcare, venues for all kinds of entertainment, and more.

The ADA provides clear guidelines for how commercial buildings and similar areas should be accessible to those with disabilities – within reason. Over time many new technologies were adopted by American businesses, and websites became a common part of business services. Updates and rulings clarified that the ADA also applies to websites like these. An important update in 2008 also extended the definition of “disability” to cover a broader number of cases and a new understanding of the modern challenges facing individuals with disabilities.

All that said, is the ADA important for your business? Absolutely. American businesses are covered under public accommodations in Title III, and that also applies to websites. Companies, especially in recent years, have been taken to court and successfully sued for websites that do not meet ADA requirements, regardless of if they were aware of these requirements or not.

Why Is This Important for Colors Specifically?

Color may not be the first thing that comes to mind when considering website accessibility. However, there are a number of disabilities and visual impairments that make color choices affect a site’s ease of use. This is particularly important when it comes to choosing font and background colors, but applies to all color choices throughout website design.

Colorblindness and other conditions, for example, can make it difficult for some individuals to tell certain colors apart. That could make some colors of text difficult or impossible to read, or obscure important buttons that a website uses.

Some individuals also have conditions that make it difficult for them to distinguish low-contrast objects in general. Here, contrast refers specifically to the difference in brightness between two colors – how much lighter or darker one is than the other, no matter what the colors themselves are. This is another disability that can make fonts very difficult to read if they are not clearly distinguished from their background. It can also make low-contrast menus impossible to navigate.

Others with low visual acuity or similar conditions may not be able to read or use websites that are too “busy,” with lots of different colors and shapes, or complex images that could otherwise be simplified and made easier to understand.

As a side benefit, many of the changes that businesses may make to their websites to improve color-related accessibility also makes those sites more usable for everyone. In many cases businesses may fix problems with readability or navigation that may not have even been on the radar. That helps increase lead retention and improve website traffic indicators overall.

Tips on Choosing ADA-Compliant Colors for Your Website

Specific strategies regarding color will naturally depend on your color scheme and website design. The WCAG 2.1 (Web Content Accessibility Guidelines) provides additional details on how to ensure website accessibility and are frequently consulted by both web developers and lawmakers. But since the WCAG is large and a fairly technical read, let’s distill compliance down to several important choices:

Incorporate accessibility when choosing a color scheme:

Don’t pick a finalized color scheme without considering ADA compliance. When businesses are considering readability, contrast, etc., from the very beginning, they can choose a series of colors that meets all needs. But if a color scheme has already been chosen before accessibility concerns, it could be much more difficult to incorporate accessibility afterwards. This is why older websites may need a full color scheme update to comply. There are tools that can help teams pick out the best color schemes, and we’ll discuss a few of them below.

Choose high contrast for all text:

When choosing text and background colors, pick the right contrast ratio. The WCAG 2.1’s minimum standard for contrast is that small text should have a contrast ratio of 4:5:1 or higher, and large text should have a ratio of 3:1 or higher. In most situations, it’s a good idea to aim significantly higher than this. Higher contrast ratios will also help people trying to read on mobile devices, etc. This applies to all text on the site, from blogs to menus. Oh, and pick clear, well-spaced fonts to help improve clarity even further!

Avoid color as the only indicator:

Websites sometimes use color or changing colors as an indicator. That could mean switching a button to a different color after it has been pressed, or shifting the color of a menu to show how different pages are categorized. Whenever color is used as an indicator, there should also be an additional indicator for people who can’t perceive color changes. That could be a change to the text itself, a small pop-up, and so on.

Stay away from common colorblind combinations:

There are several types of colorblindness. Two of the most common are deuteranopia and protanopia, where eyes are missing certain kinds of cones responsible for identifying parts of the light spectrum. This makes certain colors harder to differentiate or recognize, especially when close together. That’s why websites should generally avoid color pairings that could affect colorblind users. This includes red and green, blue and purple, pink and gray, and so on.

Pay attention to links and anchor text:

Anchor text that includes a clickable link is usually identified by being a different color than the rest of the text. As we mentioned, it’s also important to use another indicator, which is why anchor text is usually bolded and underlined, too. After a link has been selected, it typically changes color to show that it has already been used. This color change should be clear relative to the previous color.

Don’t be afraid to rethink your logo:

Sometimes brands run into a problem where they intend their website color scheme to match the colors of their logo – but their logo includes colors with poor contrast or other issues. If this happens, it’s all right to think about a new logo entirely. Choosing colors with better contrast for your logo will make picking a matching website scheme easier and make your logo more memorable. It’s also an opportunity to design a logo that’s easy to use in an email, social media profile, etc.

Be careful with high contrast modes:

Websites can also opt to provide a high-contrast mode for the site, which acts like a filter that switches all colors to high contrast options or changes the site to a black and white version. This is a possibility, but it’s generally better to choose a color scheme with natural high contrast in the first place. If the contrast is bumped up too high for text, it could create other issues: Users with dyslexia, for example, can find extra-high contrast confusing when working to read text.

When in doubt, black text on a white background remains a safe choice.

It’s simple and avoids most color-related text issues.

Tools to Help You Pick the Right Colors for Accessibility

There are numerous color tools online, and it’s an excellent idea to use them when choosing a color scheme for your website. They can help you (or your graphic designer) pick the right matching colors, and many have automatic checks for contrast and other accessibility considerations. Here are a few we have found worth trying:

• WebAIM Contrast Checker: This is a simple tool that’s used to compare foreground and background colors. It won’t help you pick an entire color scheme for a website, but it’s very easy to use and perfect for choosing text and background colors for readability, with immediate examples of how colors will look and what contrast ratio two colors yield.
• Tanaguru Contrast Finder: If you aren’t sure what specific colors you want but are open to ideas, this Tanaguru tool is excellent for brainstorming. Select a foreground and background color and pick a minimum contrast ratio: Then the tool can give you compliant colors close to your picks, or a range of colors in the same general spectrum that are good for contrast.
• Color Cube: This tool allows you to enter multiple colors from a color scheme, and then analyzes them according to WCAG compliance for color accessibility. It provides examples of text contrast using the colors and identifies which pairings can meet accessibility standards. This is useful if you have a working color scheme or palette with good contrast potential but want specific advice on which colors will work best for text.
• Color Safe: Color Safe uses WCAG Guidelines to generate potential color choices that have compliant contrast with a chosen color. This can be very useful when building new color schemes for a website, especially when starting with specific colors from a logo or other design choices.
• Coolors: Generate color palettes or find the perfect color palette by searching color, style, or hex values. Searching by hex value is especially helpful when working with a specified brand color. Their color palette tool also lets you mimic how people with different types of color blindness view the colors on your site.

Note that graphic designers will have more complex tools they can use to develop palettes, but online tools like these are a great starting place. They allow businesses to find potential colors they like without worrying about contrast issues or similar problems.

Will Your Website Need a Redesign for ADA Compliance?

This depends on other factors, such as the age of your site and how ADA-compliant it is in other ways. In general, updating the color scheme doesn’t require a full site redesign, but it is a useful time to consider making other changes.

If your site may need to focus more on ADA compliance and accessibility, let Blue Atlas Marketing know! We use the latest auditing tools and experienced developers to analyze websites of all kinds for important accessibility metrics. Then we can help your business put together a plan to update or change your website based on your goals.