What the thresholds mean
WCAG expresses contrast as a ratio from 1:1 (identical) to 21:1 (black on white). AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA tightens those to 7:1 and 4.5:1. AA is the level legal requirements and most design systems target; AAA is worth it for body text people read at length.
Where designs usually fail
Grey placeholder text, white text on brand colors, and text over images are the classic offenders. A useful anchor: #767676 is the lightest grey that still passes AA on white. If your muted text is lighter than that, it is decoration, not text. Try the swap button too — the ratio is symmetric, but seeing your palette both ways often reveals which direction actually works.
Frequently asked questions
Does this cover non-text elements?
WCAG 2.1 also requires 3:1 for UI component boundaries and meaningful graphics — the AA-large badge doubles as that check, since the threshold is the same 3:1.
Does anything get uploaded?
No. The ratio is calculated in the page from the two colours you enter.
Something wrong with this tool, or an idea for it? Tell us