Choosing brand colours and fonts that work on screen

A palette that looks good on a mood board can fail on a phone in daylight. Choosing with screens in mind avoids that.

Start with contrast

Text needs enough contrast against its background to be read comfortably, especially for older readers and in bright light. Test each text and background pair with a free contrast checker and aim to meet the WCAG AA level for body text.

Keep the palette small

• One main brand colour used for buttons and key links.
• One accent colour used sparingly.
• A dark colour for text and a light colour for backgrounds.

When every colour is used everywhere, nothing stands out. A restrained palette makes the important actions, like a contact button, easy to spot.

Pick fonts for readability first

Choose a clear body font that stays readable at small sizes, and use a more distinctive font for headings only. Two fonts are enough. Check that they load quickly and have the weights you need.

Test on real devices

Look at the design on a cheap phone, in bright light, and at a smaller size than you expect. If it is still easy to read and the main button is obvious, the choices are working.