Practical color guide
WCAG Contrast Checker Guide for Accessible Text Colors
Learn how WCAG contrast ratios work and how to choose accessible text and background colors for websites.
Open related toolWhy contrast matters
Good contrast makes text easier to read for everyone, including users with low vision, bright screens or mobile devices outdoors.
WCAG AA and AAA basics
For normal text, WCAG AA commonly expects a contrast ratio of at least 4.5:1. Larger text has a lower threshold, while AAA is stricter.
Practical color workflow
Pick the background first, test text color, then test button text, links, badges and error states. Recheck contrast after hover or disabled styles.
Frequently asked questions
What is a good contrast ratio for body text?
A common WCAG AA target for normal body text is 4.5:1 or higher.
Should buttons also pass contrast tests?
Yes. Button labels, links and important interface states should remain readable.