🎯 Learning Intention

I will explore how color choices affect tone and usability in web design.

✅ Success Criteria

• I can explain how color impacts a site’s tone.
• I can build a 3-color palette using an online tool.
• I can record which colors I plan to use in my Google Site draft and why.

🧭 Agenda

1. Warm-Up (Tech Journal, 5 min):

   “What color best represents your personality? Why?”

2. Mini-Lesson (10 min):

   • Color psychology (blue = trust, red = urgency, green = growth, etc.).
   • Contrast for accessibility (dark text on light background).
   • Show examples of strong vs. weak palettes.

   🎨 Color Psychology & Design Basics

   Color	Tone / Emotion	Common Uses in Design	Watch Out For…
   🔵 Blue	Trust, calm, stability	Banks, tech companies, healthcare	Too much can feel cold or distant
   🔴 Red	Urgency, energy, passion	Sales, warnings, sports	Overuse = stress, danger
   🟢 Green	Growth, balance, health	Eco brands, finance, wellness	Wrong shade → looks “cheap” or dated
   🟡 Yellow	Optimism, warmth, creativity	Kid brands, highlights, attention grabbers	Hard to read on white → low contrast
   🟣 Purple	Creativity, luxury, imagination	Beauty, art, fashion	Dark tones = elegant; neon tones = distracting
   ⚫ Black	Power, sophistication, modern	Luxury brands, tech, fashion	Too much = heavy, unwelcoming
   ⚪ White	Clean, simple, fresh	Minimalist design, health, Apple aesthetic	Risk of feeling empty if not balanced
   🟠 Orange	Friendly, fun, enthusiasm	Food, entertainment, community	Overuse = overwhelming, childish
   🌸 Pink	Playful, compassion, creativity	Fashion, youth, campaigns	Too much = less professional tone
   🪨 Gray	Neutral, balanced, serious	Corporate, background/secondary color	Alone = dull, lifeless

   ---

   ✨ Design Tip:

   • Contrast matters more than color itself — always check if text is easy to read.
   • Limit palette to 2–3 main colors + neutrals for balance.

   Color & Accessibility Basics

   Example	Contrast Level	Why It Matters
   ⚪ White background + ⚫ Black text	✅ High Contrast	Very readable; best for body text
   🟡 Yellow background + ⚪ White text	❌ Low Contrast	Hard to read; strains the eyes
   🔵 Dark blue background + ⚪ White text	✅ High Contrast	Easy to read, professional feel
   🟢 Light green background + 🟡 Yellow text	❌ Low Contrast	Colors blend, reduces legibility
   ⚫ Black background + 🟢 Bright green text	⚠️ Medium Contrast	Retro “hacker” vibe; okay for headings, not paragraphs

   ---

   ✨ Design Tips for Accessibility:

   • Aim for dark text on light backgrounds (or light text on dark).
   • Avoid pairing bright-on-bright (yellow on white) or dark-on-dark (navy on black).
   • Tools like contrast-ratio.com or Chrome’s built-in Lighthouse can check readability.

3. Guided Practice (15 min):

   • Use Coolors.co or Adobe Color to generate palettes.
   • In pairs, test which palettes look balanced vs. chaotic.

4. Independent Work (15 min):

   • In their Google Site Design Document, record:
     • Chosen 3-color palette.
     • Tone it creates.
     • Why it supports usability.

5. Wrap-Up (2–3 min):

   • Exit Ticket (MCQ):

     Which combination improves usability most?

     A) Red text on blue background

     B) Light gray text on white background

     C) Dark text on light background ✅

     D) Neon green text on black background