WCAG Color Contrast: How to Make Text Readable & Accessible

Low-contrast text — light gray on white, say — looks elegant but excludes millions of users with low vision, and it's penalized in accessibility audits. The WCAG guidelines give clear numbers to hit. Here's how contrast works and how to pass.

What "contrast ratio" means

Contrast is expressed as a ratio between the text color and its background, from 1:1 (identical, invisible) to 21:1 (black on white). The bigger the ratio, the easier it is to read.

The thresholds to remember

*Large text = 18.66 px bold or 24 px regular and up. AA is the practical target for most sites; AAA is stricter and ideal for body-heavy or accessibility-focused content.

How to fix failing text

• Darken the text (or lighten it on dark backgrounds) — adjust the lightness in HSL until you pass.
• Avoid pure gray on white for body text; #767676 is roughly the lightest gray that passes AA on white.
• Don't rely on color alone to convey meaning (e.g. red/green) — add icons or labels for colorblind users.
• Watch text over images — add a dark overlay or text shadow so contrast holds across the photo.

UI elements count too

WCAG 2.1 requires 3:1 contrast for meaningful non-text elements like form borders, icons and focus outlines — not just text. Don't forget your placeholder text and disabled states.

Check it instantly

Use the contrast checker in our color tools: enter your text and background colors and it shows the exact ratio plus pass/fail for AA and AAA, normal and large. Adjust until everything's green before you ship.

FAQ