What This Rule Checks
For visually impaired users, ensuring sufficient contrast between text and its background is critical for readability. According to WCAG (Web Content Accessibility Guidelines), enhanced contrast ratios improve the visibility of small and large text, helping users with low vision or color vision deficiencies.
Who Is Affected
This issue primarily affects: Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes.
Why This Matters
Enhanced contrast (7:1 for normal text, 4.5:1 for large text) significantly improves readability for users with moderate visual impairments and benefits everyone in suboptimal viewing conditions. This is a WCAG AAA criterion (1.4.6).
How to Fix
To ensure that your site meets enhanced color contrast requirements:
Test Contrast Ratios
Use a color contrast checker to test the contrast ratio between text and background colors. Ensure that the contrast ratio is at least 7:1 for normal text and 4 ½:1 for large text.
Adjust Colors to Meet Contrast Requirements
If the contrast ratio is too low, adjust the text or background color to increase the contrast. This may involve making text darker, increasing the brightness of the background, or using bold text for better readability.
Code Examples
/* Passes AA (4.5:1) but fails AAA (7:1) */
.text {
color: #767676;
background: #ffffff;
}
/* Ratio: 4.5:1 */
Copy
/* Passes AAA enhanced contrast (7:1) */
.text {
color: #595959;
background: #ffffff;
}
/* Ratio: 7.0:1 */
/* Large text AAA (4.5:1 for 18pt+ or 14pt+ bold) */
.heading {
color: #767676;
background: #ffffff;
font-size: 24px;
}
Copy
Common Mistakes to Avoid
- Assuming AA-level contrast is sufficient for all users.
- Not testing contrast in both light and dark modes at the AAA level.
- Forgetting that enhanced contrast applies to all text sizes, with different thresholds for large text.
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.6: Contrast (Enhanced)