Low Color Contrast
Color contrast is the difference in brightness between text and its background. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Low contrast makes text difficult or impossible to read for users with low vision, color blindness, or in bright lighting conditions.
Why It Matters
Low contrast affects a huge number of users: approximately 1 in 12 men have some form of color vision deficiency. Even users with perfect vision struggle with low contrast text on mobile screens in sunlight. It's a WCAG 2.1 Level AA violation and one of the most common accessibility failures found in audits.
Code Examples
/* Light gray text on white background - ratio 2.1:1 */
.text { color: #aaaaaa; background: #ffffff; }
/* Low contrast placeholder text */
input::placeholder { color: #cccccc; }/* Dark gray text on white background - ratio 7.4:1 */
.text { color: #595959; background: #ffffff; }
/* Sufficient contrast for placeholder */
input::placeholder { color: #767676; }How to Fix
- 1Use a contrast checker tool to verify your text meets 4.5:1 for normal text and 3:1 for large text.
- 2Avoid light gray text on white backgrounds. #767676 on white is the lightest gray that passes WCAG AA.
- 3Check contrast for all states: hover, focus, active, disabled, and placeholder text.
- 4Don't rely on color alone to convey information. Use icons, patterns, or text labels as well.
Check Your Accessibility Now
Our accessibility checker detects this issue automatically.
Open Accessibility CheckerHostinger — Fast & Affordable Web Hosting
Deploy accessible, validated code on reliable hosting.
Related Accessibility Errors
Missing Alt Text on Images
Learn why alt text is required on images, how it affects accessibility and SEO, and how to write effective alt attributes.
Missing Form Labels
Form inputs without labels are inaccessible to screen readers. Learn how to properly label form fields for WCAG compliance.
Missing Button Type Attribute
Buttons without a type attribute default to 'submit', which can cause unexpected form submissions. Learn how to fix this.