📖 Notes
LESSON 3 OF 26
Color Theory — Palettes, Psychology & Accessibility
Color Is Never Just Decoration
The color wheel, complementary/analogous schemes, color psychology, and contrast ratios for WCAG accessibility.
Color Relationships
The Color Wheel
🔵🟠
Complementary
Colors directly opposite on the wheel (e.g. blue and orange) — high contrast, energetic.
🟢🔵🟣
Analogous
Colors next to each other on the wheel — harmonious, low-contrast palettes.
🎭
Color Psychology
Colors carry emotional/cultural associations — e.g. red often signals urgency, blue signals trust.
♿
WCAG Contrast
2.1 AA requires at least 4.5:1 contrast ratio for normal body text.
Building a Palette
- Pick one primary color that carries your brand's core emotion.
- Add a complementary or analogous accent color for calls-to-action.
- Include neutral grays for text and backgrounds — most of any UI is neutral, not saturated color.
- Check every text/background pairing against WCAG contrast ratios before finalizing.
⚠️
Accessibility isn't optional
A palette that looks beautiful but fails 4.5:1 contrast for body text excludes users with low vision or color blindness — check contrast early, not as an afterthought.