# Fixing contrast issues, on your own site and elsewhere

DevFeed: [Fixing contrast issues, on your own site and elsewhere](<https://devfeed.tech/articles/fixing-contrast-issues-on-your-own-site-and-elsewhere-9383.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/fixing-contrast-issues-on-your-own-site-and-elsewhere/>)

Author: Kilian Valkhof

Published: 2021-06-07T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web Content Accessibility Guidelines](<https://devfeed.tech/topics/web-content-accessibility-guidelines.md>), [Web](<https://devfeed.tech/topics/web.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [article](<https://devfeed.tech/tags/article.md>), [design](<https://devfeed.tech/tags/design.md>), [developer](<https://devfeed.tech/tags/developer.md>), [tools](<https://devfeed.tech/tags/tools.md>), [web](<https://devfeed.tech/tags/web.md>), [web-content-accessibility-guidelines](<https://devfeed.tech/tags/web-content-accessibility-guidelines.md>)

## AI overview

This article explains how insufficient text contrast creates widespread accessibility problems on websites. It introduces contrast ratios, describes WCAG thresholds for regular and large text, illustrates how visually similar colors can produce different audit results, and recommends using design plugins and accessibility checkers to identify contrast issues.

## Source excerpt

Insufficient text contrast is the most common accessibility issue on websites today. According to the WebAIM Million report for 2021, 86.4% of home pages world wide have low contrast text. What's worse, this number has been increasing the past three years. Text contrast issues can by and large be automatically found (and fixed, more on that later), so why do nearly 9 out of 10 sites have contrast issues? Before we answer that, a quick intro on what text contrast is When we talk about text contrast, what we mean is the difference between the color of the text and the color that's behind the text. To make sure the text is readable for everyone, you need a certain amount of difference between them. This difference can be measured using a formula that yields a number between 1 (no contrast, white text on a white background) and 21 (the most contrast possible, black text on a white background). That number is called the "contrast ratio". The formula is part of WCAG, the Web Content Accessibility Guidelines. How the formula works is not that important, but there are a few numbers you should be aware of. For regular text, you need a contrast value of at least 4.5, and for large text just 3, to pass the text for sufficient contrast. (There are more strict rules available too). Having to score a 4.5 out of 21 doesn't seem like a very high bar to clear, so why do 86% of websites still have contrast issues? We could blame our own visual perception for that. For example, here's a text with a contrast ratio of 4.12: This text does not have enough contrast For you this might be fine or it might not be, but in any case you're going to have a hard time seeing the difference between it and this text which has a contrast ratio of 4.54: This text does have enough contrast One of them does not have sufficient color contrast and would fail an accessibility audit, and the other would pass. And if you couldn't tell them apart that wouldn't be odd, they're very close. And herein lies a pot