BitWithBite
UI/UX Worksheet
🎨 Color Theory
SCORE___ / 20
NameClassDate
After this worksheet you can
Identify complementary/analogous colorsExplain color psychologyApply WCAG contrast minimumsCheck contrast with a plugin📚 Quick Recap
🎯 What you'll practice: Color wheel relationships and WCAG accessibility contrast ratios.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1On a color wheel, complementary colors are:
2Blue and orange are an example of:
3WCAG AA requires this minimum contrast for normal body text:
4The Figma plugin for checking accessibility/contrast is:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Colors next to each other on the wheel are called colors.
6The emotional/cultural association of a color is called color .
7Why do analogous color schemes feel harmonious rather than jarring?
8Give an example of a color and its common psychological association.
9Why is 3:1 contrast acceptable for large text but not normal text?
🚀 Section C · Challenge ● CHALLENGE 5
10Design a 3-color palette for a meditation app. Name each color and explain the psychological reasoning behind your choice.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-C 4-C | 5 = analogous 6 = psychology 7 = Because neighboring colors share visual properties (similar hue), so they blend rather than clash 8 = e.g. red = urgency/energy, blue = trust/calm, green = growth/nature 9 = Because larger text is inherently easier to read, so a slightly lower contrast still remains legible | 10 = Answers vary — e.g. soft blue (calm/trust), sage green (nature/growth), warm cream (comfort/warmth) — all chosen to psychologically reinforce relaxation.