Contrast
Difference draws the eye. Make the important thing look different from everything around it.
Learn
Contrast means making one thing look clearly different from everything around it. Your eyes cannot help it: they jump straight to whatever looks different. Designers use that jump on purpose.
Four ways to make something different
Size. One big thing among small things wins.
Colour. One bright dot in a grey crowd. Which one did you see first?
Shape. One circle in a row of squares stands out, even in one colour.
Shade. Dark against light is the easiest thing in the world to read.
Contrast has levels
Low contrast. Pale yellow on white almost disappears. Your eyes have to work hard.
Medium contrast. Readable, but nothing special. Good for quiet details.
High contrast. White on dark navy jumps off the page. Save it for the star.
The golden rule
If everything is loud, nothing stands out. It is just noise.
One loud voice with quiet helpers: now the message is clear.
Wrong vs right
Seen in the wild
News sites use contrast every day: one red banner against a grey page tells you instantly where to look.
Ferry line adds night service
Commuters crossing after dark will find three extra sailings from next month, the harbour office said on Tuesday.
Library extends weekend hours
Packed reading rooms last term prompted the city to fund longer Saturday openings at all branches.
- 1The red banner is the only bright colour on the page; colour contrast makes it the first thing every visitor sees.
- 2Regular stories stay grey and quiet on purpose. They are made quiet on purpose so the banner can win.
- 3The paper's name is bigger and darker than the navigation next to it; size and shade contrast separate brand from menu.
Practice
Drag the pieces into place