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.
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:
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.
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 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:
There's a variety of tools — many free — that can help check color contrast and find color combinations that better meet WCAG guidelines.
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.
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.
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.
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.
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.
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.
Image Credit: Adobe Firefly