Choosing website colours and fonts comes down to three questions: does the choice fit your brand, can everyone read it, and does it load fast? Start with one main brand colour, build a small palette around it with the 60-30-10 rule, check every text colour against WCAG contrast ratios, and pick no more than two font families. If your site is in Arabic and English, choose fonts that pair well across both scripts. This guide shows you how, step by step.

Key takeaways

Colour psychology is a starting point, not a rule. Your audience, industry and competitors matter more than generic colour meanings.
Use the 60-30-10 rule to balance a neutral base, a secondary colour and one accent reserved for calls to action.
Normal body text needs a contrast ratio of at least 4.5:1 against its background to meet WCAG AA.
Two font families are usually enough: one for headings and one for body text, or a single family with several weights.
For bilingual sites, choose an Arabic font such as Cairo, IBM Plex Sans Arabic, Tajawal or Noto Kufi Arabic that matches the weight and feel of your Latin font.

Why colours and fonts matter more than they seem

Colour and type are the first things visitors register, long before they read your copy. Poor choices create friction: grey text that strains the eyes, buttons that do not look clickable, or Arabic text squeezed next to English. That affects trust and whether people fill in a form or message you on WhatsApp. If you have no brand guide yet, settle these decisions before the build, for example through one of our branding packages, so your website, social media and print match.

Colour psychology: useful, with caveats

Many articles list colour meanings as if they were facts. In practice, associations vary by culture, industry and context. Treat the list below as a set of common tendencies, not guarantees.

Blue suggests trust and stability, so it is common in finance and technology, which can make you look like everyone else.
Green suggests growth and health; it suits food, wellness and sustainability.
Red creates urgency, but too much feels aggressive and clashes with error messages.
Orange and yellow feel friendly; yellow is hard to use for text on white.
Black, charcoal and gold often signal premium positioning.

The caveats

Culture changes meaning. Green carries strong positive and religious associations across much of the Arab world. White can mean purity in one market and mourning in another. Think about where your customers are.
Context beats symbolism. A colour that contrasts strongly with the rest of the page draws the eye, whatever its “meaning”. This is why the button colour debate is mostly about contrast, not about red versus green.
Your competitors matter. Look at the top five competitors in your sector. If they all use navy blue, a distinct colour can help you stand out, as long as it still fits your positioning.
Test rather than assume with real customers or a simple A/B test.

The 60-30-10 rule

Borrowed from interior design, the 60-30-10 rule is a simple way to keep a palette balanced:

60% dominant colour. Usually a neutral: white, off-white, light grey or, for dark designs, a deep charcoal. This covers backgrounds and large areas.
30% secondary colour. Often your main brand colour, used in headers, footers, section backgrounds and icons.
10% accent colour. A contrasting colour reserved for the things you want people to click: buttons, key links and highlights.

The most common mistake is using the accent everywhere. If headings, icons and buttons are all orange, nothing stands out. Keep the accent for actions.

Contrast and accessibility: the WCAG ratios

The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios between text and background. Meeting them helps people with low vision, older users and anyone reading a phone in bright sunlight, which is a daily reality for mobile-heavy audiences in Egypt and the Gulf.

Element	WCAG AA minimum	WCAG AAA (enhanced)	Practical note
Normal body text	4.5:1	7:1	Avoid light grey text on white; it often fails.
Large text (about 24px regular, or about 18.5px bold, and above)	3:1	4.5:1	Applies to big headings, not small captions.
Buttons, form borders, icons (non-text elements)	3:1	Not defined	Input field borders are a frequent failure.
Text on images	Same as above	Same as above	Add a dark overlay or solid panel behind the text.

Check contrast with a free contrast checker or your browser’s developer tools before you approve a design. Also check that colour is not the only way you convey information. An error message should have text and an icon, not just a red border.

How to build a website colour palette, step by step

Start from your logo or brand colour. This is your anchor. If you have no brand yet, choose one colour based on positioning and competitor research.
Choose your neutrals. Pick a background (pure white or a slightly warm or cool off-white), a body text colour (a very dark grey or near-black often reads more softly than pure black) and one or two light greys for borders and section backgrounds.
Pick one accent. It should contrast clearly with both the background and your brand colour. Complementary colours (opposite on the colour wheel) work well.
Create tints and shades. Generate lighter and darker versions of your brand colour for hover states, backgrounds and dividers. A scale of five to nine steps is plenty.
Define functional colours. Success (green), warning (amber), error (red) and information (blue). Keep them distinct from your accent so a “Buy now” button is never mistaken for an error.
Test contrast for every text pairing using the ratios above.
Document it. Write down hex codes and where each colour is used. Your developer can turn these into global colours in WordPress or CSS variables, so future changes take minutes.

Choosing fonts for your website

Serif, sans-serif and display fonts

Sans-serif fonts (such as Inter, Roboto or Open Sans) are clean and highly readable on screens. They are the safe default for body text.
Serif fonts (such as Merriweather or Playfair Display) feel traditional or editorial and work well for headings in law, publishing, hospitality and luxury brands.
Display and script fonts are for logos or very short headings only. Never use them for paragraphs or menus.

Font pairing rules that work

Limit yourself to two families. More than that looks messy and slows the site down.
Contrast or match, do not nearly match. Pair a serif heading with a sans-serif body, or use one family in different weights. Two similar sans-serifs look like a mistake.
Use weight and size for hierarchy. A clear scale (for example body text, then three heading sizes) is better than adding new fonts.
Prefer fonts with several weights. Regular, medium and bold give you flexibility without extra families.

Readability basics

Body text of roughly 16px or larger on desktop and mobile.
Line height of around 1.5 for Latin text and slightly more for Arabic.
Line length of roughly 50 to 75 characters per line on desktop.
Avoid long passages in all capitals, light weights on small text, and justified text that creates uneven gaps.

Arabic fonts and bilingual pairing

Arabic typography has its own needs. Letters connect, many have dots and marks above and below the line, and the text runs right to left. A font that looks fine in English can make Arabic text look cramped or clipped if the Arabic glyphs were an afterthought. These freely available Google Fonts are reliable starting points:

Font	Style	Best for	Pairs well with
Cairo	Modern, slightly rounded sans-serif with Latin included	Corporate sites, eCommerce, general use	Its own Latin set, or Inter and similar sans-serifs
IBM Plex Sans Arabic	Technical, neutral and very legible	B2B, SaaS, engineering, finance	IBM Plex Sans (designed as a matching family)
Tajawal	Light, geometric and contemporary	Lifestyle, fashion, startups, clean layouts	Geometric sans-serifs such as Poppins or Montserrat
Noto Kufi Arabic	Kufi-inspired, structured and bold in headings	Headings, institutional and government-style sites	Noto Sans, or Noto Naskh Arabic for Arabic body text

How to pair Arabic and English fonts

Match visual weight and x-height. At the same font size, Arabic often looks smaller than Latin. You may need to set Arabic text slightly larger so both languages feel equal.
Use a superfamily where possible. IBM Plex and Noto were designed across scripts, so headings and body text look consistent in both languages.
Do not fake Arabic styles. Avoid italics in Arabic, and avoid letter-spacing, which breaks the joins between letters.
Allow more line height. Dots and diacritics need room, so give Arabic paragraphs extra line height.
Check real content. Test with your actual Arabic headings, prices and product names, including numerals, rather than placeholder text.
Build RTL properly. Icons, arrows, menus and form layouts should mirror correctly in the Arabic version. Fonts alone do not make a site RTL-ready.

Web-font performance

Fonts are files your visitors must download. Too many weights or poorly loaded fonts slow the first view of the page and can cause text to jump, which hurts both user experience and Core Web Vitals.

Load only the weights you use. Two or three weights per family is usually enough. Each extra weight is another file.
Self-host in WOFF2 on fast web hosting with caching, and subset to the scripts you need.
Set font-display: swap so text appears immediately in a fallback font, and preload the main body font.
Consider variable fonts, where one file contains a range of weights, and choose similar-looking fallbacks to reduce layout shift.

In Egypt and the Gulf

Design for phones first. Most visitors browse on mobile, often outdoors. Strong contrast and generous text size matter even more.
Plan both languages from day one. A palette and font set chosen only for English often fails in Arabic. Approve the Arabic version of the design, not just the English one.
Make WhatsApp and payment buttons clear. If customers contact you on WhatsApp or pay with Instapay, Fawry or cash on delivery, those buttons and badges need to fit your palette while still standing out.
Keep it affordable to maintain. Global colours and a small font set make later updates cheaper, so plan bilingual typography as part of the build.

Common mistakes to avoid

Light grey body text that fails contrast checks.
An Arabic version that inherits English font settings unchanged.
Text placed directly on busy photos with no overlay.
Choosing colours from personal taste rather than audience, brand and competitors.

Checklist: colours and fonts before you launch

One brand colour, one accent and a set of neutrals, documented with hex codes.
Palette roughly follows 60-30-10, with the accent reserved for actions.
All body text meets 4.5:1 contrast; large text and buttons meet 3:1.
No more than two font families, with a clear size and weight hierarchy.
Body text around 16px or larger, with comfortable line height.
Arabic font chosen, sized and spaced for Arabic, and tested with real content.
RTL layout checked on mobile and desktop.
Only needed font weights loaded, in WOFF2, with font-display: swap.
Colours and fonts set as global styles so they can be changed in one place.

For more on how visual choices affect behaviour, read our guide to UX design fundamentals.

How Imexit can help

Imexit has designed websites for businesses in Egypt, the Gulf and the wider MENA region since 2001, in both Arabic and English. As part of our website design work, we agree a palette and font system with you before development, check contrast, and test the Arabic and English versions on real phones. If your current site needs only a visual refresh, we can tell you that rather than suggest a rebuild. You can browse our portfolio to see different approaches, or request a quote with your brand files and goals.

Frequently asked questions

How many colours should a website use?

Most websites work well with one main brand colour, one accent colour and a set of neutrals for backgrounds, text and borders, plus functional colours for success and error messages. Tints and shades of your brand colour do not count as new colours. If you find yourself adding more, it usually means the hierarchy is unclear rather than that the design needs more colour.

What is the best font for a website?

There is no single best font. For body text, a clean, well-tested sans-serif with several weights is the safest choice because it reads well on screens. The right heading font depends on your brand: modern, traditional, technical or premium. For Arabic and English sites, choose fonts designed to work together, such as IBM Plex Sans and IBM Plex Sans Arabic.

Which Arabic font is best for websites?

Cairo is a dependable all-rounder, IBM Plex Sans Arabic suits technical and corporate sites, Tajawal works for light, modern brands, and Noto Kufi Arabic is strong for headings. The best choice depends on your Latin font and brand tone. Always test with real Arabic content, including numbers and long product names, on a phone screen.

Do colours and fonts affect SEO?

Not directly as ranking signals. They do affect page speed through font files, and they affect how people use your site: whether they can read the text, find buttons and stay on the page. Heavy font loading can hurt Core Web Vitals. Accessible, fast and readable design supports the user experience that good SEO depends on.

How do I check colour contrast?

Use a free online contrast checker or the accessibility panel in your browser’s developer tools. Enter the text colour and background colour, and the tool shows the ratio and whether it passes WCAG AA or AAA. Check body text, links, buttons, form fields and any text placed over images, in both light and dark sections.

Written by Mohamed Kamal, founder of Imexit, building websites and digital marketing for businesses in Egypt and the Gulf since 2001. Last updated: October 2026.