Why Does Color Contrast Matter For Website Accessibility?

A wireframe of a website browser with a icon representing higher and lower contrast.

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 it wrong, your site may be utterly unusable for a large percentage of your visitors.

A black tile that says High Contrast and a yellow tile that says Low Contrast.

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.

How does color contrast affect 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.

Photo of an older man wearing glasses on the ridge of his nose.

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.

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 standards only if it’s used with larger or bolder fonts.

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.

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.

AudioEye is a SaaS company offering a solution that makes digital content accessible to individuals with disabilities.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store