This rule raises an issue when text elements have a color contrast ratio below WCAG AA standards: less than 4.5:1 for normal text or less than 3:1 for large text (18pt+ or 14pt+ bold).
Color contrast is essential for web accessibility. When text doesn’t have enough contrast against its background, it becomes difficult or impossible for users to read.
Users with visual impairments, including color blindness, low vision, or age-related vision changes, rely on sufficient contrast to distinguish text from backgrounds. Poor contrast also affects readability in challenging conditions like bright sunlight or low-quality displays.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure content is accessible to the widest possible audience. WCAG AA compliance requires:
These ratios are calculated using the relative luminance of colors, which accounts for how the human eye perceives different colors' brightness.
Poor color contrast creates barriers for users with visual impairments and can make your application non-compliant with accessibility standards like WCAG AA. This may result in legal issues in jurisdictions with accessibility requirements, exclude users from accessing your content, and create a poor user experience for everyone in suboptimal viewing conditions.
Increase the contrast by using darker text on light backgrounds or lighter text on dark backgrounds. Use online contrast checkers to verify your color combinations meet WCAG standards. To check your contrast as you make your color choices, use a tool such as WebAIM’s Color Contrast Checker.
.text {
color: #777777; /* Light gray text */
background-color: #ffffff; /* White background */
/* Contrast ratio: 4.48:1 - fails WCAG AA for normal text */ // Noncompliant
}
.text {
color: #595959; /* Darker gray text */
background-color: #ffffff; /* White background */
/* Contrast ratio: 7.0:1 - passes WCAG AA */
}