Text must meet minimum contrast (4.5:1)

Rule text-contrast · Color & contrast · impact serious · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Low-contrast text is hard or impossible to read for people with low vision or in bright light. WCAG requires at least 4.5:1 for normal text and 3:1 for large text (≥24px, or ≥18.66px bold).

How to fix#

Change the colors until the ratio reaches 4.5:1 for normal text and 3:1 for large text (24px+, or 18.66px+ bold): darken the text, lighten the background, or both. For text over an image or gradient, add a solid or semi-opaque overlay behind the text, or a text shadow strong enough for the worst part of the picture. Reduced opacity on the text or an ancestor lowers the rendered contrast too, so check the rendered color, not the declared one. Making the font bolder or larger only helps if it crosses the large-text threshold. Disabled controls are exempt, and under WCAG so is text in a logo or purely decorative text — mark such a finding as ignored rather than recoloring a brand mark.

Example#

<p style="color:#999;background:#fff">Low contrast</p>

<p style="color:#333;background:#fff">Readable contrast</p>

WCAG success criteria#

1.4.3 Contrast (Minimum) — Level AA#

Text needs a contrast ratio of at least 4.5:1 (3:1 for large text) against its background.

Understanding 1.4.3

Standards#

This rule contributes to the following standards:

WCAG AA EN 301 549 Trusted Tester ACT

References#

• WCAG — Contrast (Minimum)