Lumina

Manuals / Graphic Design / Ch 5

B · Type & ColorBeginner45 min read

5. Color with restraint: roles & 60-30-10

Graphic Design · 52 pages source format

Color is a system, not a decoration buffet. Define roles: background, text, accent. Use 60–30–10 as a starting ratio. Check contrast for accessibility.

What you'll learn

  • Color roles
  • 60–30–10 rule
  • HSL thinking
  • Contrast basics

Name your roles

Background, surface, text primary, text muted, accent. Do not invent a new hex per section.

Do this now

Build a 5-color kit in Figma. Name each swatch by role, not “blue 2”.

Clear?

60–30–10 applied

~60% dominant (often neutral), ~30% secondary, ~10% accent. Accent earns attention — overuse kills it.

Do this now

Apply your kit to the poster. Count approximate area coverage. Adjust if accent dominates.

Clear?

Contrast check

Text on backgrounds needs readable contrast. Aim WCAG AA for body text (4.5:1). Stark plugin or WebAIM checker.

Roles example:
- bg: #FAFAF8
- text: #1A1A1A
- muted: #6B6B6B
- accent: #C45C26
- surface: #FFFFFF

Do this now

Run contrast check on headline and body over your background. Fix failures.

Clear?

Checklist