foundation

Color contrast

Choose text, icon, state, and focus colors with enough contrast and without relying on color as the only signal.

Color contrast ensures text, icons, and focus indicators remain readable against their background. WCAG 2.x commonly targets **4.5:1** for normal text and **3:1** for large text and UI components. Never use color as the only way to convey state—pair with text, icons, or patterns.

					:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}
.error { color: #b00020; border-left: 4px solid #b00020; }

| Check | Tooling | |-------|---------| | Body text vs background | Contrast checker, Figma plugins | | Disabled vs active | Not only lighter color—add label change | | Focus ring | 3:1 against adjacent colors | | Charts | Patterns or labels, not color alone |

Dark mode and image overlays change contrast—verify both themes and hover/focus states.

On interviews: AA vs AAA; large text threshold; contrast for placeholders and disabled fields; designing for color-blind users.

Common pitfalls: gray placeholder as only label; red/green success/error only; thin focus rings on busy backgrounds; brand palettes that fail on mobile outdoors.

The trade-off is brand aesthetics versus legibility for low vision and bright environments.

Checklist:

Measure contrast on real backgrounds, not swatches alone.
Add non-color cues for errors and selection.
Style `:focus-visible` distinctly from hover.
Re-check when switching light/dark themes.