← VCE Software Development U3O2

UI design principle: contrast

The difference in colour, size or brightness that makes key elements and text stand out from their background so they are easy to read and notice.

Part of: VCE Software Development - U3O2 - Analysis and Design — Module 114, VCE Data Analytics - U3O2 - Analysis and Design — Module 129, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 49, QCE Digital Solutions Unit 2 — Data-Driven Problems and Solution Requirements — Module 132, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 146

Understanding UI design principle: contrast in VCE Software Development U3O2

What it does: A bold orange button with white text stands out from a plain page, drawing the user's attention to the key action. Dark grey text on white has a strong brightness difference, so body text is easy to read. Contrast uses differences in colour, size or brightness to draw attention to what matters and keep text readable. A difference in size shows which content is more important. Using the same size removes that contrast. Using a contrasting colour for an important message helps users notice it quickly. When a control and its background are similar in colour and brightness, the control blends in. A dark button on a pale background stands out.

Common mistakes: Near-white text on a white background has almost no contrast, so the text is hard to read. Use dark text such as #222222 on the white background. A 4px font is far too small to read, even with good colours. Readable text needs a suitable size such as 18px.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add UI design principle: contrast to a class →

This module's key terms are also in a printable crossword (Modules 110–119) and word search (Modules 86–119).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which text and background combination has stronger contrast?

Black text on a white backgroundLight grey text on a white background

Matches

p { color: yellow; background: white; }

↓

Yellow text on a white background has very low contrast, so the text is hard to read. Use a darker text colour such as black or dark blue.

Applying

Meanings

Term

contrast

Meaning

The difference in colour, size or brightness that makes key elements and text stand out from their background so they are easy to read and notice.

Practice

<style>

Testing

Gaps

: #ffffff;

Check Answer

Spots

1.card {

2 color: #FAFAFA;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which text and background combination has stronger contrast?

A. Black text on a white background ✓

B. Light grey text on a white background

Dark text on a light background gives a large difference in brightness, so the text is easy to read. Light grey on white is hard to see.

2. What is the main purpose of contrast in a user interface?

A. To make important elements and text stand out so they are easy to read and notice ✓

B. To make every element on the screen look exactly the same

Contrast uses differences in colour, size or brightness to draw attention to what matters and keep text readable.

3. A designer wants the Submit button to be noticed first. Which choice uses contrast to highlight it?

A. Give it the same colour as the page background

B. Give it a bright colour that differs from the background and other buttons ✓

A button that differs in colour or brightness from its surroundings stands out as the key control. Matching the background hides it.

4. Which statement about contrast and readability is correct?

A. Low contrast between text and background makes text easier to read

B. Low contrast between text and background makes text harder to read ✓

The smaller the difference in brightness or colour between text and background, the harder the text is to read, especially for users with vision impairments.

5. Which text and background colour pairing is the poorest choice for readability?

A. Yellow text on a white background ✓

B. Dark blue text on a white background

Yellow and white are both bright, so there is very little difference in brightness. Dark blue on white has strong contrast.

Match the Pairs

color: #FFFFFF; background: #000000; → High contrast between text and background, so the text is easy to read

color: #999999; background: #AAAAAA; → Low contrast between text and background, so the text is hard to read

Highlighting a key control: the main Submit button uses a bright colour that stands out from the page → button.submit { background: #FF6600; color: #FFFFFF; }

Readability: dark text is placed on a light background so body text is clear → body { color: #222222; background: #FFFFFF; }

p { color: yellow; background: white; } → Yellow text on a white background has very low contrast, so the text is hard to read. Use a darker text colour such as black or dark blue.

.delete-btn { background: #DDDDDD; } .page { background: #DDDDDD; } → The key button is the same colour as the page, so it does not stand out. Give it a contrasting colour such as red.

Key Term

contrast

The difference in colour, size or brightness that makes key elements and text stand out from their background so they are easy to read and notice.

Fill in the Blanks

1. body { background-color: #ffffff; color: #222222; }

Hint: Type the CSS property that sets the page's background colour, which pairs with the dark text colour.

2. .button { background-color: #003366; color: #ffffff; }

Hint: Type the CSS property that sets the text colour so the label contrasts with the dark button.

3. .submit { background-color: orange; font-weight: bold; }

Hint: Type the font-weight keyword that makes the key button's text heavier so it stands out.

4. .banner { background-color: black; color: white; }

Hint: Type the colour name that gives the strongest contrast against a black background.

5. h1 { font-size: 32px; color: #111111; }

Hint: Type the CSS property that controls text size, so the heading stands out through size contrast.

Spot the Error

Question 1

A .card {

B color: #FAFAFA;

C background: #FFFFFF;

D }

Line B — Near-white text on a white background has almost no contrast, so the text is hard to read. Use dark text such as #222222 on the white background.

Question 2

A .btn-save {

B background: #0050C8;

C color: #FFFFFF;

D font-size: 4px;

E }

Line D — A 4px font is far too small to read, even with good colours. Readable text needs a suitable size such as 18px.

Question 3

A body { background: #EEEEEE; }

B p { color: #F0F0F0; }

C h1 { color: #FFFFFF; }

Line A — The text is light, so a light grey background gives poor contrast and the text almost disappears. Light text needs a dark background such as #101010.

Question 4

A .submit {

B background: #E65100;

C color: #FF8A50;

D }

Line C — Light orange text on a dark orange button is too similar in brightness, so the label is hard to read. Use white (#FFFFFF) text so the key control stands out.

Question 5

A SET page background to white

B SET Buy button fill to dark blue

C SET Buy button text to blue

Line C — Blue text on a dark blue button blends in, so the key control's label is lost. The text should be white to contrast with the dark fill.

Student with a class code? Join your class →