UI design principle: contrast

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which text and background combination has stronger contrast?

A Black text on a white background

B Light grey text on a white background

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

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1color: #FFFFFF; background: #000000;		ALow contrast between text and background, so the text is hard to read
2color: #999999; background: #AAAAAA;		BHigh contrast between text and background, so the text is easy to read
3Highlighting a key control: the main Submit button uses a bright colour that stands out from the page		CYellow 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.
4Readability: dark text is placed on a light background so body text is clear		Dbody { color: #222222; background: #FFFFFF; }
5p { color: yellow; background: white; }		EThe key button is the same colour as the page, so it does not stand out. Give it a contrasting colour such as red.
6.delete-btn { background: #DDDDDD; } .page { background: #DDDDDD; }		Fbutton.submit { background: #FF6600; color: #FFFFFF; }

Definitions

contrast

Fill in the Blanks

Complete each line of code by filling in the missing parts.

body { ________________: #ffffff; color: #222222; }

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

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

.banner { background-color: black; color: _____; }

h1 { _________: 32px; color: #111111; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .card {

B color: #FAFAFA;

C background: #FFFFFF;

D }

Question 2

A .btn-save {

B background: #0050C8;

C color: #FFFFFF;

D font-size: 4px;

E }

Question 3

A body { background: #EEEEEE; }

B p { color: #F0F0F0; }

C h1 { color: #FFFFFF; }

Question 4

A .submit {

B background: #E65100;

C color: #FF8A50;

D }

Question 5

A SET page background to white

B SET Buy button fill to dark blue

C SET Buy button text to blue

Answer Key

UI design principle: contrast

Section A: Quick Questions

A — Black text on a white background

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

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

B — Low contrast between text and background makes text harder to read

A — Yellow text on a white background

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

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

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

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

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

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

Section E: Spot the Error

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.

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

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.

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.

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.