Color Theory, Contrast, and Palette Strategy
How Color Works in Design
Color is both emotional and functional
Color can establish mood, distinguish categories, signal interaction states, and guide attention. Effective color systems balance aesthetics with readability and accessibility.
Watch out
A beautiful palette that fails contrast testing is not a successful design system.
Palette Building
A practical approach to palettes
-
1
Step 1: Choose a dominant base color that matches the brand or mood.
-
2
Step 2: Add secondary colors to support content categories or emphasis.
-
3
Step 3: Include neutrals for backgrounds, type, and structure.
-
4
Step 4: Check contrast for text, icons, and interactive states.
-
5
Step 5: Test the palette in real layouts, not just swatches.
Color roles
| Role | Function |
|---|---|
| Primary | Main brand or interface accent |
| Secondary | Supportive color for variety and balance |
| Neutral | Backgrounds, body text, and containers |
| Alert | Signals errors, warnings, or urgent attention |
What is the best reason to use neutral colors in a layout?
Neutrals provide balance and make important colors stand out.
Correct answer: They help support structure and readability
What is one reason to test color in a real layout instead of only in a palette sheet?
Color relationships change when placed next to text, images, and other interface or page elements.
Correct answer: context
Which contrast issue most commonly harms accessibility?
Low text-background contrast reduces readability, especially for users with visual impairments.
Correct answer: Low contrast between text and background