← QCE Digital Solutions Unit 2

Visual communication element: 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.

Part of: QCE Digital Solutions Unit 2 — Data-Driven Problems and Solution Requirements — Module 126

Understanding Visual communication element: tone in QCE Digital Solutions Unit 2

What it does: A very dark background (#222222) with white text (#FFFFFF) gives a big difference in tone, which makes the text stand out. Light grey (#AAAAAA) has a lower tone contrast against a white page, so it draws less attention and shows lower importance. Tone is about lightness or darkness. It is separate from the hue (the colour name). A tone difference draws the eye to the key bar. Identical tones give no emphasis. Designers use tone to build depth. Shading on shapes makes them look more solid. Greyscale only changes how light or dark a shade is. Red, green, blue and yellow are different hues.

Common mistakes: 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. A CSS declaration needs a colon between the property and its value. It should be background: #ffffff; to give the page a light tone.

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 Visual communication element: tone to a class →

This module's key terms are also in a printable crossword (Modules 122–139) and word search (Modules 2–139).

Take this worksheet further — free with Cloodit

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

Learning

Duo

Which best describes tone in visual communication?

How light or dark an area isThe name of a colour, such as red or blue

Matches

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.

Applying

Meanings

Term

tone

Meaning

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.

Practice

<style>

Testing

Gaps

color: ;

Check Answer

Spots

3 font-size: 24px;

4 color: #111111;

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 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 ✓

Tone is about lightness or darkness. It is separate from the hue (the colour name).

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

Strong contrast needs a big difference in tone. Light grey on white is too similar, so it is hard to read.

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

Greyscale removes hue and leaves only tone, so it shows whether light and dark differences still work.

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 ✓

A tone difference draws the eye to the key bar. Identical tones give no emphasis.

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

Designers use tone to build depth. Shading on shapes makes them look more solid.

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.

Key Term

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.

Fill in the Blanks

1. background-color: black; color: white;

Hint: Type the light colour name that gives strong tone contrast against the dark background.

2. img { filter: grayscale(100%); }

Hint: Type the CSS filter function that removes colour so only light and dark values remain.

3. background: rgb(200, 200, 200);

Hint: Type the number that keeps this a light grey by matching the other two colour values.

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

Hint: Type the lightness value that gives the lightest possible tone, which is white.

5. .note { opacity: 0.5; }

Hint: Type the CSS property that fades an element to a lighter tone so it stands out less.

Spot the Error

Question 1

A .banner {

B background: #111111;

C font-size: 24px;

D color: #111111;

E }

Line 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.

Question 2

A body {

B background #ffffff;

C color: #222222;

D margin: 0;

E }

Line 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.

Question 3

A img {

B filter: greyscale(100%);

C width: 200px;

D height: auto;

E }

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

Question 4

A .note {

B background: #f0f0f0;

C color: rgb(40, 40, 40;

D padding: 8px;

E }

Line 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.

Question 5

A // Dark heading for emphasis

B h1 {

C color: #000000;

D font-size: 32px;

E }

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

Student with a class code? Join your class →