Skip to content
Workshopy.io
Join a classSign inStart free
  • Official
  • Beginner
  • English
  • About 60 min
  • 8 steps · 2 quizzes

Color & Contrast for Screens — Pick Colours Everyone Can Read

A hands-on lesson about colour on screens, for anyone who makes slides, documents, apps or websites.

Start learningSee the steps
  • Free
  • No account needed
  • Stop any time, pick up where you left off
0 comments
Workshopy.io

WorkshopyOfficial

28 lessons · used by 2 teachers

For teachers

Teaching this? Run it live with your class.

  • Students join with a code — no accounts
  • See who’s done and who’s stuck, step by step
  • It’s your copy — change anything before class
Use this lesson

Sign in to copy it to your workspace. It’s free.

Your path

8 steps · 2 quizzes · about 60 minutes · open any step

  1. Screens mix lightStart hereEvery pixel on your screen is three tiny lights: red, green and blue. Turn them up and down, and their light adds together. Try it: move the sliders, then press the buttons.InteractiveHands-on · 6 min
  2. Every colour is three numbersA screen colour is three brightness values, 0–255 each. Written in hex, each value takes two digits: #FF6347 is red 255, green 99, blue 71. Try it: move the sliders, pick an example, or type a hex code.InteractiveHands-on · 6 min
  3. HSL: colour the way people thinkRGB is how screens think. People think in hue (which colour), saturation (how vivid) and lightness (how light or dark). That's HSL — the same colour, described another way. Try it: drag around the wheel.InteractiveHands-on · 6 min
  4. Colours that go togetherThe colour wheel gives you ready-made harmonies: simple rules for picking colours that look like they belong together. Try it: drag the big handle to choose a base hue, then switch between the four schemes and watch the card repaint.InteractiveHands-on · 6 min
  5. Check: mixing and describing colourQuiz · 4 questions
  6. Contrast: can people read it?Choosing colours is taste; contrast isn't. The Web Content Accessibility Guidelines (WCAG) measure it as a ratio from 1:1 (none) to 21:1 (black on white), using each colour's relative luminance — how bright it looks to the eye.InteractiveHands-on · 6 min
  7. Don't rely on colour aloneNot everyone tells colours apart the same way. Red–green colour-vision deficiency is the most common kind: roughly 1 in 12 men and 1 in 200 women of Northern European descent have some form of it. Try it: switch between the vision types.InteractiveHands-on · 6 min
  8. Dark mode isn't "invert"A dark theme is a second design, not a filter over the first one. Try it: compare the three versions. In Dark, designed, try the two switches.InteractiveHands-on · 6 min
  9. Build your palettePut it all together: four colours, five checks, one CSS snippet. Try it: start from Too pale and press Fix until everything passes. Then try your own colours.InteractiveHands-on · 6 min
  10. Final checkQuiz · 6 questions

Comments 0

You’ll sign in with Google before it’s posted.Comments are public — don’t name your students.
0 / 1,500

No comments yet. Be the first to say how it went.

Using it

Workshopy shares this lesson under CC BY 4.0. Anyone may use and change it, with credit to you. Anyone can learn it here, free. A copy in your workspace is yours to change and run live; your students never need an account.

Versions

  1. 1

    Version 1Current

    · First published

Copies are made from the current version. A copy you already have doesn’t change.

More from Workshopy

All 28 lessons