Insufficient color contrast

Insufficient contrast between text and its background is one of the most frequent accessibility issues and yet one of the simplest to fix. WCAG success criterion 1.4.3 requires a minimum contrast ratio of 4.5:1 for standard-sized text and 3:1 for large text (24px or 18.5px bold). These thresholds are not arbitrary: they come from visual ergonomics research and ensure text readability under most conditions. Light gray text (#999) on a white background (#fff) has a contrast ratio of only 2.85:1 — far below the requirement. Light blue text on a white background, white text on a yellow background, gray text on a slightly darker gray background: these color combinations are ubiquitous on the web and all pose readability problems. The lack of contrast does not only affect people with visual impairments. It also affects users viewing their screens in bright sunlight, on a poor-quality display, or simply older people whose visual acuity naturally declines. According to the WHO, 2.2 billion people worldwide have a visual impairment, including 300 million with color blindness. Insufficient contrast makes your content inaccessible to a significant portion of your audience. It is important to note that the contrast criterion also applies to text embedded in images, form field placeholders, text on background images, and interface elements such as input field borders. Icons and informative graphical elements must also meet a minimum contrast ratio of 3:1 with their surroundings.

For a visually impaired person, text with insufficient contrast is simply unreadable. They must squint, move closer to the screen, or use a magnification tool — all extra efforts that make browsing exhausting. For color-blind people (8% of men, 0.5% of women), certain color combinations that appear contrasted to a normal eye become indiscernible. Red on green, for instance, is invisible to a deuteranope. Older people are also heavily affected: after age 60, the lens yellows and contrast sensitivity significantly decreases. A site with poorly contrasted text effectively excludes seniors, who represent a growing segment of internet users. Beyond disability, insufficient contrast degrades the experience for all users. Outdoors, under direct sunlight, even a user with perfect vision cannot read light gray text on a white background. This is a universal problem that affects conversion and engagement on your site.