Pick a background color and instantly see every foreground color that passes WCAG AA (4.5:1) or AAA (7:1) contrast — a practical tool for accessible color pairing. Click any swatch to preview.
WCAG 2.1 defines contrast as the ratio between the relative luminance of two colors — a value between 1:1 (no contrast) and 21:1 (black on white). Level AA requires 4.5:1 for normal text and 3:1 for large text (18px+ regular or 14px+ bold). Level AAA requires 7:1 and 4.5:1 respectively. Luminance is not the same as brightness — it uses a gamma-corrected formula that weights green most heavily because the human eye is most sensitive to it. Choosing accessible color pairs from the start is far easier than retrofitting contrast after a design is finalized. Many legal frameworks, including the ADA and EN 301 549, require WCAG AA compliance for public-facing digital products.