Back to Blog

What is Color Contrast and Why Does it Matter For Website Accessibility?

Colorful website preview with a magnifying glass

Summary: It’s important that your website is as accessible as possible for everyone. There are important design considerations, such as your choice of colors that can help. This can make the difference between a site that pops and one that flops. This article is all about the importance of color contrast.

Pro Tip: Check your color contrast with our free accessibility tool.

Whether you’re a business designing an e-commerce website for your customers or a public-sector organization creating online services for your citizens, it’s important that your portal is as accessible and easy to use as is achievable for the widest possible audience. 

At the same time, there are important design considerations — for example, making important decisions about content, images, typography, and layout. And above all, your choice of colors can make the difference between a site that pops and one that flops. 

Color is a tricky subject — and it’s not just about the way the components look. In fact, your color choices, and the relationships between those hues, will have a huge impact on the user experience. If you get your color accessibility wrong, your site may be utterly unusable for a large percentage of your visitors.

High Contrast example of white text on black background and Low Contrast example of white text on yellow background

What is color contrast? 

Technically, color contrast is the relationship between the luminance of two colors. In everyday language, you can think of luminance as the brightness or darkness of a color: Pure white has the highest luminance and pure black the lowest.  

Contrast is typically expressed as a ratio, where a higher number means a greater degree of contrast between the two colors. For example, white and black have a contrast ratio of 21:1 (the highest possible), while white and yellow have a drastically lower ratio of 1.07:1. 

As you can easily see from an online tool such as contrast-ratio.com, when two colors are overlaid on each other — such as when you have text in one color on a background of a different hue — the benefits of a high contrast ratio become clear. Reading white text on a black background is much easier than reading white text on a yellow background.

Two websites open, one in full color and one in grayscale

Why is color contrast important for people with disabilities? 

For many people with visual disabilities, color contrast can make the difference between a website layout that is clear and easily navigable, and one that is completely illegible. Almost all types of visual impairment, from myopia and hypermetropia to diabetic retinopathy and macular degeneration, can make it more difficult to read text when the color contrast is low. 

Low contrast can also cause problems for people who are color-blind, even if their eyesight is otherwise perfect. If two quite different colors have a near-identical luminance, they can be almost impossible to tell apart. 

Approximately 15% of the U.S. population is currently 65 or older

Why is color contrast important for the aging population? 

As we age, our eyesight changes: Visual acuity typically starts to decline when we’re in our 70s, even for people whose eyes have always been healthy. So when we’re talking about the impact of color contrast and we include the aging population, this is a much broader category than you might think. Approximately 15% of the U.S. population is currently 65 or older, and that demographic is expected to double over the coming decades.  

Among the most common visual problems older people experience is low contrast sensitivity. If your website isn’t built with accessible color contrast in mind, you’re potentially cutting off a large percentage of your customers from using your online services or shopping your online products.

One example of white text with red background that does not pass and one example with a darker red background that does pass.

What do the Web Content Accessibility Guidelines (WCAG) say about color contrast?

The Web Content Accessibility Guidelines (WCAG) are widely accepted as the global standard for all aspects of accessibility on the web. WCAG 2.0 sets out a specific Success Criterion (1.4.3) for the minimum level of color contrast that organizations should aim to achieve on their websites. 

There are some subtleties in the details; the readability of text depends on other factors, such as the size and weight of the font, not just the color contrast. But for most text on the web, level-AA conformance with WCAG requires a contrast ratio of at least 4.5:1 between the font and background colors. 

It’s essential to confirm that your color contrast ratios pass this test, because some of the results are not obvious. For example, white text on a plain red background, which is used on many websites, hits a ratio of only 3.99:1. That means it conforms to WCAG color contrast standards only if it’s used with larger or bolder fonts.

A legal scale and shield overtop of a web browser

What is the legal position on color contrast? 

The Americans with Disabilities Act (ADA) is the most important U.S. federal law that relates to accessibility. The ADA has been on the statute books since 1990, when the internet was in its infancy, and the law itself doesn’t specifically mention web accessibility. However, legal precedent has shown that the courts regard web accessibility as falling within the ADA’s scope. 

AudioEye has tracked thousands of examples of plaintiffs successfully bringing lawsuits against organizations for failing to make their websites accessible. And the main criterion used by the courts to determine whether a website is sufficiently accessible is its level of compliance with the WCAG standards. 

Therefore, a direct relationship exists between color contrast issues on your website and legal risk for your organization. If you don’t get color contrast right, you will fail to conform with WCAG — and expose your business to a potential lawsuit.

AudioEye portal with positive accessibility results

How can your organization boost website accessibility?

Color contrast is a key concern for web accessibility, but it’s just one checkbox on a very long list of compliance directives. Achieving and maintaining full conformance with WCAG is a major undertaking, and the goalposts are constantly moving as web accessibility standards continue to evolve. 

However, there’s no need to feel daunted: Help is at hand. AudioEye can provide both the technology and the expertise your organization needs to detect, diagnose, and mitigate the full spectrum of web accessibility concerns, from color contrast to screen reader compliance. This will help you ensure that all users of your site feel welcome and get the support they need to have a constructive and frustration-free digital experience. 

Getting started with digital accessibility couldn’t be easier. Take the first step today by scheduling time with an AudioEye expert now. 

Share this post