WCAG Color Contrast

Color contrast determines whether people can read your text. The Web Content Accessibility Guidelines (WCAG) define measurable thresholds so contrast is not a matter of opinion. This guide explains how the ratio is calculated and what levels you need to meet.

What the ratio means

Contrast ratio compares the relative luminance of two colors and ranges from 1:1 (identical) to 21:1 (black on white). Higher is more readable. The calculation uses a defined luminance formula, so any two people measuring the same colors get the same result.

AA and AAA thresholds

WCAG AA requires 4.5:1 for normal text and 3:1 for large text or UI components. AAA is stricter, requiring 7:1 for normal text. Most projects target AA for all text and reserve AAA for critical content.

Fixing low contrast

If a pair fails, adjust lightness rather than hue: darken text on a light background or lighten it on a dark one until it passes. A contrast checker with a suggested-color feature can find a passing value for you quickly.

Try these tools

Color Contrast Checker Check the contrast ratio between two colors with clear WCAG pass/fail results. WCAG Contrast Checker Test color pairs against WCAG 2.2 AA and AAA thresholds with detailed results. Tint and Shade Generator Generate tints and shades of a color as a scale, with WCAG text hints and export.