How do I choose colours for my website?

Choosing website colours is not just about picking colours you like. Your colours should fit your brand, keep text readable, make important elements easy to notice, and work consistently across the website.

1. Start with your brand colours

If your business already has established brand colours, use them as your starting point.

Check your:

Logo
Brand guidelines
Business cards
Social media profiles
Other marketing materials

If you are creating a new brand, choose colours that suit the type of business and the impression you want to create.

2. Choose a primary colour

Select one main colour to establish the visual identity of the website.

Use it consistently for elements such as:

Key headings or design elements
Navigation accents
Buttons
Links
Other important interface elements

You do not need to use the primary colour everywhere.

3. Add supporting colours

Choose one or two supporting colours that work with your primary colour.

You can also use neutral colours such as white, grey and near-black for backgrounds, text and other areas.

A simple colour system is usually easier to maintain than using many unrelated colours.

4. Make text easy to read

Check the contrast between text and its background.

For example, dark text on a light background is generally easier to read than light grey text on a white background.

For accessibility, the Web Content Accessibility Guidelines (WCAG) provide specific contrast requirements. Normal text should generally have a contrast ratio of at least 4.5:1, while large text should generally have at least 3:1 contrast.

5. Use colour to show importance

Colour can help visitors recognise important actions.

For example:

Primary button: Request a Quote
Secondary action: Learn More

Using a consistent colour for primary actions helps visitors recognise them across different pages.

Do not rely on colour alone to communicate important information, particularly for users who may have difficulty distinguishing colours.

6. Check your colours on different devices

Review the website on phones, tablets and desktop screens.

Check that:

Text remains readable.
Buttons are easy to identify.
Backgrounds do not make content difficult to read.
Colours remain consistent across pages.

Last Updated 2nd February 2026.

Was this article helpful?

Thank you for your feedback!

We appreciate you taking the time to let us know this article was helpful.

We're sorry this article didn't answer your question.

Please let us know what was missing or contact us using the form below.

Quick notice about our knowledge base

We publish our Knowledge Base to help individuals and businesses resolve common issues across websites, advertising platforms, Salesforce and other digital systems.

We regularly review and update our guides, but the platforms, software and services covered can change without notice. As a result, screenshots, settings, features or recommended processes may differ from those available when an article was last reviewed.

The information provided is general guidance and should not be treated as advice specific to your systems or circumstances. UTDS Optimal Choice cannot accept responsibility for errors, data loss, service disruption or other issues resulting from changes made by following these guides.

If you are unsure about any of the steps, particularly where a change could affect live systems, data, tracking or business processes, we recommend speaking to us before making the change. Our team can review your specific setup and provide advice based on the current platform and configuration.

Time for some professional support?

Our team are ready to help. As one of the few digital agencies that is both a registered Salesforce Consulting Partner and Google Partner Agency, UTDS Optimal Choice is expertly positioned to support you across your entire digital landscape.