Readable text and colour choices

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which text will be easiest to read on a white background?

A Black text

B Light yellow text

2. A poster for Year 1 students has tiny writing. What should you change?

A Make the text smaller so more fits

B Make the text larger

3. Which choice shows high contrast?

A White text on a dark blue background

B Light grey text on a white background

4. A screen uses red, green, orange, pink, purple and yellow text all at once. What is the problem?

A Too many colours make it hard to read and look messy

B Nothing, more colours always make it easier to read

5. True or false: Dark blue text on a black background is easy to read.

A True, dark colours go well together

B False, the colours are too similar

Match the Pairs

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

Left column		Right column
1High contrast		ABlack text on a white background
2Large text		BRed, green, blue, yellow and pink words all on one screen
3Good colour choice: dark text on a light background so the words are easy to read		CText and background colours are very different, like black text on white, so the words are easy to read
4Using too many colours makes a screen messy and the words hard to read, so keep to a few colours		DWords big enough that the user can read them easily without squinting
5Light yellow text on a white background		ELow contrast: the text colour is too close to the background colour, so it is hard to read. Use a dark colour like black instead.
6Tiny text size 6 on a button for young users		FThe text is too small to read easily. Make the text larger so everyone can read it.

Definitions

contrast

Fill in the Blanks

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

text colour: black background colour: white contrast: ____

title text size: _____ text colour: black background colour: white

text colour: black background colour: _____ contrast: high

text colour: dark blue background colour: white colours used: ___

text colour: white background colour: black ________: high

Spot the Error

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

Question 1

A Text colour: white

B Background colour: white

C Text size: 20

D Contrast: high

Question 2

A Screen: Reading app

B Background colour: yellow

C Text colour: yellow

Question 3

A Poster: Sports Day

B Background colour: white

C Title size: 6

D Title colour: black

Question 4

A Poster: Book Week

B Colours used: 10

C Background colour: white

D Text colour: black

Question 5

A Screen: Maths game

B Background colour: black

C Text size: 24

D Text colour: dark grey

Answer Key

Readable text and colour choices

Section A: Quick Questions

A — Black text

B — Make the text larger

A — White text on a dark blue background

A — Too many colours make it hard to read and look messy

B — False, the colours are too similar

Section B: Match the Pairs

High contrast → Text and background colours are very different, like black text on white, so the words are easy to read

Large text → Words big enough that the user can read them easily without squinting

Good colour choice: dark text on a light background so the words are easy to read → Black text on a white background

Using too many colours makes a screen messy and the words hard to read, so keep to a few colours → Red, green, blue, yellow and pink words all on one screen

Light yellow text on a white background → Low contrast: the text colour is too close to the background colour, so it is hard to read. Use a dark colour like black instead.

Tiny text size 6 on a button for young users → The text is too small to read easily. Make the text larger so everyone can read it.

Section C: Definitions

contrast — How different the text colour is from the background colour. High contrast, like black text on white, with large enough text, makes words easy to read.

Section D: Fill in the Blanks

text colour: black
background colour: white
contrast: high

title text size: large
text colour: black
background colour: white

text colour: black
background colour: white
contrast: high

text colour: dark blue
background colour: white
colours used: few

text colour: white
background colour: black
contrast: high

Section E: Spot the Error

A — White text on a white background cannot be seen, so there is no contrast. The text colour should be black, which has high contrast with white.

C — Yellow text on a yellow background disappears. The text colour should be black so it stands out from the yellow background.

C — A title size of 6 is far too small to read from a distance. The title needs large text, such as 36.

B — Using 10 colours is too many and makes the poster messy and hard to read. It should use only a few colours, such as 3.

D — Dark grey text on a black background has low contrast and is hard to read. The text should be white, which stands out against black.