Key takeaways
- Start from your logo and brand, then build a small, consistent colour palette.
- Use one or two readable fonts and keep text contrast high.
- Use one strong accent colour for buttons so calls to action stand out.
Colours and fonts are some of the first things visitors notice on your website. They influence whether your business feels premium, friendly, trustworthy or modern. The right choices also make your website easier to read and use.
Start with your brand
Your logo and existing brand materials are the starting point. Your website should feel consistent with your visiting cards, signage, packaging and social media.
Build a simple colour palette
A good website palette usually has:
- A primary colour: your main brand colour.
- An accent colour: used for buttons and important highlights.
- Neutral colours: white, light greys and a dark colour for text.
Using too many colours makes a website look busy and unprofessional.
What colours communicate
- Blue: trust, stability and professionalism, common for finance and technology.
- Green: health, growth and nature.
- Red and orange: energy and urgency, often used in food and retail.
- Purple: creativity and premium quality.
- Black and gold: luxury and elegance.
These are general associations. What matters most is that your colours fit your brand and customers.
Make buttons stand out
Your calls to action should be the easiest things to spot. Use your accent colour consistently for main buttons, and avoid using it for decoration elsewhere.
Keep text readable
Dark text on a light background is easiest to read. Avoid light grey text on white or text over busy images. Good contrast also helps visitors with visual difficulties.
Choosing fonts
- Use one or two font families at most
- Choose clean, readable fonts for body text
- Use a slightly more expressive font for headings if it suits your brand
- Keep body text large enough to read on phones
- Use web fonts that load quickly
Consistency is key
Use the same colours, fonts, button styles and spacing across every page. Consistency makes a website feel professional and trustworthy.
Test on real devices
Colours can look different on phones and laptops. Check your website on several devices and in bright light. Read why mobile first design matters.
A simple way to choose your palette
If you are starting from scratch, this process keeps things simple:
- Pick one primary colour that reflects your brand personality
- Choose an accent colour that contrasts well, for buttons
- Add a dark colour for text, usually a very dark grey or navy
- Use white and one or two light greys for backgrounds
- Test the colours together on a real page before deciding
Use your primary colour in headings, icons and highlights, your accent colour only for key actions, and neutrals everywhere else.
Colour contrast and accessibility
Good contrast helps everyone read comfortably, including people with low vision and anyone using a phone outdoors. Widely used accessibility guidelines recommend a contrast ratio of at least 4.5 to 1 for normal text. Free online contrast checkers make this easy to test. Never rely on colour alone to show meaning, such as red for errors; add text or icons as well.
Font pairing made easy
Pairing fonts well is simpler than it looks:
- Use one font for everything, in different weights, for a clean modern look
- Or pair a distinctive heading font with a simple, readable body font
- Avoid decorative or script fonts for long text
- Keep body text around 16 pixels or larger on mobile
- Use generous line spacing for easy reading
Tip: limit your font weights to the ones you actually use. Each extra weight adds loading time.
Creating a simple style guide
A one page style guide keeps your brand consistent across your website, social media and print. Include your logo versions, colour codes, fonts, button styles and a few examples. Share it with anyone who creates content for your business.
Colours and fonts for different industries
There are no strict rules, but some patterns are common because they match customer expectations:
- Healthcare: calm blues and greens with plenty of white space.
- Finance and law: deep blues, greys and restrained accents.
- Food and hospitality: warm colours and appetising photography.
- Technology: modern blues, purples and clean sans serif fonts.
- Luxury: dark backgrounds, gold or cream accents and elegant headings.
- Education: friendly, bright colours balanced with clear, readable text.
Standing out from competitors can also be valuable, as long as your choices still feel appropriate to your customers.
Testing your choices
Before finalising colours and fonts, test them on a real page with real content. Check readability on a phone in sunlight, ask a few customers for their first impression and make sure buttons stand out. Small adjustments at this stage are easy, while changing a brand later is much harder.
Common colour and font mistakes
- Using too many bright colours on one page
- Light grey text that is hard to read
- Different button colours on every page
- Decorative fonts for long paragraphs
- Tiny text on mobile screens
- Placing text over busy background images without contrast
Fixing these often makes a website look more professional immediately, even without a full redesign.
Frequently asked questions
How many colours should a website use?
Usually one primary colour, one accent colour and a few neutral shades are enough. Too many colours make a website look busy.
Should our website match our logo exactly?
It should feel consistent with your logo, but you can use lighter or darker shades of your brand colours to create a comfortable reading experience.
Are Google Fonts good for business websites?
Yes. They are widely used, free and load reliably. Choose one or two families and only the weights you need.
Does colour affect conversions?
Colour alone does not guarantee results, but a clear, contrasting button colour helps visitors notice your calls to action.
Can we change our website colours later?
Yes. A well built website uses consistent colour settings, so changing colours later is straightforward. Changing your whole brand identity, however, affects much more than the website, so plan carefully.
Design that fits your brand
Good design balances brand identity, readability and conversion. Learn about UX design basics, explore our website design service, or contact us.
Need Help With Your Website?
Talk to Web & Growth for a free consultation and a clear written quote.
