Stage 2 · Lesson 4 of 7
Colour and contrast
Start your with neutrals: a range of greys for text, borders and backgrounds. Add one primary colour for actions. Then add , which carry a meaning: success, warning and error.
Each colour needs several shades, so you get light backgrounds and strong text in the same hue. Contrast is not optional. The compares how light the text is with how light its background is.
WCAG, the main accessibility standard, asks for at least 4.5 to 1 for normal text. Large text needs at least 3 to 1, and so do interface parts such as input borders and icons. Never let carry meaning; add an icon or text to errors. The accessibility stage later shows you how to test contrast properly.
Common trappicking colours that look fine on your bright laptop screen and fail contrast in sunlight on a budget phone.
A question to check yourself, an AI practice session and 2 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeMaterial Design 3
Google
Free, detailed foundations on layout, colour roles and type scales from a system used by millions of apps
- BookPaidRefactoring UI
Adam Wathan and Steve Schoger · About $99
Paid, practical visual design tactics explained for people without a design background
Practise
Keep handy
Also worth your time
How size, colour, contrast and spacing create reading order, with examples