Accessibility is not just a buzzword – it’s a legal requirement. The Americans with Disabilities Act (ADA) mandates that digital content, including websites and apps, must be accessible to people with disabilities. This means creating designs that are inclusive, user-friendly, and free from barriers.
Color blindness, affecting over 350 million people worldwide, is classified as a disability under the ADA. For online users with visual impairments, color contrast plays a huge role in readability and usability. Poor color choices can make it difficult or even impossible for them to navigate and understand digital content.
In this guide, we’ll teach you the importance of color contrast and what colors to avoid for ADA compliance.
What is a Color Contrast Ratio?
Have you ever wondered why some websites are easier on the eyes than others? Well, it’s all about color contrast.
A color contrast ratio measures the difference between the lightness and darkness of two colors, typically between text and its background. The higher the contrast, the easier it is to see.
The Color Contrast Ratio is measured as a ratio ranging from 1:1 to 21:1. A ratio of 1.1 means there’s no contrast, such as white text on a white background, while the latter would be maximum contrast (black text on a white background).
The Web Content Accessibility Guidelines (WCAG) 2.1 have specific guidelines for color contrast ratios. These guidelines ensure that text and images are readable for people with visual impairments, such as those with color blindness. The color contrast ratio is measured with this formula.
Contrast Ratio = (L2+0.05) / (L1+0.05)
L1 is the relative luminance of the lighter color, and L2 is the darker color.
In this case, relative luminance is the brightness of a color normalized to values between 0 (black) and 1 (white).
Minimum Contrast Ratios Required by WCAG
You can ensure readability and accessibility by following the WCAG 2.1 guidelines for minimum contrast ratios for different types of text and images. Here’s a quick breakdown:
- Normal Text and Images: Standard text and images must have a contrast ratio of at least 4.5:1. This ensures that the text is easily distinguishable from the background.
- Large Text and Images: Larger text (at least 14-point font size or 18-point bold) can have a slightly lower contrast ratio of 3:1.
- Text That is Incidental to the Content: Text that is purely decorative or provides minimal meaning, such as logos or icons, can have a lower contrast ratio of 3:1.
- Graphical Objects and Symbols: Similar to incidental text, graphical objects and symbols can have a contrast ratio of 3:1. However, they must be distinguishable from the background and adjacent content.
What Colors to Avoid For ADA Compliance
Choosing the right color palette is often the first step in creating accessible designs. Certain color combinations can make your website a lot less readable and usable, especially for those with visual impairments. Let’s look at what colors to avoid for ADA compliance.
Low-Contrast Color Combinations
One of the most common mistakes in design is using low-contrast color combinations. This occurs when the foreground color (text or image) and the background color are too similar in lightness and darkness.
Shockingly, a study by WAVE found that 84% of popular homepages feature low-contrast text. It’s clear that most websites are far from accessible, but you don’t have to be part of the issue. Here’s what you need to avoid to make your website readable for everyone.
Light Text on Light Backgrounds
Using light-colored text on a light-colored background can make it extremely difficult to read. This is especially problematic for users with visual impairments, as the low contrast can strain their eyes and make the text appear blurry or invisible.
Here are some examples of problematic color combinations you should avoid:
- White text on a light gray background
- Pale yellow text on a cream background
- Light blue text on a light green background
Dark Text on Dark Backgrounds
Similarly, using dark-colored text on a dark-colored background can also lead to poor readability. While this combination may look visually appealing, it can be hard for users to discern the text, especially in low-light conditions.
Here are some examples of problematic color combinations:
- Black text on a dark gray background
- Dark blue text on a navy blue background
- Dark green text on a black background
Similar Hues
Choosing colors that are similar in hue can also create accessibility issues. When colors are too close in hue, it gets hard to distinguish between them. This is especially true for people with color vision deficiencies, which affect 8% of males and 1% of females.
Here are some examples of problematic color combinations:
- Red and orange
- Green and blue
- Purple and pink
Of course, if you don’t want to keep track of a list of no-go colors whenever you edit your website, we get it. You can simply use a contrast checker to make sure the content is ADA-compliant.
Color Blindness and Color Contrast
Color blindness affects how people perceive colorst. According to ADA, it counts as a disability if it limits one or more aspects of a person’s life. That’s why you must consider color blindness when designing digital products to make sure they’re accessible to everyone.
Before you do that, know that there’s no one-size-fits-all solution for colorblind users. There are several types of color blindness, but the most common are:
- Protanopia: Difficulty distinguishing between red and green colors. It affects 0.51% of the general population but is more common in males.
- Deuteranopia: Similar to protanopia, but with a less severe impact on color perception. It affects about 0.64% of the population.
- Tritanopia: Difficulty distinguishing between blue and yellow colors. It affects 0.01% of the population and results from a deficiency in blue cone photoreceptors.
To fix your website’s accessibility issues at its core, you need to understand how color blindness affects a user’s perfection of your website.
Firstly, people with color blindness often struggle to differentiate between colors that are too similar in hue. For example, someone with protanopia might have trouble distinguishing between red and green. Meanwhile, someone with tritanopia might have difficulty differentiating between blue and yellow.
If you want to mitigate the impact of color blindness, the key is to use color in conjunction with other visual cues, like shape, texture, and pattern. When you combine multiple elements, you can create designs that are understandable to all kinds of users.Here are some more tips for designing your website for color-blind users:
- Use color strategically. Yes, different colors have their own visual appeal, but it’s still important to use them strategically. Don’t rely solely on the colors to convey information.
- Rely on other visual cues. In addition to color, you can also use other visual cues, such as shape, texture, and pattern, to differentiate between elements. For example, different shapes for buttons or icons can help users distinguish between them and the background.
- Test your designs with color-blind users. It’s a no-brainer – the best way to make sure your designs are accessible to color-blind users is to test them with real people. You can use different online tools or conduct in-person usability tests to gather feedback. You could also find a website accessibility checker that has this feature built-in.
Tools and Techniques for Ensuring Color Contrast
The good news is that you have access to tons of tools and techniques to create more accessible color schemes. Most of these are free, which means your designs can meet WCAG guidelines and be inclusive for all users at no cost.
Color Contrast Checkers
We highly recommend using color contrast checkers to measure the color contrast ratio between text and background colors. These online tools give you instant feedback and help you identify areas where contrast may be insufficient. Here’s how you use a color contrast checker:
- Enter the hex codes for the foreground and background colors.
- The tool will calculate the website’s contrast ratio and display the result.
- If the contrast ratio is too low, adjust the colors until it meets the WCAG requirements.
Color Palette Generators
Color palette generators are designed to help designers come up with unique, harmonious, and accessible color palettes. These tools often include filters for color blindness and contrast ratios, making it easy to select colors that meet accessibility standards. Here’s how you use a color palette generator:
- Select a primary color for your design.
- The tool will generate a range of color variations based on the base color.
- Use the accessibility filters to select colors that meet WCAG contrast requirements.
CSS Techniques for Improving Contrast
If you don’t feel like adding all these tools to your workload, you don’t have to. You can ensure compliance with only CSS, too. CSS offers many different techniques for improving color contrast:
- Adjusting text color and background color: You can use CSS to change the color of text and background elements to increase contrast.
- Modifying font-weight: Increasing the font weight of text can improve readability, especially for low-contrast combinations.
- Applying CSS filters: You can use CSS filters to adjust the brightness, contrast, and saturation of elements, making them more visible.
Case Studies of Poor Color Contrast
To give you a better idea of what not to do when designing your website, let’s look at some case studies of poor color contrast online.
Example 1: University Websites with Low-Contrast Text
A recent study, the Higher Ed in 4k project, found a common accessibility issue in many university websites: low-contrast text. One particular website was found to have over 159 contrast errors, all thanks to a poorly designed template.
The culprit? A light blue link color (#5B8DAD) is set against a light gray background (#EEEDE8). This color combination resulted in a contrast ratio of 3.05:1, falling short of the WCAG’s required minimum of 4.5:1 for standard text.
As we mentioned, WCAG mandates specific contrast ratios to ensure readability for visually impaired or color blind users. In the case of the low-contrast link color, it also causes problems for those viewing the site in dim lighting. The subtle color difference can make the text difficult to discern and disrupt user experience.
Unfortunately, low-contrast text is not an isolated issue. The 2024 WebAIM Million report found that a vast majority of the top 1,000,000 homepages contained low-contrast text, with an average of 34.5 instances per homepage.
Many websites, especially those aiming for a minimalist aesthetic, often prioritize sleek design over readability. We all agree that clean and modern designs are appealing, but they’re one of the leading causes of online accessibility barriers. Designers who neglect color contrast risk excluding a big portion of their audience – users with visual impairments and those with aging eyes.
Example 2: Mobile Banking Apps with Inaccessible Color Choices
A major financial institution, in its attempt at a sleek and modern mobile banking app, overlooked a crucial aspect of design: accessibility. The app featured a color palette that was anything but user-friendly. Light gray text on a white background and dark blue buttons with similarly shaded text labels – unreadable for users with low vision or color blindness.
According to the WCAG, text should at least have a contrast ratio of 4.5:1 against its background for normal text. In this case, the app’s light gray text on a white background barely managed a contrast ratio of 2.5:1. According to a case study on the app, this oversight had serious consequences.
Users struggled to read essential information such as account balances, transaction details, and important notifications. Meanwhile, the low-contrast buttons blended seamlessly into the background, making it hard for users to identify actionable items.
As a result, the institution’s customer support team was flooded with calls from frustrated users who couldn’t navigate the app. This not only increased operational costs but also damaged the institution’s reputation.
After a round of accessibility testing, they found a plethora of issues in the app. For instance, automated testing tools found over 50 instances of low contrast across various screens of the app. They also conducted testing sessions with visually impaired users, who were overall dissatisfied with the app’s usability.
Once again, this isn’t just the case for one app or institution. In 2023, over 25% of digital lawsuits targeted companies for inaccessible mobile apps. Many mobile apps continue to prioritize aesthetics over usability, leaving millions of users with disabilities behind.
Ensuring ADA Compliance With Accessibility Spark
Now that you’ve read our guide, you know what colors to avoid for ADA compliance. The only thing left to do is find a tool that helps you stay ADA-compliant in a few simple steps. We’ve solved that problem for you, too.
Accessibility Spark is an app designed to maximize your website’s accessibility ratings. Using this tool, WCAG and ADA compliance is as simple as running your website through a checker. Here are some Accessibility Spark features that will help you ensure an ideal color contrast.
WCAG Color Contrast Checker
This tool allows designers and developers to input foreground and background colors to calculate their contrast ratio. It helps determine if the color combinations on your website meet the required ratios of 4.5:1 for normal text and at least 3:1 for large text.
Automated Scanning
Accessibility Spark can automatically scan your website to quickly identify any color contrast issues you may be able to fix. Once you’ve pinpointed the specific elements that do not meet accessibility standards, the website redesign will be much easier.
Real-Time Feedback
The tool offers live feedback on color choices, telling you whether the selected colors pass or fail the contrast requirements. When you get immediate feedback on such issues, it’s a lot easier to make more informed decisions about your website’s design.
Color Blindness Simulation
Accessibility Spark has features that simulate how colors are perceived by users with different types of color blindness. As we mentioned, color perception isn’t the same for all colorblind people. This feature helps you choose color palettes that are inclusive and accessible to all users, not just those with typical vision.
Guidance on Best Practices
The platform even gives you recommendations on best practices for selecting accessible colors. For instance, you may get suggestions for high-contrast combinations and alternatives for problematic color pairings.
Integration with Design Workflows
Accessibility Spark can be integrated into existing design workflows. This means your teams can continuously monitor and maintain color contrast standards as part of their development process without migrating all their data.
Design for Everyone, Every Time With Accessibility Spark
In a world where aesthetics are the first priority, it can be easy to overlook the importance of accessibility. Poor color choices can make it nearly impossible for colorblind or visually impaired users to navigate your digital content.
With tools like Accessibility Spark, you can ensure that your designs are inclusive and user-friendly for everyone. Try Accessibility Spark today and tick off your ADA compliance checklist.