Never rely only on color
Always add text labels, icons, or patterns. Never say "click the red button"—some people can't distinguish red.
Test contrast
Every text/background pair must pass WCAG contrast minimums:
- Normal text: 4.5:1 (AA) or 7:1 (AAA)
- Large text (18pt+): 3:1 (AA) or 4.5:1 (AAA)
Simulate color blindness
Use Huelab's blindness simulator to preview your design through Protanopia, Deuteranopia, or Tritanopia. Avoid red+green combinations.
Build intentionally
Start with 2-3 main colors, add neutrals (gray, black, white), generate tints/shades, then verify everything in light and dark modes.