Couleurs et typographie d'un site web : le guide complet 2026

La couleur et le texte parlent avant les mots

Avant même de lire une seule phrase, un visiteur a déjà ressenti votre site. La palette de couleurs et la typographie envoient un message instantané : sérieux ou amateur, moderne ou date, chaleureux ou froid. Chez Kolonell, nous voyons trop d'entreprises sous-estimer ce langage silencieux. Un mauvais choix de couleur ou une police illisible peut couler un site techniquement parfait.

Ce guide explique comment choisir une charte couleurs et typographie qui sert votre marque, reste lisible sur tous les écrans, respecte l'accessibilité, et soutient vos conversions.

La psychologie des couleurs, sans esoterisme

Les couleurs déclenchent des associations. Elles ne sont pas universelles, mais en contexte ouest-africain et international, certaines tendances sont stables.

• Bleu : confiance, sérieux, stabilité. Très utilisé par la banque et la santé.
• Vert : croissance, argent, nature, mais aussi technologie et réussite (notre propre vert émeraude chez Kolonell).
• Rouge : urgence, énergie, appétit. Puissant pour un bouton d'action, dangereux en aplat sur de grandes surfaces.
• Orange / jaune : chaleur, accessibilité, optimisme. Très présent dans la culture visuelle africaine.
• Noir / sombre : luxe, elegance, premium.

Choisir une couleur primaire

Votre couleur primaire doit refléter votre secteur et votre personnalité. Une clinique penchera vers le bleu apaisant, un restaurant vers des tons chauds, une fintech vers un vert ou un bleu profond. Le piège est de choisir "sa couleur préférée" plutôt que celle qui sert le message.

Construire une palette qui tient debout

Une palette professionnelle ne se limite pas à une couleur. Nous structurons toujours ainsi.

• Une couleur primaire : l'identité, présente sur les éléments clés.
• Une couleur secondaire : pour varier sans diluer.
• Une couleur d'accent : réservée aux actions importantes (boutons, liens). Rare, donc remarquable.
• Des neutres : gris et blancs pour le texte et les fonds, qui font respirer la page.

La règle 60-30-10

Répartissez les couleurs : 60 % de neutre dominant, 30 % de couleur secondaire, 10 % d'accent. Cet équilibre évite la fatigue visuelle et guide naturellement l'oeil vers les actions importantes.

La typographie : lisibilité avant tout

Une belle police illisible est un mauvais choix. Sur le web africain, où l'on lit souvent sur petit écran et en plein soleil, la lisibilité prime sur l'originalite.

Bonnes pratiques typographiques

• Deux familles maximum : une pour les titres, une pour le corps de texte. Une seule peut suffire.
• Corps de texte à 16 pixels minimum, idéal 18 sur mobile.
• Hauteur de ligne généreuse : 1,5 à 1,6 pour le corps de texte.
• Lignes de 50 à 75 caractères pour un confort de lecture optimal.
• Éviter les polices fantaisie pour le corps de texte ; les réserver, avec parcimonie, aux gros titres.

Polices web et performance

Chaque police chargée pèse sur la vitesse. Nous privilégions les polices système ou Google Fonts optimisées, avec un nombre de graisses limité. Une police de plus, c'est quelques centaines de kilo-octets en plus, donc un site plus lent en 3G.

Cohérence de marque : la règle d'or

La pire faute est l'incohérence. Un bouton bleu ici, vert la, trois polices différentes selon les pages : le visiteur ressent un manque de sérieux, même inconsciemment.

Créer un mini système

Nous documentons toujours : codes couleurs exacts (hexadecimaux), polices, tailles, espacements. Ce petit guide de style garantit que chaque nouvelle page reste cohérente avec la marque, même un an plus tard, même avec un autre prestataire.

Accessibilité : la couleur ne doit jamais exclure

Voir l'article dédié à l'accessibilité, mais deux règles incontournables ici.

• Contraste suffisant entre texte et fond (au moins 4,5:1).
• Ne jamais coder une information uniquement par la couleur. Un graphique, un statut, une erreur doivent rester compréhensibles en niveaux de gris.

Environ 8 % des hommes ont une forme de daltonisme : ignorer ce point, c'est exclure une part réelle de votre audience.

Mini étude de cas : un restaurant à Dakar

Un restaurant nous a confié la refonte de son identité numérique. L'ancienne version melangeait cinq couleurs criardes et deux polices fantaisie, peu lisibles sur mobile. L'image renvoyée était brouillonne, en décalage avec une cuisine raffinée.

Nous avons resserre la palette autour d'un brun chaud, d'un crème et d'un accent dore, avec une typographie serif élégante pour les titres et une sans-serif très lisible pour le corps. Le menu en ligne est devenu lisible en plein soleil sur une terrasse. Résultat : le temps passé sur la page menu a augmenté de 40 %, et les réservations en ligne ont progressé. La perception "restaurant haut de gamme" était enfin cohérente avec la réalité.

À faire / à éviter

• À faire : tester la palette sur un vrai téléphone, en extérieur.
• À faire : limiter le nombre de couleurs et de polices.
• À éviter : le texte sur image sans voile de contraste.
• À éviter : plus de deux familles de polices.
• À éviter : suivre une mode au détriment de la lisibilité.

Outils que nous utilisons

• Coolors et Adobe Color pour générer et tester des palettes.
• Google Fonts pour des polices web performantes.
• WebAIM Contrast Checker pour valider l'accessibilité.
• Figma pour documenter la charte et la partager à l'équipe.

FAQ

Combien de couleurs pour un site web ?

Trois à quatre couleurs actives suffisent : une primaire, une secondaire, un accent, plus des neutres. Trop de couleurs brouillent le message et fatiguent l'oeil.

Quelle police choisir pour un site africain ?

Privilégiez la lisibilité sur petit écran et en plein soleil. Une sans-serif claire pour le corps de texte est un choix sûr. Réservez les polices originales aux gros titres.

La couleur influence-t-elle vraiment les ventes ?

Oui. La couleur d'un bouton d'action, le contraste et la cohérence influencent la confiance et le taux de clic. Une couleur d'accent bien choisie peut sensiblement améliorer les conversions.

Faut-il suivre les tendances couleurs ?

Avec prudence. Une marque doit durer plusieurs années. Mieux vaut une palette intemporelle et cohérente qu'une mode qui paraîtra datée dans deux ans.

Quelle taille de texte minimale ?

16 pixels minimum pour le corps de texte, idéalement 18 sur mobile. En dessous, la lecture devient pénible, surtout sur petit écran.

Comment garder la cohérence visuelle dans le temps ?

Documentez une charte : codes couleurs exacts, polices, tailles. Ce guide de style garantit que chaque nouvelle page respecte l'identité, même des mois plus tard.

Discutons de votre projet. Chez Kolonell, nous construisons des identités visuelles cohérentes, lisibles et accessibles qui servent vos conversions. Écrivez-nous sur WhatsApp +221 77 596 93 33.