What Is a Good Color Contrast Ratio? (WCAG)
Contrast ratio measures how different a text color is from its background. Get it wrong and text becomes hard to read — especially for people with low vision. The WCAG accessibility guidelines set clear thresholds; here is what they mean.
What the ratio means
Contrast ratio is a number from 1:1 (no contrast — identical colors) to 21:1 (maximum — pure black on pure white). It is calculated from the relative luminance of the two colors, not just their brightness by eye.
The WCAG thresholds
- AA, normal text — at least 4.5:1
- AA, large text (about 18px bold or 24px regular) — at least 3:1
- AAA, normal text — at least 7:1 (the stricter target)
- Non-text UI like icons and input borders — at least 3:1
Why it matters
Low contrast is one of the most common accessibility failures on the web. Meeting AA is the practical baseline most sites aim for; it also helps everyone reading on a phone in bright sunlight, not only users with impaired vision.
Check any pair
Paste a text color and a background color into the Color Contrast Checker to see the ratio and whether it passes AA and AAA. To pick or tweak colors in HEX, RGB or HSL first, use the Color Converter.
Related tools
Last updated: July 6, 2026