Information checked: 21 July 2026.
Colour and typography should make content easier to recognise, read and navigate. Brand personality is important, but it cannot depend on low contrast, text inside images or a type system that breaks when users zoom.
In brief: Define a small accessible system and test it with real content and real devices.
Build a functional colour system
| Role | Requirement |
|---|---|
| Text | Readable contrast against every intended background |
| Links | Recognisable without relying on colour alone |
| Actions | Clear normal, hover, focus, active and disabled states |
| Status | Text or symbols in addition to red, amber or green |
| Surfaces | Enough separation without excessive visual noise |
Choose typography for reading
- Use a body size that remains comfortable on mobile.
- Keep line length moderate and line height generous.
- Use heading levels to express structure, not visual size alone.
- Limit font weights and webfont files.
- Provide robust fallbacks and avoid hiding text while fonts load.
Test resilience
Test 200% text resizing, browser zoom, long headings, translated or user-generated content, high-contrast settings and missing webfonts. No control or essential text should overlap or disappear.
Before you publish
Document the approved text, background, link, focus and status combinations, then test every component rather than checking only a palette sample.
Typical failure to avoid
A brand palette may pass a design presentation but fail in real components: pale text over photography, focus states that disappear or links distinguishable only by colour. Font choices can also create layout shifts and unreadable interfaces when a webfont does not load.
What the business should retain
- Approved colour-pair matrix
- Typography scale and fallback stack
- Component focus and state rules
- Contrast and zoom test results
- Owner for future brand changes
Start with this
Inventory every text/background pair and interactive state used in the real site. Test the components, not only the hexadecimal colours in isolation.
Sources and date checked
This practical guidance was checked against the following primary sources. Date checked: 21 July 2026.
Keep the decision under your control
Retain the relevant accounts, source material, supplier terms and recovery information. Recheck changing prices, interfaces and rules before acting.