DesignDojo
1.1-first-principles · 03-contrast

Estimated time: 9 min

Low ContrastClear Contrast
Flat styling vs ranked emphasis

If Everything Matches, Nothing Wins

Same size + same weight + same color = no hierarchy.

Users should never need to hunt for priority. Flat styling makes every piece of text compete equally.

Three Contrast Levers

1. Size: large beats small.

2. Weight: bold beats regular.

3. Tone: bright beats muted.

Use at least two levers on the primary message. Keep supporting text intentionally quieter.

Contrast Also Guards Legibility

Low text-to-background contrast hides information and can fail accessibility checks.

Readable contrast is a usability requirement, not only a style move. Good hierarchy starts with text you can see at a glance.

Primary heading is biggest, CTA has strongest color, and helper copy is intentionally muted.

Exercise

Pick the strongest hierarchy choice for a pricing card.

Contrast

A visible difference in size, weight, color, or tone that creates priority and legibility.

Visual Hierarchy

The ordered importance of content, shown through intentional contrast choices.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Alignment Creates Order