Website Color and Typography: The Complete Guide 2026

Color and type speak before words

Before reading a single sentence, a visitor has already felt your site. The colour palette and typography send an instant message: serious or amateur, modern or dated, warm or cold. At Kolonell, we see too many businesses underestimate this silent language. A bad colour choice or an unreadable font can sink a technically perfect site.

This guide explains how to choose a colour and typography system that serves your brand, stays readable on every screen, respects accessibility, and supports your conversions.

Colour psychology, without the mysticism

Colours trigger associations. They aren't universal, but in a West African and international context, some tendencies are stable.

• Blue: trust, seriousness, stability. Heavily used by banking and healthcare.
• Green: growth, money, nature, but also technology and success (our own emerald green at Kolonell).
• Red: urgency, energy, appetite. Powerful for an action button, dangerous as a flat fill over large areas.
• Orange / yellow: warmth, accessibility, optimism. Very present in African visual culture.
• Black / dark: luxury, elegance, premium.

Choosing a primary colour

Your primary colour must reflect your sector and personality. A clinic leans towards calming blue, a restaurant towards warm tones, a fintech towards green or deep blue. The trap is choosing "your favourite colour" rather than the one that serves the message.

Building a palette that holds up

A professional palette is not a single colour. We always structure it like this.

• One primary colour: the identity, present on key elements.
• One secondary colour: to vary without diluting.
• One accent colour: reserved for important actions (buttons, links). Rare, therefore noticeable.
• Neutrals: greys and whites for text and backgrounds, giving the page room to breathe.

The 60-30-10 rule

Distribute colours: 60% dominant neutral, 30% secondary colour, 10% accent. This balance avoids visual fatigue and naturally guides the eye towards important actions.

Typography: readability above all

A beautiful but unreadable font is a bad choice. On the African web, where people often read on small screens and in bright sun, readability beats originality.

Typographic best practices

• Two font families maximum: one for headings, one for body text. One can be enough.
• Body text at 16 pixels minimum, ideally 18 on mobile.
• Generous line height: 1.5 to 1.6 for body text.
• Lines of 50 to 75 characters for optimal reading comfort.
• Avoid fancy fonts for body text; reserve them, sparingly, for large headings.

Web fonts and performance

Every loaded font weighs on speed. We favour system fonts or optimised Google Fonts, with a limited number of weights. One extra font means a few hundred extra kilobytes, so a slower site on 3G.

Brand consistency: the golden rule

The worst fault is inconsistency. A blue button here, green there, three different fonts across pages: the visitor senses a lack of seriousness, even unconsciously.

Creating a mini system

We always document: exact colour codes (hexadecimal), fonts, sizes, spacing. This small style guide ensures every new page stays consistent with the brand, even a year later, even with another provider.

Accessibility: colour must never exclude

See the dedicated accessibility article, but two non-negotiable rules here.

• Sufficient contrast between text and background (at least 4.5:1).
• Never encode information by colour alone. A chart, a status, an error must stay understandable in greyscale.

About 8% of men have some form of colour blindness: ignoring this excludes a real share of your audience.

Mini case study: a restaurant in Dakar

A restaurant entrusted us with the overhaul of its digital identity. The old version mixed five garish colours and two fancy fonts, barely readable on mobile. The image conveyed was messy, out of step with refined cuisine.

We tightened the palette around a warm brown, a cream and a gold accent, with an elegant serif typeface for headings and a highly readable sans-serif for body text. The online menu became readable in full sun on a terrace. Result: time spent on the menu page rose by 40%, and online bookings grew. The "high-end restaurant" perception was finally consistent with reality.

Do / Don't

• Do: test the palette on a real phone, outdoors.
• Do: limit the number of colours and fonts.
• Don't: text over images without a contrast overlay.
• Don't: more than two font families.
• Don't: follow a trend at the expense of readability.

Tools we use

• Coolors and Adobe Color to generate and test palettes.
• Google Fonts for performant web fonts.
• WebAIM Contrast Checker to validate accessibility.
• Figma to document the system and share it with the team.

FAQ

How many colours for a website?

Three to four active colours are enough: a primary, a secondary, an accent, plus neutrals. Too many colours blur the message and tire the eye.

Which font to choose for an African website?

Favour readability on small screens and in full sun. A clear sans-serif for body text is a safe choice. Reserve original fonts for large headings.

Does colour really influence sales?

Yes. The colour of an action button, contrast and consistency influence trust and click-through rate. A well-chosen accent colour can noticeably improve conversions.

Should I follow colour trends?

Cautiously. A brand must last several years. A timeless, consistent palette is better than a fad that will look dated in two years.

What is the minimum text size?

16 pixels minimum for body text, ideally 18 on mobile. Below that, reading becomes painful, especially on small screens.

How do I keep visual consistency over time?

Document a system: exact colour codes, fonts, sizes. This style guide ensures every new page respects the identity, even months later.

Let's talk about your project. At Kolonell, we build consistent, readable and accessible visual identities that serve your conversions. Message us on WhatsApp +221 77 596 93 33.