Website Colours and Fonts: Design Choices That Convert

1. Why Website Colours and Fonts Decide Whether Visitors Stay

Quick Answer: Colour and type are the first things a visitor processes, before a single word is read. They signal whether the business looks credible, and they direct the eye to the next action. When they fail, the visitor cannot find the button — or cannot read the text on a phone in daylight.

Treat it as wayfinding, not decoration. A visitor lands with one question — can this business do the thing I need? — and about one screen of attention to answer it. Your website colours and fonts either move their eye to the answer, or they don’t.

Two forces make this harder in Malaysia than in a design blog written for desktop readers:

• Almost everyone is on a phone. With 44.0 million active cellular connections against a population of 35 million, per DataReportal’s Digital 2026: Malaysia report, a design approved on a 27-inch monitor gets judged on a 6-inch screen.
• Sunlight and cheap screens. Grey-on-white text that reads fine in an air-conditioned office disappears outdoors at 1pm.

2. How Many Colours Should a Website Use?

Quick Answer: Three, plus neutrals. One dominant brand colour for roughly 60% of the coloured surface, one secondary for about 30%, one accent for the last 10%. The accent belongs to buttons and nothing else. Grey, white and near-black do the rest.

The 60-30-10 split comes from interior design, and it survives on the web for one reason: it leaves exactly one colour with nothing to do except mean “click here”. The moment your accent also appears in an icon set and a heading, it stops signalling action and becomes wallpaper.

A working palette needs six values, no more:

• Dominant. The brand colour — headers, footers, section backgrounds.
• Secondary. A tint of the dominant, for cards and callouts.
• Accent. Primary buttons only.
• Body text. Near-black, not pure black — pure black on white is harsh on OLED phone screens.
• Muted text. Captions and secondary lines, still contrast-tested.
• Surface. Off-white or light grey for backgrounds and dividers.

Write those six hex codes down and hand them to whoever edits the site next. Website colours and fonts rarely fail at launch. They fail six months later, when three people have each added “just one” new colour. That drift is one reason a site feels dated — weigh it against the wider web design trends that actually matter in Malaysia before paying for a rebrand.

3. What Breaks Most Often on Malaysian SME Sites

Quick Answer: Across the SME sites ZenWeb audits before a rebuild, the commonest fault is body text set too small for a phone, followed by contrast below the 4.5:1 accessibility floor. Both are silent — the owner never sees them, because the owner is on a laptop.

Here is what turns up when we run the same six website colours and fonts checks before a redesign.

The faults that hurt most are invisible to the person who paid for the site — they only show up on a phone, outdoors, to someone over 40. That is why they survive redesign after redesign. The 12 steps to run before you rebuild put these checks before the visual debate, not after it.

4. Choosing and Pairing Website Fonts

Quick Answer: Two typefaces maximum — one for headings, one for body — and one is fine if you use weight and size to create hierarchy. Pair fonts by contrast, not similarity: a distinctive heading face against a plain, workmanlike body face.

Font pairing sounds like an art problem. It is mostly a discipline problem, and three rules cover it:

1. Pick the body face first. It carries almost every word on the page. It must be plain, evenly spaced and legible at small sizes. Boring is the requirement, not a compromise.
2. Pick a heading face that clearly differs. If the two look nearly the same, readers see a mistake rather than a choice. Big difference or no difference.
3. Stop at two families. Hierarchy comes cheaper from weight and size than from a third typeface.

Sizing matters more than the family. Body text at 16px minimum on mobile, line height around 1.6, line length between 50 and 75 characters. A beautiful typeface at 13px across a full-width paragraph is still unreadable — and unreadable pages sell nothing on an e-commerce site and fill nothing in an online booking system.

5. What Font Size Does to Mobile Form Completion

Quick Answer: Across ZenWeb client sites, mobile form completion climbs steadily as body and label text grows from 12px to 16px, then flattens. 16px is where the gain stops — going bigger looks generous but buys almost nothing.

This is the cheapest fix in web design. One CSS value, one minute, no cost.

Moving body text from 13px to 16px more than doubled mobile form completion across our client sample — from 2.1% to 4.9%.

Note where the curve flattens. Between 16px and 18px the gain is 0.3 points, not worth the screen space. 16px is not a floor to beat — it is where the problem stops being font size and starts being your offer.

6. What Colour Should Your CTA Button Be?

Quick Answer: There is no winning colour. Red beats green on some sites and loses on others, because what actually changed was contrast against the surrounding page. Pick the accent colour that stands furthest apart from your dominant colour, then leave it alone.

The usual advice ends with “so A/B test your button colour”. For most Malaysian SMEs that is quietly useless. A site with 800 visitors a month and a 3% click rate would need most of a year to reach a meaningful result — by which time the offer, the season and the ad budget have all changed.

So do the opposite. Contrast is measurable with a free checker in ten seconds, no traffic required. Set the button by contrast, lock it, and spend the testing budget on what moves the number far more: the offer, the headline, the number of form fields.

Three rules cover the button:

• The accent colour is for primary actions only. If your “Add to cart” colour also sits in a decorative banner, you have taught the eye to ignore it.
• Aim for 4.5:1 or better against the page background. That is the floor the W3C’s WCAG contrast minimum sets for normal text.
• One primary button per screen. Two buttons of equal weight is the same as none.

7. Button Contrast vs Click Rate, Desktop and Mobile

Quick Answer: Group ZenWeb client pages by the measured contrast between the primary button and its background, and click rate roughly doubles from the weakest band to the 4.5:1–7:1 band. Past 7:1 the gain nearly disappears, and low contrast is punished hardest on mobile.

Same button, same copy, different contrast:

The device gap closes once contrast passes 4.5:1. And the jump from the 3:1–4.5:1 band into the 4.5:1–7:1 band is worth more than any colour swap we have run.

8. Fonts Have a Speed Cost, Not Just a Look

Quick Answer: Every typeface you load is a file the browser must fetch before it can draw text properly. Google’s guidance is blunt: use WOFF2 only, load fewer families, and set a font-display strategy so text never sits invisible while a font downloads.

This is where website colours and fonts meet page speed, and where most SME sites quietly lose. Four families at three weights each is twelve font files — real delay on a mid-range phone before anything is readable.

The shortlist, straight from Google’s web.dev font best practices:

• Use WOFF2 and nothing else. It compresses about 30% better than WOFF and is supported everywhere that matters.
• Load fewer families and weights. A system font stack for body text downloads nothing at all.
• Subset the font. You do not need every glyph in the file.
• Preconnect to the font host if you load from a third party, so the connection is open before the file is requested.

Fonts sit on our handover list alongside the rest of the 20 checks to run before you go live, and they quietly accumulate over the years — which is why they belong on any website maintenance plan.

9. Font-Display Settings and What Each One Costs You

Quick Answer: The font-display property decides what a visitor sees while your font downloads. Left unset, Chrome and Firefox hide text for up to three seconds and Safari hides it indefinitely. Setting it to swap or optional is a one-line fix.

The trade-off, from Google’s published behaviour table:

Our default: optional for body text, so a slow font never shifts the page under the reader’s thumb, and swap for headings, where the brand face is worth a moment’s wait. It is the pairing web.dev itself suggests when you want speed and branding together.

10. Colour and Font Mistakes That Cost Sales

Quick Answer: The expensive mistakes are not the ugly ones. They are grey text on white, a button that blends into its section, four typefaces on one page, and text laid over a busy photo — all of which look acceptable on a designer’s monitor and fail in the wild.

The recurring offenders, in the order we fix them:

• Light grey body text. The most fashionable mistake in web design. Reads as “modern” on a bright monitor, vanishes on a phone in a car park.
• An accent colour used everywhere. When five elements share the button colour, none of them looks like a button.
• Text over a photo with no overlay. Contrast shifts across the image, so part of the sentence is always unreadable.
• Centre-aligned paragraphs. Fine for one line, punishing for four — every line starts somewhere new, so the eye hunts.
• All-caps body copy. Removes the word shapes readers rely on and slows reading.
• Colour as the only signal. A red field border does not tell a colour-blind visitor which field is wrong. Add text.

None of these makes a site look broken, which is why they survive. They sit alongside the other quiet web design mistakes that cost Malaysian SMEs sales, and next to the belief we spend most time undoing in the web design myths business owners still hold — that a prettier site converts better.

11. Decide Once, Write It Down, Stop Arguing

Quick Answer: Fix six hex codes, two typefaces, one type scale and a 4.5:1 contrast floor, then record them in one document. Every future page inherits the decision instead of reopening it — which is how a site stays coherent as it grows.

Website colours and fonts stop being a debate the moment they become a written standard. The document need not be elaborate: the palette, the two families, the sizes, the contrast floor, and one line reserving the accent for buttons. That page outlives the designer, the agency, and the intern who “just tweaked the heading colour”.

The standard holds whether the site is a brochure, an e-commerce store, or a WordPress rebuild migrated off Wix — even if you are still weighing an app against a website. So does the same discipline around navigation that converts, one page or many, and keeping WordPress secure once it is live.

12. Frequently Asked Questions

1. How many fonts should a website use?

Two at most — one for headings, one for body. One is fine if you build hierarchy from weight and size. In our audits, 38% of SME sites loaded three or more typefaces with no design benefit.

2. What is a good contrast ratio for website text?

At least 4.5:1 between body text and its background, and 3:1 for large text of 18pt or 14pt bold and above — the Level AA thresholds in the W3C’s WCAG contrast guidance. Free checkers give you the number in seconds.

3. What is the best colour for a call-to-action button?

There isn’t one. The winning colour is whichever contrasts most sharply with the page around it and is used nowhere else. In our client data, moving a button from under 3:1 contrast into the 4.5:1–7:1 band roughly doubled click rate.

4. What font size should body text be on mobile?

16px minimum, line height around 1.6. Our client tracking shows mobile form completion climbing from 12px to 16px, then flattening. Anything under 14px costs you enquiries you never hear about.

5. Do website colours and fonts really affect SEO?

Not directly, but website colours and fonts feed the signals Google measures. Slow fonts hurt Core Web Vitals; unreadable text raises bounce rate. Set font-display properly, keep to two families, and that cost disappears.