Websites

Website design choices: colour, type and motion that help customers

A practical guide to choosing website colours, typography and animation, using readability, accessibility and the customer journey to shape your brief.

By Onside Growth

7 October 20265 min read

Reviewing a website design can quickly become a conversation about favourite colours, fonts and effects. Those preferences matter to your brand. To make useful decisions, connect each choice with something a customer needs to do: understand a service, compare options, read an answer or send an enquiry.

You do not need a designer's vocabulary to give a good brief. Start with the customer's task, show examples of the qualities you like and ask how the proposed design will work on a phone. The following questions draw on guidance from W3C and Google's web.dev.

Give colours a clear job

A useful palette has roles: backgrounds, everyday text, primary actions and supporting accents. Ask your designer to show these colours together on a real page, including a button, a paragraph and an enquiry form. A row of colour swatches cannot show whether people can read the final page.

W3C's contrast guidance addresses the difference between text and its background. Check text over photographs, gradients and coloured buttons as well as ordinary paragraphs. Ask for a measured contrast review of the actual combinations. Logo text and some incidental text have exceptions; your service description and button labels still need attention.

Use visible cues alongside colour when colour carries meaning. An error should explain the problem in words, rather than relying on a red outline. A chart can use labels or patterns to identify its series. These choices help people who cannot distinguish particular colours. Choose a palette that fits your brand, then assess whether it supports these tasks.

Reference: W3C Web Accessibility Initiative — Understanding Success Criterion 1.4.3: Contrast (Minimum)

Reference: W3C Web Accessibility Initiative — Understanding Success Criterion 1.4.1: Use of Color

Choose typography using real content

Compare fonts using the words your website will actually contain. Include a long service heading, a few paragraphs, prices if relevant and the smallest supporting text. A font that looks appealing in a large headline also needs a workable role elsewhere on the page.

Review the page at normal size on a phone, then enlarge the text. Watch for labels that disappear, overlapping lines or buttons that cut off their wording. W3C's text-resize guidance requires support for enlargement without losing content or functionality, with specific exceptions for captions and images of text.

Ask your developer to check text-spacing overrides too. W3C's spacing criterion concerns keeping content usable when readers change spacing; it does not prescribe one default appearance. Include these checks in the brief so readability survives beyond the presentation shown at design approval.

Reference: W3C Web Accessibility Initiative — Understanding Success Criterion 1.4.4: Resize Text

Reference: W3C Web Accessibility Initiative — Understanding Success Criterion 1.4.12: Text Spacing

Make the page's structure easy to follow

Read only the headings. Do they explain what the page offers, who it suits and what the next sections contain? A service page might progress through scope, process, practical questions and the enquiry step. Use that order to guide layout decisions.

W3C explains that headings communicate page organisation and can support navigation through assistive technology. Ask for meaningful headings marked up in a logical structure. Visual size alone does not establish that structure.

In your review, explain which information belongs together and which decision each section supports. That gives the designer a clearer direction than asking to make everything more prominent.

Reference: W3C Web Accessibility Initiative — Headings: Page Structure Tutorial

Use motion with a purpose and a quieter alternative

For every animation, ask what the movement communicates. A transition can help show a change of state; a looping background may simply add visual activity. Decide whether the movement helps the task and whether its meaning remains clear when the effect is reduced.

Google's web.dev explains that some people experience discomfort or motion sickness with effects such as parallax and zooming. Developers can respect the device's reduced-motion preference using prefers-reduced-motion. Ask to review that version of the page as well as the usual presentation, including any third-party content.

W3C's Pause, Stop, Hide criterion requires a way to pause, stop or hide moving, blinking or scrolling information when it starts automatically, lasts more than five seconds and appears alongside other content, unless essential. Automatically updating information alongside other content has a related control requirement without the five-second exception. Shorter effects still deserve a usability review.

Reference: Google web.dev — prefers-reduced-motion: Sometimes less movement is more

Reference: W3C Web Accessibility Initiative — Understanding Success Criterion 2.2.2: Pause, Stop, Hide

Turn preferences into a reviewable design brief

Collect a small set of references and describe the specific qualities you want to explore. For example: clear service headings, generous spacing or a restrained use of motion. Review those ideas with your own content before agreeing the direction.

A practical approval checklist can ask:

Can a new visitor identify the service and the next step?
Are text and action labels readable in their actual colour combinations?
Does meaning remain clear without relying on colour alone?
Do enlarged text and spacing adjustments preserve the content?
Does the reduced-motion version work, with movement controls where required?
Can someone complete the enquiry journey on a phone?

Start with the customer journey

Bring your goals, existing brand material and examples to the discussion. Onside Growth can help connect the design brief with the service content and enquiry journey, then agree which changes deserve priority.