When starting a business, we rarely think about the impact our brand colors will have further down the line. But indeed, selecting the right palette might just be one of the most important decisions you make. Choose the wrong colors, and you could end up alienating a large portion of your customer base, particularly those with visual impairments. Ensuring your colors comply with the Americans with Disabilities Act (ADA) prevents this, not only making your site more inclusive, but more usable by everyone, too.
Want to know how to get started? Let’s dive into what ADA-compliant colors mean for your website and how to select them.
What is ADA and Who Does it Apply to?
The Americans with Disabilities Act (ADA) was introduced in 1990 with the aim of ousting disability-based discrimination, particularly when it comes to them seeking employment or attempting to access goods and services. You might have heard about ADA in the context of physical spaces — think ramps, elevators, and accessible bathrooms — but ADA regulations extend to the digital world too, including websites.
Under Title III of the ADA, any business or organization considered a place of “public accommodation” must ensure their products and services, both physical and digital, are accessible to those with disabilities. What does this mean exactly? It means that any organization which sells its products or services to members of the public must comply with ADA requirements. This applies to just about every business in the modern world.
Free ADA Compliance Check of your Website
Detecting ADA compliance issues has never been easier than it is now. At Recite Me we offer a free automated scan of your websites homepage. This will identify and highlight any non-compliance on your website, including color contrast checks. Followed by recommendations on how to implement the necessary changes to improve your websites accessibility score and standing.
The Importance of choosing ADA-Compliant Colors
So where do colors fit into all this? Well, color accessibility is one of the most critical elements of creating an ADA-compliant website design. Poor color choices can make it impossible for people with visual impairments to navigate your site, read text, or understand important content.
Imagine you arrive at a website, eager to check out their products and services before purchasing. Frustratingly, you are greeted with a pale gray background and light yellow text, making it very difficult to consume the website’s content. Squinting, you try to read the text, but after a few seconds of struggling, you eventually give up and head to a competitor’s site instead, going from potential customer to lost customer in a brief moment. Extrapolate this across the number of unique website visits you get, and you will soon see the impact it could have on your organization’s bottom line.
But accessible color contrast isn’t just for people with visual impairments; it can improve the user experience for everyone. This is because strong contrast makes it easier for users of all abilities to read and navigate your site, particularly in bright light or on small screens. For example, if you have a website with a white background and pale gray text, someone with perfect vision may still struggle to read it on their phone outdoors.
The Role of WCAG in Choosing ADA-Compliant Colors
The Web Content Accessibility Guidelines (WCAG) are a series of global online accessibility standards set out by the World Wide Web Consortium (W3C). The WCAG is often referenced as the standards that websites should meet in order to be considered ADA-compliant.
This means that in order to know how to choose ADA-compliant website colors, we must first turn to the WCAG. WCAG 2.2 is the current and latest version released, with WCAG 3.0 arriving soon, however, companies are, and will continue to be, held to WCAG 2.1 standards.
Understanding Color Contrast Ratios
When referring to color accessibility, the WCAG references contrast ratios, therefore it is important to know how these ratios work. Put simply, the greater the number, the higher the contrast. For example, on one end of the scale, you have black text and a white background with a contrast ratio of approximately 21:1. On the other end of the scale, you might have yellow text on a white background, giving a contrast ratio of about 1.07:1.
Success Criteria for WCAG and ADA compliance
Now that you’re aware of how contrast ratios work, let’s take a look at which ratios you should be implementing to make your website ADA-compliant. The WCAG outlines three different levels of conformance, ranging from A to AAA — A being the lowest level of conformance and AAA being the highest. When it comes to website colors, these are as follows:
- Level A: Level A conformance requires that colors are not used as the only visual means of conveying information. For example, to indicate an action or to prompt a response, the color red should be used alongside a text pop-up explaining what to do.
- Level AA: Level AA conformance states that normal-sized text and images should possess a minimum color contrast ratio of 4.5:1, while large text (headers of font size 18pt or 14pt bold) should have a ratio of at least 3:1.
- Level AAA: Level AAA conformance requires a significantly higher standard of color contrast — at least 7:1 for normal text and images, and 4.5:1 for large text.
To ensure ADA-compliance, businesses are typically required to achieve a minimum of Level AA conformance. For those who wish to go above and beyond, Level AAA conformance provides an enhanced extent of compliance, and is particularly recommended if your target audience is elderly or has low vision.
Even if your business is not required to comply with the ADA, aiming for at least Level AA conformance will help you avoid legal risks, engage a broader target audience, and maintain a loyal customer base.
How to Choose ADA-Compliant Colors for Your Website
There are a number of helpful tips and tricks that can set you up on the right road to ADA compliance. Let’s take a closer look at each of those in more detail:
1. Start With Your Brand Colors
Begin by evaluating your existing brand colors. While your palette may look great aesthetically, it might not meet accessibility standards. For instance, dark blue text on a navy background may seem stylish, but can be difficult to distinguish for many people with low vision.
While you might think it’s a huge task to change your existing brand colors, the small time investment now will save you a lot of headaches and financial pain in the future. So, instead, opt for lighter shades of text or darker backgrounds to improve contrast. Before locking in your new brand colors, be sure to verify that the contrast ratio meets WCAG Level AA conformance at the least.
2. Use a Contrast Checker
How do you verify whether your new brand colors are ADA-compliant? By using a contrast checker, of course. These tools scan your website, measuring the contrast ratio between your text and its background, flagging any sections deemed non-compliant.
As we know already, a minimum contrast ratio of 4.5:1 is recommended for small text. If you’re working with a color palette that doesn’t meet these standards, a quick scan, using a tool like Recite Me’s accessibility checker, will help you make the necessary tweaks and adjustments to get back on track.
3. Design for All Visual Impairments
Contrast ratio isn’t the only thing that matters when it comes to color accessibility. As well as low vision, there are millions of people with color blindness. Color blindness comes in all shapes and sizes, and can significantly affect how people perceive colors.
For example, red-green color blindness, the most common form, makes it difficult to differentiate between red and green. Therefore, it might be a good idea to avoid relying on red and green to indicate important actions (like “submit” buttons or alerts). Instead, consider alternative color pairings like blue and yellow, which are easier to distinguish.
4. Include Visual Cues Beyond Color
So, your brand colors are now on point. But what about the way in which your website conveys key information, such as error messages or hyperlinks.
Instead of relying solely on color to highlight the importance of a particular element, combine color with other features, such as appropriate punctuation, icons, or underlining. For example, underlining links or adding icons next to buttons helps users understand your content even if they can’t see the color difference. A red error message could also include an exclamation mark icon to make it clear that there’s an issue.
5. Test, Test, Test
Once you’ve decided on your brand’s color scheme, and catered for a broad range of visual impairments, it’s time to put your website’s color accessibility to the test. This means testing it under real-world conditions. Contrast checking tools can confirm compliance, but user testing is what will give you true insight into how your site functions for those with visual impairments.
So, allow visually impaired users to browse your site, testing it on different devices and in various lighting environments, before returning feedback to you. By implementing their feedback, you can go above and beyond mere compliance, making adjustments that will enhance the overall user experience of your site for disabled individuals across the board.
Get serious about ADA Compliance with Recite Me
Act today to ensure your website is accessible and compliant with the latest ADA Guidelines. Get started on your website accessibility strategy with any of the following action points:
- Contact our team for more advice about how you can make your organization ADA compliant.
- Find out more about the Recite Me Web Accessibility Checker, to fix ADA compliance issues at source.
- Schedule a free demonstration to learn how our technology can help you.
- Run a free ADA compliance scan of your website for WCAG 2.1 AA compliance.
- Check out our ADA compliance checklist.
