Principle 1 of 4

Contrast

If two things are not exactly the same, make them very different. A small difference looks like a mistake. A big difference looks intentional.

Key rule: If it's not the same, make it very different.
💡
Why it matters: Our eyes are wired to notice difference. When everything looks the same, the eye doesn't know where to start — so nothing gets remembered. Contrast creates a visual hierarchy: it tells the viewer "look here first, then here, then here."

Example 1 · Event Flyer

School Art Exhibition Poster

Where you see it: class notice boards, school website banners, printed handouts

✗ No contrast

School Art Exhibition

Date: 15 June 2025

Time: 2pm – 5pm

Venue: Hall B

All students welcome. Come and support your classmates!

Contact: Mr Tan

✓ Strong contrast

School
Art Exhibition
15 June 2025 · 2pm – 5pm
Hall B · All students welcome
Support your classmates!
Find out more →
👁 In the bad version, your eye has nowhere to land — everything fights for attention equally. In the good version, the title is huge and bold, the date is small and coloured red, and the body text is dim. You absorb the key info in under two seconds.

Example 2 · Phone UI

Lock Screen

Where you see it: your phone every morning — the time vs. notifications vs. app names

✗ No contrast — equal sizing

9:41
Saturday, 30 May
Messages: 3 new
Instagram: 12 likes

✓ Real phone design — clear hierarchy

9:41
Saturday, 30 May
Messages · 3 new
📱 Apple and Android designers use extreme size contrast: the clock is 10× bigger than the notification text. You glance and instantly know the time — you have to look closer for everything else. That's intentional.

Example 3 · Book Cover

Title vs. Author Name

Where you see it: bookshop shelves, Google Books, library catalogue

✗ Same size — confusing hierarchy

Harry Potter

and the Chamber of Secrets

J.K. Rowling

Fantasy · Ages 9–12

✓ Contrast in size, colour, weight

Harry
Potter
and the chamber of secrets
J.K. Rowling
Fantasy
📚 Notice the three levels: Title → huge & bold, subtitle → small & muted, author → medium. The cover works from across the room because the title has maximum contrast against everything else.

Example 4 · App / Website Buttons

Primary vs. Secondary Button

Where you see it: every website, app, and sign-up form — "Buy Now" vs. "Maybe Later"

✗ Both buttons look the same

Submit Form
Cancel

Which one should you click? Hard to tell — they're almost the same.

✓ One button clearly stands out

Submit Form
Cancel

Immediately clear: Submit is the main action. Cancel is secondary.

🖱 Every app on your phone does this. The primary action is big, coloured, and bold. The secondary action is small and grey. The contrast tells you what the app wants you to do — without any words explaining it.

Example 5 · Website Navigation

Active Page vs. Other Links

Where you see it: every website menu — showing you which page you're currently on

✗ All links look the same

Home About Subjects Contact

You can't tell which page you're on.

✓ Current page stands out

Home About Subjects Contact

You instantly know you're on the Subjects page.

🗺 A highlighted nav item is contrast doing a job: it orients you on the website. Without it, you'd have to read every link to figure out where you are. Good contrast removes that work entirely.

Example 6 · Retail / Shopping

Sale Price vs. Original Price

Where you see it: Lazada, Shopee, NTUC, any sale promotion

✗ Both prices look the same

Was: $49.90

Now: $29.90

✓ Sale price screams for attention

Was $49.90
$29.90
40% OFF
🛍 Retailers make the sale price huge, red, and bold on purpose — it triggers urgency. The original price is crossed out and tiny, making the deal look bigger. This is contrast being used to influence your feelings, not just your eyes.

Interactive

Toggle Contrast On and Off

See how the same content transforms when contrast is applied

Off

School Trip to Science Centre

Date: 20 June · Cost: $12 · Return forms by Friday

Sign up now
✨ Notice three things change at once: background darkens, title grows and turns white, and a coloured call-to-action appears. Each layer of contrast adds visual hierarchy.

🎯 Challenge: Spot It in Real Life

Pick up any printed handout, menu, or notice near you. Ask these questions:

←
Back toOverview
Next principleRepetition →