Contrast Minimum (4.5:1 ratio).

Low contrast text is unreadable for users with low vision or in bright sunlight

What does this check test?

This check verifies that the contrast ratio between text and its background meets WCAG minimum thresholds. Normal text (below 18pt or 14pt bold) must have a contrast ratio of at least 4.5:1. Large text (18pt+ or 14pt+ bold) requires at least 3:1. This maps to WCAG 2.2 Success Criterion 1.4.3 (Level AA). The check evaluates both static text colors and text rendered over images or gradients, where the effective contrast may vary across the element.

Why does it matter?

Approximately 246 million people have moderate-to-severe distance vision impairment, and many more experience temporary situational impairments — reading a phone screen in direct sunlight, using a display with reduced brightness to save battery, or viewing a projector in a bright conference room. Low contrast text forces users to strain, squint, or give up entirely. Contrast failures are the single most common accessibility issue found on the web — WebAIM's Million Home Pages study consistently finds contrast issues on over 80% of home pages.

Who is affected?

UI/UX designers choosing typography and color palettes, brand designers defining color systems, front-end developers implementing designs, and theme/dark-mode developers who must maintain contrast across multiple color schemes. Design system maintainers should encode contrast requirements directly into token definitions.

Where does this apply?

All text content on every page: body text, headings, navigation links, form labels, placeholder text, button labels, footer text, captions, tooltips, error/success messages, disabled states, and text over hero images or gradient backgrounds. Pay special attention to light gray text on white backgrounds (a common offender) and text over photographs.

How to fix it

/* 7:1 ratio on white — passes AA and AAA */
.body-text { color: #595959; background: #ffffff; }

/* 4.5:1 ratio — minimum passing value for AA */
::placeholder { color: #767676; }

/* 2.3:1 ratio — FAILS for normal text */
.light-text { color: #aaaaaa; background: #ffffff; }

/* Semi-transparent overlay ensures contrast over photos */
.hero-overlay {
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
}

References

• WCAG 2.2 — Success Criterion 1.4.3 Contrast (Minimum)
• WebAIM — Contrast Checker
• web.dev — Color and contrast accessibility