← Lesson
BitWithBite
UI/UX · Quick Reference

Lesson 3 — Color Theory Cheat Sheet

UI/UX
In one line: Color wheel relationships plus WCAG contrast ratios drive both aesthetics and accessibility.

Color Wheel Relationships

1Complementary. Opposite colors, e.g. blue & orange — high contrast.
2Analogous. Neighboring colors — harmonious, low contrast.
3Color psychology. Colors carry emotional/cultural associations (red = urgency).

WCAG Contrast Minimums

Normal body text (AA)
4.5:1 minimum contrast ratio
Large text 18pt+/14pt bold (AA)
3:1 minimum contrast ratio
Check contrast with the Stark plugin before finalizing any palette in Figma.