Visual communication element: tone

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which best describes tone in visual communication?

A The name of a colour, such as red or blue

B How light or dark an area is

2. Which text and background pairing uses tone to create strong contrast?

A Near-white text on a dark navy background

B Light grey text on a white background

3. A designer converts a dashboard to greyscale. What does this help them check?

A Whether the tones still separate important items

B Whether the hues are all different colours

4. In a bar chart, you want the most important bar to stand out. Which choice uses tone?

A Make all bars the same mid-grey

B Make it dark and make the other bars light grey

5. Which statement about light and dark values is true?

A Darker areas often look closer and heavier, and lighter areas look further back

B Light and dark values have no effect on depth

Match the Pairs

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

Left column		Right column
1background-color: #000000;		ABoth colours are very dark tones, so the text blends into the background and cannot be read.
2color: rgb(128, 128, 128);		Bbackground-color: #222222; color: #FFFFFF;
3Light text on a dark background creates strong tonal contrast so the text is easy to read.		CSets the darkest possible tone (black) as the background.
4A lighter grey tone can make less important information (like a caption) stand out less than the main content.		DSets a mid-grey, a greyscale tone halfway between black and white.
5background-color: #EEEEEE; color: #FFFFFF;		EThe text and the background are both very light tones, so there is almost no contrast and the text is hard to read.
6background-color: #333333; color: #222222;		Fcolor: #AAAAAA;

Definitions

tone

Fill in the Blanks

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

background-color: black; color: _____;

img { filter: _________(100%); }

background: rgb(200, 200, ___);

color: hsl(0, 0%, ____);

.note { _______: 0.5; }

Spot the Error

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

Question 1

A .banner {

B background: #111111;

C font-size: 24px;

D color: #111111;

E }

Question 2

A body {

B background #ffffff;

C color: #222222;

D margin: 0;

E }

Question 3

A img {

B filter: greyscale(100%);

C width: 200px;

D height: auto;

E }

Question 4

A .note {

B background: #f0f0f0;

C color: rgb(40, 40, 40;

D padding: 8px;

E }

Question 5

A // Dark heading for emphasis

B h1 {

C color: #000000;

D font-size: 32px;

E }

Answer Key

Visual communication element: tone

Section A: Quick Questions

B — How light or dark an area is

A — Near-white text on a dark navy background

A — Whether the tones still separate important items

B — Make it dark and make the other bars light grey

A — Darker areas often look closer and heavier, and lighter areas look further back

Section B: Match the Pairs

background-color: #000000; → Sets the darkest possible tone (black) as the background.

color: rgb(128, 128, 128); → Sets a mid-grey, a greyscale tone halfway between black and white.

Light text on a dark background creates strong tonal contrast so the text is easy to read. → background-color: #222222; color: #FFFFFF;

A lighter grey tone can make less important information (like a caption) stand out less than the main content. → color: #AAAAAA;

background-color: #EEEEEE; color: #FFFFFF; → The text and the background are both very light tones, so there is almost no contrast and the text is hard to read.

background-color: #333333; color: #222222; → Both colours are very dark tones, so the text blends into the background and cannot be read.

Section C: Definitions

tone — Tone is how light or dark an area is. Designers use it to create contrast, depth and emphasis, for example light text on a dark background, or a greyscale shade to show importance.

Section D: Fill in the Blanks

background-color: black;
color: white;

img { filter: grayscale(100%); }

background: rgb(200, 200, 200);

color: hsl(0, 0%, 100%);

.note { opacity: 0.5; }

Section E: Spot the Error

D — The text and background are both very dark, so there is almost no tone contrast and the text is hard to read. The text should use a light tone such as #eeeeee on the dark background.

B — A CSS declaration needs a colon between the property and its value. It should be background: #ffffff; to give the page a light tone.

B — CSS uses the spelling grayscale, not greyscale. grayscale(100%) removes colour so only light and dark tones remain.

C — The rgb( function is missing its closing bracket. It should be rgb(40, 40, 40); this gives a dark grey text tone on a light grey background.

A — CSS does not use // for comments. A comment must be written as /* Dark heading for emphasis */.