Picking colours for your website isn’t about what looks pretty in your brand guidelines. It’s about what makes people take action.
I’ve seen Sydney businesses lose 20% to 40% of potential conversions simply because their colour choices made buttons invisible, text unreadable, or the entire site feel wrong for their industry. On the flip side, I’ve watched conversion rates jump 30% or more after strategic colour changes.
Colour psychology is real, but it’s not magic. You can’t slap some blue on your website and expect trust to appear. What matters is contrast, readability, industry context, and testing. Let’s break down exactly how to choose website colours that actually drive conversions.
Why Colour Choice Matters for Conversions
Colour affects user behaviour in measurable ways. Research from the University of Winnipeg found that 62% to 90% of snap judgements about products are based on colour alone. For websites, you’ve got about 50 milliseconds before a visitor forms an initial impression.
But here’s what most business owners get wrong: they think colour psychology works in isolation. “Red creates urgency, so I’ll make everything red!” That’s not how it works.
Colour impact depends on context, contrast, and cultural associations. A bright red CTA button might perform brilliantly on a white background for a sale campaign, but terrible on a healthcare website where red signals danger or emergency.
Let me show you what actually matters.
Contrast Ratios: The Most Important Number You’re Ignoring
Before we talk about colour psychology or brand consistency, let’s talk about whether people can actually read your website.
The Web Content Accessibility Guidelines (WCAG) set specific contrast ratio requirements for text and interactive elements. These aren’t suggestions. They’re the difference between readable text and eye-straining garbage.
The Contrast Ratio Standards
Contrast ratios range from 1:1 (white text on white background, completely invisible) to 21:1 (black text on white background, maximum contrast).
WCAG 2.1 Level AA requires:
- 4.5:1 minimum for normal text (under 18pt or 14pt bold)
- 3:1 minimum for large text (18pt and larger, or 14pt bold and larger)
- 3:1 minimum for interactive elements (buttons, form fields, icons)
For Level AAA (enhanced contrast):
- 7:1 minimum for normal text
- 4.5:1 minimum for large text
I audited a Bondi fitness studio’s website that used light grey text (#CCCCCC) on a white background (#FFFFFF). The contrast ratio? A pathetic 1.6:1. Visitors literally couldn’t read half their content without squinting. Their bounce rate sat at 73%.
We changed the body text to dark grey (#333333), giving us a contrast ratio of 12.6:1. Bounce rate dropped to 51% within two weeks. Same content, just readable.
How to Check Your Contrast Ratios
Use WebAIM’s Contrast Checker (webaim.org/resources/contrastchecker). Enter your text colour and background colour, and it’ll tell you immediately if you pass WCAG standards.
For example:
- White text (#FFFFFF) on navy blue (#003366) = 10.4:1 (passes AAA)
- Light blue text (#66B3FF) on white (#FFFFFF) = 2.5:1 (fails, too low)
- Dark blue text (#003D82) on white (#FFFFFF) = 8.2:1 (passes AAA)
Don’t guess. Test every text colour combination on your site. Your eyes might adapt to low contrast, but your visitors’ won’t. They’ll just leave.
Colour Psychology: What Actually Works (And What’s Nonsense)
Let’s clear up some myths about colour psychology before we get into what actually matters.
Myth: Blue makes people trust you.
Reality: Blue is associated with trust in Western cultures because banks, tech companies, and institutions use it. But that doesn’t mean slapping blue on your website automatically creates trust.
Myth: Red creates urgency and drives action.
Reality: Red does grab attention, but context matters. Red “Buy Now” buttons work well in retail. Red CTA buttons on medical or financial sites can signal danger or error.
Myth: Green is always good for environmental or health brands.
Reality: Green works when it reinforces existing associations. But a financial services firm using green might just look like a bank.
What the Research Actually Shows
A study by Satyendra Singh found that it takes just 90 seconds for people to make a subconscious judgement about a product, and 62% to 90% of that assessment is based on colour alone. But here’s the critical part: the impact depends on how appropriate the colour feels for the product or service.
Colours work through association, not magic. Financial services use blue because it’s become associated with stability and trust. Health brands use green and blue because we associate those colours with nature, cleanliness, and calm. Retail brands use red and orange because those colours create energy and grab attention.
Industry-Appropriate Colour Schemes
Here’s what typically works for Australian businesses:
Professional Services (Accounting, Legal, Consulting):
Primary: Navy blue (#002D62), charcoal (#333333), deep grey (#4A4A4A)
Accent: Muted gold (#C5A572), teal (#008B8B), burgundy (#800020)
Why: Conveys professionalism, trust, established expertise
Healthcare and Wellness:
Primary: Soft blue (#4A90E2), sage green (#87AE73), clean white (#FFFFFF)
Accent: Warm orange (#E67E22), light purple (#9B59B6)
Why: Suggests calm, health, cleanliness, care
Creative Industries (Design, Marketing, Photography):
Primary: Black (#000000), white (#FFFFFF), bold accent of choice
Accent: Vibrant coral (#FF6B6B), electric blue (#0066FF), bright yellow (#FFD700)
Why: Clean canvas that lets work stand out, with bold pops of creativity
Retail and E-commerce:
Primary: Depends on brand personality
Accent: High-contrast colours for CTAs (orange #FF6600, red #DC143C, bright green #00C853)
Why: Grabs attention, creates urgency, drives clicks
Technology and SaaS:
Primary: Blue (#0066CC), purple (#6C3483), modern grey (#34495E)
Accent: Bright blue (#00B8D4), neon green (#00E676), vibrant purple (#9C27B0)
Why: Signals innovation, forward-thinking, digital expertise
These aren’t rules, they’re patterns. A legal firm could absolutely use warm orange as an accent colour to signal approachability. A tech startup could use green to emphasise sustainability. But you’re working against expectations, so you’d better have a good reason.
CTA Button Colours: What Actually Converts
Your call-to-action buttons are where colour choice directly impacts revenue. Get this wrong and you’re leaving money on the table.
HubSpot ran a famous A/B test comparing a green CTA button versus a red one. Red won by 21%. But before you rush to make all your buttons red, understand why it won: contrast.
The rest of the page used green accent colours. The red button stood out because it was different. If the page had used red accents, the green button probably would have won.
The Real Rules for CTA Button Colours
Rule 1: High contrast with the background
Your button needs to pop. If your page background is white, a pale blue button (#ADD8E6) will disappear. A bold blue (#0066CC) or orange (#FF6600) will grab attention. Aim for a minimum 3:1 contrast ratio between button and background, but 4.5:1 or higher is better.
Rule 2: Different from surrounding elements
If your primary brand colour is blue and you use blue throughout your site, don’t make your CTA button blue. It’ll blend in. Use your secondary brand colour or a complementary colour that stands out.
Rule 3: Consistent across your site
Once you pick a CTA button colour, use it everywhere for primary actions. This trains visitors: “Orange button means take action.” Don’t confuse them by using orange on one page, green on another, and red somewhere else.
CTA Colours That Typically Perform Well
Based on testing across thousands of websites:
- Orange (#FF6600, #E67E22): High visibility, friendly, energetic. Works well for most industries. Contrasts strongly with blue or white backgrounds.
- Red (#DC143C, #E74C3C): Maximum attention, creates urgency. Best for sales, promotions, time-sensitive offers. Can feel aggressive if overused.
- Green (#00C853, #27AE60): Positive action, “go” association. Works well for “Get Started,” “Sign Up,” “Download” actions. May lack urgency.
- Bright Blue (#0066FF, #3498DB): Clean, trustworthy, modern. Good for professional services. Can lack contrast on white backgrounds.
- Purple (#9C27B0, #8E44AD): Creative, premium, unique. Less common, so stands out. Works for creative or luxury brands.
A Sydney e-commerce store selling outdoor gear had forest green CTAs (#228B22) on a background that used green and brown earth tones. Their add-to-cart click rate was 2.1%. We changed the CTA colour to bright orange (#FF6600), and the click rate jumped to 3.4%. That’s a 62% increase from one colour change.
Common Colour Mistakes Australian Businesses Make
After auditing hundreds of Sydney business websites, I see the same colour mistakes repeatedly.
Mistake 1: Low Contrast Everything
Someone decides grey on grey looks “sophisticated.” It looks unreadable. I see this constantly with architecture and design firms trying to look minimalist. Your website needs to function before it looks cool.
Mistake 2: Using Brand Colours Everywhere
Your brand guidelines say your colours are navy and gold. Great. But that doesn’t mean every single element on your website must be navy or gold. You need contrast and visual hierarchy. White, black, and greys are your friends.
A Mosman real estate agency had this problem. Navy background, gold text, navy buttons with gold borders. Everything blurred together. We kept navy as the primary colour but added white backgrounds, black text, and a bright coral (#FF6B6B) for CTAs. Suddenly the site was readable and conversions improved by 47%.
Mistake 3: Too Many Colours
More colours don’t make your site more interesting. They make it chaotic. Stick to three to five colours maximum:
- One primary brand colour
- One secondary/accent colour
- Neutral colours (black, white, grey) for text and backgrounds
- One high-contrast colour for CTAs (can be the same as accent)
If you’re using seven different colours on your homepage, you don’t have a colour scheme. You have a mess.
Mistake 4: Following Trends Over Function
Gradient backgrounds look trendy. So do ultra-bright neon colours. But if your gradient makes text unreadable or your neon colour scheme gives people headaches, you’ve prioritised style over function.
Design trends come and go. Readability and usability are permanent.
Mistake 5: Not Testing on Actual Devices
Colours look different on different screens. That beautiful coral that looks perfect on your calibrated Mac might look washed out on a cheap Android phone or oversaturated on an older Windows monitor.
Test your colour scheme on multiple devices: desktop monitors, laptops, tablets, phones. Check it in different lighting conditions. If your colours only work in ideal conditions, they don’t work.
How to Build Your Website Colour Palette
Here’s a practical process for choosing colours that actually work:
Step 1: Start With Your Primary Brand Colour
If you already have an established brand colour, start there. If you’re building from scratch, choose a primary colour that fits your industry and brand personality. Use the industry guidelines above as a starting point.
Example: A Sydney consulting firm might choose navy blue (#003366) as their primary colour.
Step 2: Add Neutral Colours
You’ll need these for backgrounds, text, and creating visual breathing room:
- White: #FFFFFF for clean backgrounds
- Off-white: #F8F9FA for subtle background variation
- Light grey: #E9ECEF for borders and dividers
- Medium grey: #6C757D for secondary text
- Dark grey: #343A40 for primary text (better than pure black)
- Black: #000000 for maximum contrast when needed
Step 3: Choose a High-Contrast CTA Colour
This is your “take action” colour. It needs to stand out from everything else.
For our navy blue consulting firm example, orange (#FF6600) would create strong contrast. So would bright green (#00C853) or coral (#FF6B6B).
Test your choice: place your CTA colour next to your primary colour. Does it pop? Can you instantly tell which is the action button? If not, pick a different option.
Step 4: Add One Accent Colour (Optional)
An accent colour adds visual interest without creating chaos. This might be a lighter or darker shade of your primary colour, or a complementary colour.
For the navy example, a muted gold (#C5A572) could work as an accent for highlighting important information or creating subtle visual interest.
Step 5: Test Contrast Ratios
Use WebAIM’s Contrast Checker to verify every text colour combination meets WCAG standards. This includes:
- Body text on main background (aim for 7:1 or higher)
- Heading text on main background (minimum 4.5:1)
- Button text on button background (minimum 4.5:1)
- Link text on background (minimum 4.5:1)
If any combination fails, adjust the colours until they pass.
Step 6: Create a Colour Specification Document
Document your exact colour values in hex codes and RGB values. This ensures consistency across your website, print materials, and anywhere else you use your brand.
Example palette for our consulting firm:
- Primary: Navy Blue #003366 (RGB: 0, 51, 102)
- CTA: Orange #FF6600 (RGB: 255, 102, 0)
- Accent: Gold #C5A572 (RGB: 197, 165, 114)
- Background: White #FFFFFF (RGB: 255, 255, 255)
- Text: Dark Grey #343A40 (RGB: 52, 58, 64)
- Secondary Text: Medium Grey #6C757D (RGB: 108, 117, 125)
Testing Your Colour Choices
Don’t assume your colour choices work. Test them.
The easiest way? A/B testing. Most website platforms or tools like Google Optimize let you test two versions of a page to see which performs better.
What to Test
CTA button colour: Try two or three high-contrast options and measure click-through rates. A difference of 15% to 30% is common between poorly chosen and well-chosen button colours.
Background colour: White versus off-white versus light grey. This affects readability and user comfort. Track bounce rate and time on page.
Text colour: If you’re using anything other than dark grey or black for body text, test it against a more standard option. Measure reading time and engagement.
Run each test for at least two weeks and ensure you have sufficient traffic (minimum 1,000 visitors per variation) before drawing conclusions.
Accessibility Isn’t Optional
About 8% of men and 0.5% of women have some form of colour blindness. That’s roughly 1 in 12 men and 1 in 200 women. If your website relies solely on colour to convey information, you’re excluding a significant portion of potential customers.
Red-green colour blindness is the most common type. If you’re using red for errors and green for success with no other visual indicators, some users can’t tell the difference.
How to design for colour blindness:
- Use colour plus text labels (not just red/green status indicators)
- Ensure sufficient contrast (the WCAG ratios help here)
- Add icons or symbols in addition to colour coding
- Test your site with colour blindness simulators (tools like Coblis or Chrome extensions)
A North Sydney medical practice used green buttons for “Book Appointment” and red for “Cancel.” Sounds logical, right? But for colour-blind users, both buttons looked similar. After adding icons (a calendar for booking, an X for cancel) and text labels, their booking errors dropped by 34%.
Your Action Plan
Here’s what to do right now:
- Audit your current colour scheme. List every colour used on your website with hex codes.
- Check contrast ratios. Test every text/background combination. Fix anything below 4.5:1 for normal text.
- Evaluate your CTA buttons. Do they stand out? Measure the contrast ratio between button and background. Aim for 4.5:1 minimum.
- Simplify if needed. If you’re using more than five colours, cut back. Keep it simple.
- Test colour-blind simulation. Use a tool like Coblis to see how your site looks to colour-blind users.
- A/B test your primary CTA. Try two different high-contrast colours and measure which converts better.
Colour choice isn’t about personal preference or what looks trendy. It’s about readability, contrast, industry appropriateness, and testing. Get those fundamentals right, and your website colours will support conversions instead of killing them.
Need Expert Help With Your Website Design?
Sites By Design builds websites for Sydney businesses with colour schemes that look professional and drive conversions. We test contrast ratios, ensure accessibility, and choose colours based on what actually works for your industry and audience.
Want a professional review of your current website’s colour scheme? Get in touch for a free audit and specific recommendations to improve your site’s performance.
