Tool · Colour & Accessibility

Learning Color Palette Studio

Design accessible, visually balanced colour palettes for digital learning experiences.

Good colour choices improve readability, accessibility and the overall learning experience.

1

Design style

2

Primary brand colour

3

Learning context

Palette tokens

Primary
#6D4AFF
Secondary
#68AB2B
Accent
#DF38FA
Success
#29A35C
Warning
#F59F0A
Error
#D32222
Information
#187ADC
Background
#FAF9FA
Surface
#F4F4F6
Card Background
#FFFFFF
Primary Text
#191528
Secondary Text
#5E5681
Border
#DFDDE3

Live eLearning preview

Cognito Academy
General eLearning

Module 3 — Applying What You've Learned

Review the scenario, choose the best response, and receive immediate feedback.

Progress62%
iTip — remember to check for evidence before acting on any single signal.
Knowledge check
Which response best follows the escalation policy?
Notify the manager and log the incidentCorrect
Resolve it privately and move onIncorrect
Wait until the weekly reviewPartial
Module complete

Accessibility (WCAG contrast)

Aa
Normal Text
Contrast 16.96:1
AA PASSAAA PASS
Aa
Secondary Text
Contrast 6.40:1
AA PASSAAA FAIL
Aa
Large Text
Contrast 16.21:1
AA PASSAAA PASS
Aa
Primary Button
Contrast 5.15:1
AA PASSAAA FAIL
Aa
Accent Button
Contrast 3.45:1
AA FAILAAA FAIL
Aa
Links
Contrast 4.91:1
AA PASSAAA FAIL
Aa
Cards
Contrast 17.81:1
AA PASSAAA PASS
Aa
Navigation
Contrast 16.21:1
AA PASSAAA PASS

Learning design insights

  • Avoid using colour as the only way to communicate meaning — pair with icons or text.
  • Reserve the accent colour for learner attention (CTAs, feedback, next steps).
  • Reduce visual competition — use secondary and surface tones for structural UI.
  • Use consistent colours for feedback: success, warning, error should never swap roles.
  • Maintain strong contrast for instructional text (aim for AA at minimum).
  • Avoid decorative colour overload — a good palette uses 3–5 colours 90% of the time.

Cognitive load insights

Visual Clarity
100
Attention Guidance
41
Interface Simplicity
60
Extraneous Load
20

Export

Research foundation

Inspired by
  • • WCAG 2.2
  • • Universal Design for Learning (UDL)
  • • Visual Hierarchy Principles
  • • Cognitive Load Theory
  • • Multimedia Learning
Researchers
  • • Richard Mayer
  • • John Sweller
  • • Don Norman
  • • Ben Shneiderman
Learn more