TL;DR: Contrast ratio measures readability between text and background. Use AA as a baseline for normal text, AAA as an ambitious target. Large text can pass with lower ratios.
Key idea: contrast ratio is a luminance-based readability heuristic — powerful, but incomplete without typography and context
Contrast ratio is a number derived from the relative luminance of two colors. It ranges from 1:1 (same color) to 21:1 (black on white). Higher contrast is usually easier to read — especially at small sizes.
WCAG guidance is often summarized as AA and AAA targets. You don’t need to memorize the whole spec to use it: most teams treat AA as “ship it” for body text, and AAA as “great if we can.”
Common mistakes: chasing a ratio while ignoring font size/weight, and assuming contrast alone guarantees accessibility
A common mistake is to chase a ratio while ignoring typography. Font size, weight, and line-height matter a lot. Contrast is a necessary condition for readability, not a full guarantee.
What to track: the *smallest* text size you ship. That’s where contrast failures hurt most
Use the tool here to check quickly: Contrast Checker. Then test in your actual UI context.
If you also want to ensure differences survive color-vision variation, preview in: Color Blindness Simulator.
If you’re building palettes, pair contrast checks with ramps: Shades & Tints.