</>
ValidateHTML

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.

Common Causes

  • Using light gray body text on a white background to look minimal, dropping below the 4.5:1 ratio.
  • Placing text over a photo or gradient where the contrast changes across the image and dips too low in places.
  • Brand colors chosen for aesthetics, like a pale accent on white, that were never checked against WCAG ratios.

Code Examples

Inaccessible
/* Light gray text on white background - ratio 2.1:1 */
.text { color: #aaaaaa; background: #ffffff; }

/* Low contrast placeholder text */
input::placeholder { color: #cccccc; }
Accessible
/* 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.

Frequently Asked Questions

What contrast ratio does WCAG require?
Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular and above). Level AAA raises this to 7:1 and 4.5:1. Most audits target AA as the practical baseline.
Does the contrast rule apply to disabled or placeholder text?
Disabled controls are exempt from the contrast minimum, but placeholder text is not exempt when it conveys information. Treat visible placeholder text as normal text and keep it at 4.5:1; #767676 is the lightest gray that passes on white.
Do icons and graphics need to meet contrast requirements?
Yes. Under WCAG 1.4.11, meaningful icons, form borders, and graphical objects need a 3:1 contrast ratio against adjacent colors so users with low vision can perceive them. Purely decorative graphics are exempt.

Check Your Accessibility Now

Our accessibility checker detects this issue automatically.

Open Accessibility Checker
Recommended

Cloudways · Managed Cloud Hosting

Fix accessibility errors, then deploy on Cloudways managed cloud (AWS, GCP, DigitalOcean).

Free 3-day trial · 30% off 3 months + free site migration with code MIGRATE303

Start free trial

Related Accessibility Errors

Missing Alt Text on Images

Missing alt text hides images from screen readers and Google Images. Learn why alt attributes matter for accessibility and SEO, and how to write them well.

Missing Form Labels

Missing form labels leave inputs unreadable to screen readers and hurt usability. Learn how to label every form field correctly for WCAG compliance, step by step.

Missing Button Type Attribute

A missing button type attribute defaults to submit, causing accidental form submissions and data loss. Learn how to set the right button type every time.

View all accessibility errors