WCAG contrast tips for UI colors

Pretty palettes fail in production when body text sits on a mid-tone background. Contrast ratio is the quick check before you ship.

Rules of thumb

• AA body text: about 4.5:1 or better.
• AA large text (roughly 18pt+ or 14pt bold): about 3:1.
• AAA body: about 7:1 — stricter, useful for accessibility-first products.

How HueSnap helps

The generator shows ratios for adjacent swatches (and the first↔last pair). Use it as a sniff test: if a pair you plan for text/background fails AA, lock a darker or lighter slot and regenerate, or pick a different pair for type.

Practical workflow

1. Generate with Analogous or Monochrome for UI neutrals, Complementary for accents.
2. Reserve the darkest and lightest for text and surfaces.
3. Keep mid-chroma hues for borders, charts, and accents — not tiny body type.

Check a palette →