Couleurs et typographies : construire l'identité de son site
Votre devanture est vert sauge, vos sachets en papier kraft et votre carte imprimée sur un papier crème. Votre site, lui, est noir et orange, parce que le modèle de départ l'était. Une charte graphique de site évite ce décalage : quelques couleurs et deux polices, choisies une fois pour toutes, qui prolongent en ligne l'identité de votre commerce.
Ce que contient la charte graphique d'un site
La charte graphique rassemble les règles visuelles de votre site : les couleurs avec leurs codes, les polices et leurs tailles, l'usage du logo, le style des boutons et des photos. Pour une petite entreprise, une page suffit. Les bases de l'identité visuelle, du logo à ses déclinaisons, sont présentées dans l'article sur le logo et l'identité visuelle ; il s'agit ici de les traduire à l'écran.
Sur un site, chaque couleur reçoit un rôle précis :
- le fond, sur lequel tout repose : souvent un blanc, un blanc cassé ou un crème ;
- le texte, très foncé pour rester lisible, sans être forcément noir ;
- la couleur d'accent, réservée aux boutons et aux liens, pour guider l'œil vers l'action ;
- une couleur secondaire, si besoin, pour les encadrés ou le fond de certaines sections.
Plus l'accent est rare sur la page, plus il attire le regard. Un bouton « Réserver » orange se repère tout de suite sur une page sobre, et disparaît sur une page où tout est orange.
Une palette courte, adaptée à votre métier
Partez de ce qui existe déjà : votre logo, votre devanture, la décoration, vos emballages, les tenues de l'équipe. Le client qui passe de la rue à l'écran doit reconnaître votre maison. Tenez compte des habitudes de votre métier sans les copier : des tons chauds évoquent souvent la cuisine, des tons clairs et apaisés le bien-être, et une touche personnelle vous distinguera de vos voisins.
Trois exemples
- Un bistrot : fond crème, texte brun très foncé, accent rouge brique pour les boutons de réservation, et des photos chaleureuses de la salle et des plats.
- Une boutique de décoration : fond blanc cassé, vert sauge en couleur secondaire repris de la devanture, accent terracotta et police de titre élégante.
- Un plombier indépendant : fond blanc, texte gris anthracite, accent bleu franc pour les boutons d'appel et de devis, et une seule police, nette et robuste.
Notez pour chaque couleur son code HEX, une suite de six caractères précédée d'un dièse, comme #2F5D50, qui permet de retrouver exactement la même teinte sur tous vos supports numériques.
Le contraste avant l'esthétique
Une palette élégante ne sert à rien si le texte se lit mal. Gris clair sur blanc, texte posé directement sur une photo, bouton jaune pâle au texte blanc : ces associations fatiguent les yeux et excluent une partie des visiteurs, en particulier les personnes malvoyantes et celles qui consultent votre site en plein soleil. Des vérificateurs de contraste gratuits indiquent si deux couleurs atteignent le niveau recommandé par les règles d'accessibilité : testez chaque couple de texte et de fond de votre charte.
Ne confiez jamais une information à la couleur seule, et gardez une taille de texte confortable sur mobile. Ces règles sont détaillées dans l'article sur l'accessibilité d'un site internet.
Deux polices : une pour les titres, une pour le texte
La police de titre donne le ton : une police à empattements, ces petits traits qui terminent les lettres, pour une maison traditionnelle, une police arrondie pour un salon de thé, une police géométrique pour un atelier contemporain. Les polices manuscrites ou fantaisie deviennent illisibles en petit : réservez-les aux titres courts. La police de texte doit avant tout se lire sans effort sur un écran, à toutes les tailles.
Deux familles suffisent, et chaque graisse, comme le maigre, le normal ou le gras, ajoute un fichier à charger : limitez-vous à celles que vous utilisez vraiment. La police des titres peut rappeler votre logo sans être la même, car un logo est souvent dessiné ou retravaillé à la main.
Les licences
Une police de caractères s'utilise selon une licence. Celles proposées par des bibliothèques comme Google Fonts sont publiées sous des licences libres qui autorisent un usage commercial, alors qu'une police achetée pour l'impression peut exiger une licence distincte pour le web. Vérifiez avant de choisir, et demandez que les polices soient hébergées avec le site : elles se chargent alors sans dépendre d'un service extérieur, qui n'a pas à recevoir l'adresse IP de vos visiteurs.
Clair ou sombre, et partout la même charte
Un fond sombre convient à un bar à cocktails, à un restaurant surtout ouvert le soir ou au portfolio d'un photographe, dont les images ressortent mieux. Il rend en revanche la lecture de longs textes plus fatigante et demande des contrastes soignés. Un fond clair reste le choix le plus sûr pour la plupart des commerces, notamment pour une carte ou des tarifs consultés en terrasse. Lorsque le site s'adapte au mode sombre des téléphones, vérifiez les deux versions, logo compris.
Une fois la charte posée, appliquez-la partout : site, réseaux sociaux, cartes de visite, menus, devis et factures. Transmettez la page de règles à chaque personne qui produit un support pour vous, et jugez le résultat sur votre téléphone au moment de valider la maquette de votre site.
Pour poser votre charte cette semaine
- Photographiez votre devanture, votre logo et vos emballages, puis relevez-y deux ou trois couleurs et leur code HEX avec une pipette de couleur, un outil gratuit en ligne ou sur téléphone.
- Testez chaque association de texte et de fond avec un vérificateur de contraste.
- Choisissez une police de titre et une police de texte, et vérifiez leurs licences.
- Rédigez la page de règles et confiez-la à votre prestataire. Si vous partez de zéro, notre agence crée logo et identité visuelle pour 200 € HT, une option détaillée sur la page des tarifs.