pick two colors · see if they meet AA and AAA standards.
foreground (text)
background
small text — 14px · 0.88rem
body — this quick brown fox jumps over the lazy dog.
large · 18px bold or 24px regular
huge · above 24pt
contrast ratio
—
what the standards mean
AA (4.5:1 for normal text, 3:1 for large text) is the legal baseline — WCAG 2.1 Level AA is what most governments require. AAA (7:1 normal, 4.5:1 large) is the stretch goal for accessibility-first products.
Large text = 18pt+ (about 24px) regular weight, or 14pt+ (about 18.5px) bold. Small text and UI components have the stricter threshold.
Luminance is computed per WCAG formula: linearize each channel (c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4), then L = 0.2126·R + 0.7152·G + 0.0722·B. Ratio = (L1+0.05) / (L2+0.05).