What This Rule Checks
All text on your website must have a sufficient color contrast ratio between the foreground text and its background to ensure readability for users, especially those with visual impairments. This requirement applies to regular text as well as text that is part of an image.
Who Is Affected
This issue primarily affects: Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Colorblindness users, who cannot distinguish certain color combinations and need non-color visual cues.
Why This Matters
Insufficient color contrast affects an estimated 300 million people with color vision deficiencies worldwide, plus anyone viewing screens in bright sunlight or on low-quality displays. WCAG 1.4.3 (Contrast Minimum) requires 4.5:1 for normal text and 3:1 for large text. This is the single most common WCAG violation found in automated scans.
How to Fix
Ensure Text Has a Minimum Contrast Ratio – For normal-sized text, ensure the contrast ratio is at least 4½:1. For larger text (18pt or larger, or 14pt bold), a contrast ratio of 3:1 is acceptable.
Code Examples
/* Insufficient contrast: light gray on white */
.subtle-text {
color: #aaaaaa; /* Light gray */
background: #ffffff; /* White */
}
/* Ratio: 2.3:1 - FAILS AA (needs 4.5:1) */
Copy
/* Sufficient contrast for normal text */
.body-text {
color: #595959; /* Dark gray */
background: #ffffff; /* White */
}
/* Ratio: 7.0:1 - PASSES both AA and AAA */
/* Large text (18pt+ or 14pt+ bold) needs 3:1 */
.heading-text {
color: #767676;
background: #ffffff;
font-size: 24px;
}
/* Ratio: 4.5:1 - PASSES for large text */
Copy
Common Mistakes to Avoid
- Testing contrast only in light mode and forgetting dark mode styles.
- Using brand colors that look distinct to sighted users but fail mathematical contrast ratios.
- Forgetting to check contrast on hover, focus, and active states.
- Assuming placeholder text doesn’t need to meet contrast requirements (it does for WCAG 2.1).
- Not accounting for text over gradient backgrounds or images (test at the worst point).
Tip: Text accessibility includes contrast, spacing, and visual presentation. Users with low vision or cognitive disabilities depend on well-formatted, high-contrast text that can be resized and recolored with user stylesheets.
Related WCAG Criteria
- 1.4.3: Contrast (Minimum)