Skip to Content
a mockup design, color swatch booklet, and tablet are placed on a table next to a plant
Share This Post

This article was most recently updated in Nov. 2024

Accessibility has been a significant factor in web design for several years. Websites – especially those for entities offering public services such as stores, hospitals, banks, and schools – are now being held to higher standards regarding website accessibility.

An inaccessible website opens up the possibility of litigation if it can be proven that your site doesn’t comply with applicable standards. Whether you’re reviewing your existing site or planning a new one, you must consider how users with disabilities interact 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. While accessibility is still not recognized by most SEO authorities as a direct signal for Google, an accessible site will always have a generally better user experience than a non-accessible site. And UX is an enormous SEO signal.
  • Protection from future litigation– According to UsableNet, more than 4,000 state and federal suits were brought against non-accessible website operators in 2023 alone. And that number does not include the probably tens of thousands of “demand letters” sent to companies threatening legal action if steps were not taken to address site accessibility. Addressing website accessibility from the beginning of development will decrease the likelihood of future legal issues.
  • Goodwill with your community– Accessibility equals inclusiveness, and companies that offer a robust, accessible website will enjoy a better reputation than those that don’t.

Why Color Matters in Web Design and Web Accessibility

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.

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.

Contrast, specifically for the web, refers to the distinction between foreground text color and the background color. For users with normal eyesight, contrast does not typically pose an issue. But for users with a visual impairment, poor contrast is disruptive and can leave them unable to access your website’s content.

Color Contrast Guidelines

Is there enough difference between the color of your site’s background and the color of your site’s text to make it legible for someone with a low-vision condition such as cataracts or macular degeneration?

Consider these two samples of text:

This text/background combination has a low contrast ratio This text/background combination has a high contrast ratio

If you can’t easily read the box on the left, you’re not alone.

Color contrast is expressed as a ratio of the “perceived luminance” (lightness or darkness) of a pair of colors. White text on a white background has a ratio of 1:1, or the lowest ratio possible. Black text on a white background has a ratio of 21:1, or the highest ratio possible. The higher the contrast ratio, the easier it is to read the content.

The Web Content Accessibility Guideline (WCAG) requires website color contrast to have a ratio of 4.5:1.

What Does a 4.5:1 Contrast Ratio Look Like?

All of the below color options have a contrast ratio of almost exactly 4.5:1.

Gray on white Purple on white Blue on gray Red on yellow

Of the above, the gray on white and blue on gray options can still be a little hard to read for many members of the general public. When you’re choosing colors for your website, consider 4.5:1 to be an absolute minimum, but seriously think about giving your text/background combinations an even higher contrast ratio. A higher contrast ratio of 7:1 is recommended by WCAG for site designers looking to provide the highest level of compliance.

Are There Any Exceptions to the 4.5:1 Contrast Ratio?

There are a few exceptions to the WCAG contrast ratio guidelines:

  • Large text, defined as bold text 14 points or larger and regular text 18 points or larger, is required to have a 3:1 contrast ratio to its background.
  • Logos are not required to meet contrast guidelines.
  • Incidental text, which is defined as text that conveys no useful information to the reader, is exempt from contrast guidelines. Examples of incidental text might be a background with the company’s name used as a barely-visible repeating pattern or a photograph of someone reading a magazine – if the magazine cover is not important information in the photo, that text is not required to meet contrast guidelines.

These exceptions exist in the WCAG guidelines, but before exploiting the first two, keep in mind why you’re improving your website’s accessibility, and remember that improving legibility across your site will improve all of your users’ experiences. When faced with a color choice for content that conveys useful information, choosing a 4.5:1 or 7:1 ratio or higher is almost always the best bet.

Accessibility for 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 information to your user, you risk creating a situation where a visitor with color blindness may not understand what is being conveyed.

For example:

One of the most common variants of color blindness is red-green blindness; difficulty discerning between shades of red and shades of green – in the most extreme cases, both colors look yellow.

If you have a form on your site and use a button that changes color from red to green when the form is completed and ready to submit, that functionality will not be easily seen by someone with a red-green vision deficiency.

Additional signals need to be provided so users have multiple ways of determining when the form is ready to submit:

  • Button text that changes from “Not Ready to Submit” to “Ready to Submit”
  • A message that appears once the form is completed
  • Some other non-color-based visual cue to let the user know the form is ready

The Web Designers at M&R Marketing Are Color and ADA-Compliance Pros. Let Us Help Ensure Your Site Is Accessible.

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 talk about your sites’s color contrast and ADA compliance? Let our team of talented web designers help you. Give us a call at 478-621-4491 or email us at hey@mandr-group.com to learn more.

Never Miss an Article – Sign Up for Our Monthly eNewsletter!

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
  • Part Two: ADA Website Compliance & How Color Impacts Your Website’s Accessibility
  • Part Three: WCAG Compliance & Rethinking the Carousel Trend
  • Part Four: Website Accessibility Test … Is Your Website Navigable Without a Mouse?

Detailed Marketing Deets

Want some profound insight into all things marketing? Check out our Definitive Guide Series for detailed information, tips, and advice regarding: