Before: many medium signals
The claim, price, date, image block, and CTA all use similar emphasis, so the card feels busy but not directed.
Core idea
Contrast is a decision about which difference does work. One element should win through one dominant lever; everything else holds enough value contrast to stay readable.
- Pick one contrast job per piece — headline lift, action clarity, or state feedback. Asking contrast to do all three at once is what produces noisy work.
- The seven levers — value, hue, saturation, size, weight, shape, density — are not interchangeable. Value contrast carries text legibility; hue and saturation alone do not.
- Pick one dominant lever and pair it with a quieter support move (value + scale, size + isolation). Single-lever contrast gets cancelled by anything noisy nearby.
- Contrast is relative. If every element is loud, nothing leads — demoting rank 2 is usually what lets rank 1 land.
Visual example
Give the campaign claim one dominant contrast move.
New drop
Summer print kit
24 editable poster layouts Includes campaign copy prompts
View kit
Before and after
Use contrast to assign jobs, not excitement.
After: one useful signal
The claim carries the strongest contrast, proof points step back, and the CTA stays clear without becoming the first read.
Worked example
Why the improved version works
The headline carries the dominant lever — value contrast paired with scale. The block is the darkest object on a light surface, and it is the largest type on the card. One clear winner.
Supporting proof stays at mid-value, not light grey. Demoting it further would have looked elegant but broken legibility. The CTA uses a controlled accent hue, borrowing weight from the headline above instead of competing with it.
Common mistakes
Watch for these patterns
Discount, headline, and CTA all use the loudest treatment. Equal-strength contrasts cancel — when everything is loud, the eye has no first read.
Saturation is used as a substitute for hierarchy. A vivid colour grabs attention once, but several saturated blocks read as decoration, not direction.
State is encoded by hue alone — colour without a value or weight backup. The cue disappears for colourblind viewers, in grayscale, and at low contrast.
Body text is dropped to a light tint to look refined. Passing the contrast checker by a hair is not the same as legible — body copy needs a real value step from its surface.
Visual comparison
Which card uses one dominant contrast lever?
One card lifts the claim with a single clear lever. The other spreads near-equal contrast across the claim, details, and action.
Select an option to see the design reasoning.
Practice completed
Next lesson
Spacing and Grouping
Use proximity, alignment, and whitespace to make layouts easier to scan.
Small exercise
Diagnose, edit, justify
Compare two campaign cards and decide which one uses contrast for priority. Then identify where a single card is using contrast for decoration instead of communication.