Color Contrast Cheatsheet — WCAG Quick Reference

The Four Numbers

Memorize these. Everything else is detail.

• 4.5:1 — body text (small) against its background

  WCAG 1.4.3 AA

• 3:1 — large text (≥18pt regular OR ≥14pt bold) against its background

  WCAG 1.4.3 AA

• 3:1 — UI components and meaningful graphics (buttons, icons, form borders, focus indicator)

  WCAG 1.4.11 AA

• 7:1 — body text under WCAG AAA (only required for AAA-target sites; AA is the legal floor in most jurisdictions)

  WCAG 1.4.6 AAA

When 3:1 Applies (the most-missed)

• Icon buttons against their background (not against icon color)

• Form input borders that distinguish field from background

• Required-field asterisks (against page background)

• Focus rings (against the unfocused state of the element)

  WCAG 2.4.11 (new in 2.2)

• Toggle switches in OFF state (against background)

• Required heatmap colors that convey information

Common Pitfalls

• Brand colors (light gray on white) usually fail body text — make a separate "accessible body" tint

  e.g. #999 on white = 2.85:1 → fail. #767676 on white = 4.54:1 → AA pass.

• Hover/focus states often LOWER contrast — verify both unfocused AND focused states pass

• Image backgrounds make contrast indeterminate — overlay solid scrim (rgba(0,0,0,0.5)+ for body text on photo)

• Disabled state — WCAG explicitly EXEMPTS disabled controls from contrast requirement, but err toward visibility for usability