Why Does Color Contrast Matter for Web Accessibility

Back to blog

Why Does Color Contrast Matter for Web Accessibility

Posted October 13, 2023

AudioEye

Posted October 13, 2023

Colorful website preview with a magnifying glass
Colorful website preview with a magnifying glass

Learn how your choice of color can prevent people with visual impairments from being able to easily read or navigate your website.

There are plenty of design considerations that go into website accessibility — from the layout of content to the use of images and typography.

However, your choice of color is one of the first things people notice when they visit your site. And if you get it wrong, it can impact the user experience for all visitors — not just those with visual impairments.

In fact, your color choices — and the relationships between those hues — can have a huge impact on the user experience. If you choose colors that don’t have enough contrast, portions of your site may be hard to read and navigate for people with visual impairments.

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 simpler terms, you can think of luminance as the brightness 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 contrast ratio of just 1.07:1.

When two colors are overlaid on each other — for example, 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.

Check Your Color Contrast

Purple eyedropper icon

Check Your Color Contrast

Use a color contrast checker to see if your colors meet Web Content Accessibility Guidelines (WCAG) requirements.

Get Started

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

Why Does Color Contrast Matter?

For many people with visual impairments, color contrast can be the difference between a site that is easy to read and navigate, and one that is completely illegible. Many 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

Color contrast also plays a significant role in the user experience for the aging population. Visual acuity typically starts to decline by the time people turn 70, even if their eyes have always been healthy.

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 run the risk of cutting off a large percentage of visitors from using your online services or shopping your online products.

A legal scale and shield overtop of a web browser

Color Contrast and Accessibility Laws

The Americans with Disabilities Act (ADA) is one of the key legislations that prohibits discrimination based on disability. Because the ADA was signed into law in 1990, it doesn’t include direct language about the internet — or specific legal criteria for implementing digital accessibility.

Instead, the courts and the Department of Justice (DOJ) rely on the Web Content Accessibility Guidelines (WCAG), the de facto international standard for digital accessibility.

Under the ADA, WCAG is almost universally cited in lawsuits and settlements — and legal precedents show that adhering to WCAG is key to ADA compliance.

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

What Does WCAG Say About Color Contrast?

According to WCAG Success Criterion (SC) 1.4.3: Contrast (Minimum), the visual presentation of text and images of text must have a contrast ratio of at least 4.5:1.

There are three exceptions to the 4.5:1 contrast requirement: large text, incidental text, and logotypes.

  • Large Text: Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no contrast requirement.

It’s important to actively test your contrast ratios, because it’s not always obvious which color combinations have low contrast. For example, white text on a plain red background (which is used by many brands across many websites) has a contrast ratio of just 3.99:1. That means it only conforms to WCAG if it’s used with large or bold fonts.

AudioEye portal with positive accessibility results

How Can I Make My Website More Accessible?

Here are two quick tips to help you make sure your colors are accessible:

  1. Don’t use color as the only method to convey information: Websites often use green and red text to indicate success or failure messages. However, red-green color blindness is the most common form of color vision deficiency (CVD). And remember: Anyone who is blind is also color blind, so you’ll want to ensure that any pass/fail alerts (such as a missing form field) are also communicated programmatically.
  2. Underline inline links: Your inline link style should have an underline — color is not enough. Most users expect to see links underlined, and underlines help ensure that people with visual impairments can identify links.

Want to make sure your colors are accessible? Check out any color combinations on your site using AudioEye’s free Color Contrast Checker.

Or, get a free scan of any URL to identify accessibility issues on your website.

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading