UI/UX Design, Accessibility

Low-Contrast Text: Understanding and Fixing the Most Common Accessibility Issue

Low-contrast text is the most common accessibility failure. In the 2024 WebAIM Million report, a staggering 81% of the top 1,000,000 homepages had low-contrast text. Those homepages averaged 34.5 distinct instances of low-contrast text.

What is Low-Contrast Text

Put simply, contrast is the difference in brightness between two colors. Contrast is expressed as a ratio from 1:1 to 21:1, where the higher value indicates higher contrast. A lower contrast ratio between text color and background color makes text harder to read.

The Web Content Accessibility Guidelines (WCAG) require most text to have a minimum contrast ratio of 4.5:1 for Level AA compliance. Three types of text are exempt from this requirement:

  1. Large text:The size makes it easier to read, so the minimum contrast ratio is only 3:1. Under WCAG, "large" text that is above 24px or 18.66px and bold.
  2. Incidental text:This includes text in inactive or not visible elements, purely decorative text, and non-essential text within an image.
  3. Logos:Although it's a good idea to make it readable, text in a brand logo doesn't need to meet a minimum contrast ratio.

Who Low-Contrast Text Impacts

Insufficient contrast makes content harder to read for all users. When the contrast between the text and background is low, it's harder to distinguish the shapes and edges of characters. This reduces reading speed and comprehension, while also contributing to eye fatigue.

Low Vision

Visual impairments amplify the effects of low-contrast text. One of the most common visual impairments is low vision, a moderate to severe vision loss that cannot be corrected with prescription lenses, surgery, or medication. Macular degeneration and glaucoma are common conditions that cause low vision. John Hopkins University estimates about 4 million Americans have low vision, which is nearly three times the number of people with total blindness. For these individuals, contrast sensitivity is often reduced to begin with. This makes sufficient contrast even more important.

Color Vision Deficiency

Color vision deficiency affects approximately 1 in 20 people to some degree. Although the condition is commonly called "color blindness," very few people with color vision deficiency are unable to see any color. For most, the condition reduces the ability to distinguish between certain colors — typically red and green, but more rarely blue and yellow — and the severity of the deficiency can vary. Someone with color vision deficiency may have trouble seeing the number 74 in this image:

Color Contrast Tools To Help

There's a variety of tools — many free — that can help check color contrast and find color combinations that better meet WCAG guidelines.

Web Accessibility Evaluation Tool (WAVE)

The WAVE tool by WebAIM is one of the best free accessibility tools available. WAVE scans a given webpage, visually identifies potential issues by injecting icons into the page, summarizes the findings, and provides guidance to help resolve the issues. The WAVE tool is also available as a handy browser extension for Chrome, Firefox, and Edge.

WebAIM Contrast Checker

Also from WebAIM, the WebAIM Contrast Checker will help you quickly calculate the contrast between two colors. All you need to do is enter the two colors' hex codes. The contrast checker will return a contrast ratio and indicate whether the color combination meets the requirements for WCAG AA and/or AAA compliance when used for regular text, large text, or other UI elements.

Accessible Color Generator

Although at first glance the Accessible Color Generator looks similar to the WebAIM Contrast Checker, this tool doesn't just tell you if your color combination passes or fails. It returns the closest variation of a given color that meets contrast guidelines for normal text and large text.

A11y Color Palette

The A11y Color Palette tool is helpful for anyone working with an established color palette or brand guidelines. The tool allows you to enter a list of color hex codes and returns a grid of all possible combinations of those colors. The combinations are sorted from highest to lowest contrast. For each combination, the contrast ratio is provided along with which common use cases — normal text, large text, and non-text elements — meet the criteria for AA and/or AA compliance.

Contrast Plugin for Figma

There are many great Figma plugins for checking color contrast, but the aptly named Contrast plugin has one feature that really stands out — the ability to check contrast against a gradient or image background. Once you have your text element selected, launch the Contrast plugin and enable the "Smart Scan" option. The plugin will sample colors in the background directly behind the text. The returned results will include the lowest found contrast ratio, plus how many of the samples passed for each of the common use cases.

Next Steps

Addressing low-contrast text is crucial for improving web accessibility. By adhering to WCAG guidelines and utilizing some of the many available color contrast tools, we can ensure web content is more inclusive and easier to access for all users.

Need help fixing contrast issues on your site? Contact our team to review your website and to get guidance and development support to improve your website's accessibility.