Internship← Design Systems learning pathDesign Systems · Module 3 of 10
Colour and accessibility
Colours must look good and be readable by everyone.
📖 Key ideas
- WCAG asks for at least 4.5:1 contrast for normal text and 3:1 for large text.
- Never use colour alone to show meaning; add icons or text.
- Define colour roles: primary, neutral, success, warning, danger.
- Check palettes with colour-blindness simulators.
- Focus states must be visible for keyboard users.
💡 Real-life example: Like road signs: a stop sign is red, but it also says STOP and has its own shape, so everyone understands it.
Contrast ratioLightness difference between text and background
WCAGWeb accessibility guidelines
Focus stateVisible outline for the active element
Colour roleMeaning like success or danger