WCAG 2.2 contrast compliance, accessible palettes, and color choices that survive color blindness.
Click to play with sound.
---
name: Color Accessibility
description: Build color systems that meet WCAG 2.2 contrast and stay legible for color-blind users.
---
# Color Accessibility
Color should never be the only thing carrying meaning, and text must always be
readable.
## Contrast targets (WCAG 2.2)
- Body text: at least **4.5:1** against its background.
- Large text (≥24px, or ≥19px bold): at least **3:1**.
- UI components and focus indicators: at least **3:1** against adjacent colors.
- Always test the *actual* pairing, including text over images and on hover.
## Don't rely on color alone
- Pair color with a label, icon, or pattern (e.g. error = red + icon + text).
- Links in body text need an underline or another non-color cue.
- Charts: use shape, position, or direct labels, not just hue.
## Color-blind safety
- Avoid red/green as the only distinction (8% of men can't separate them).
- Prefer blue/orange palettes; verify with a simulator (deuteranopia,
protanopia, tritanopia).… install to load the full skillSign in to rate and review this skill.
No reviews yet. Be the first to review this skill.