Couleurs polices site web : bâtir une charte claire et simple
Pour vos couleurs polices site web, limitez-vous à 3 couleurs, 2 polices et 5 à 6 tailles de texte. Choisissez une couleur principale, une secondaire et un neutre, puis une police pour les titres et une pour le corps, et implémentez le tout dans WordPress via les Styles globaux ou Personnaliser.
Objectif : une charte simple qui tient sur une page
Mon but en formation est que vous repartiez avec une charte qui tient sur une page A4 et que vous pouvez appliquer en une heure sur votre site. Pas d’outils complexes, pas de jargon. Une palette courte, une hiérarchie typographique claire, et des règles d’usage concrètes pour les boutons, les liens et les surfaces. Cette base suffit pour un site vitrine, un blog ou une petite boutique.
Votre charte visuelle n’est pas isolée du reste. Elle s’applique à l’en-tête et au pied de page que vous avez définis pour structurer la navigation. Si ce n’est pas fait, suivez d’abord ce guide pour créer un en-tête et un pied de page personnalisés.
Méthode express pour vos couleurs polices site web
Voici la méthode que j’utilise en direct avec les apprenants. Elle évite les hésitations sans vous enfermer dans un thème figé.
- Cadrez l’usage et le ton. Listez vos 3 types de pages (ex. Accueil, Services, Contact) et le ton souhaité (sobre, convivial, premium). Ce filtre guidera chaque choix esthétique.
- Composez une palette courte. Choisissez 1 couleur principale (actions, mise en avant), 1 couleur secondaire (survols, puces, badges) et 1 neutre (fonds et séparations). Prévoyez leurs versions foncées et claires pour les états survolés et les fonds alternés.
- Sélectionnez 2 polices maximum. Une pour les titres, une pour les paragraphes. Gardez 2 à 3 graisses en tout (ex. Regular, Medium, Bold) pour limiter le chargement et rester cohérent.
- Définissez une échelle de tailles. Fixez 5 à 6 tailles de texte couvrant petits libellés, corps, sous-titres et titres forts. Exemple utile : 16, 18, 22, 28, 36, 48 px, à adapter à votre thème.
- Règles d’usage. Bouton principal = couleur principale en fond, texte blanc ou très sombre selon contraste ; bouton secondaire = contour en couleur secondaire, fond neutre ; liens dans le texte = une seule couleur + soulignement au survol.
- Implémentez dans WordPress. Activez couleurs et polices au niveau global (Styles globaux ou Personnaliser) puis testez sur 2 à 3 pages réelles. Ajustez seulement ce qui gêne la lecture.
Palette de couleurs : construire sans s’égarer
La tentation est d’empiler les teintes. En pratique, trois teintes de base suffisent, complétées par leurs variantes de luminosité. Une couleur primaire portée par votre marque, une couleur secondaire d’accompagnement, et un neutre utile pour les fonds, bordures et zones de respiration. Pour le neutre, partez souvent d’un gris chaud ou froid plutôt que d’un noir pur, plus doux à l’écran.
Assurez le contraste texte/fond. Un bouton coloré exige un texte très lisible. Le plus simple : si vous avez un fond sombre, utilisez un texte blanc, et inversement. Évitez les textes fins sur des couleurs saturées. Le contraste prévaut sur l’originalité quand il s’agit de lecture continue.
Évitez le dégradé sur les éléments fonctionnels (boutons, liens, menus). Réservez-le à des bannières ou sections décoratives, sinon les états survolés et actifs deviennent illisibles.
| Élément | Couleur recommandée | Où configurer |
|---|---|---|
| Texte courant | Gris très sombre sur fond clair, ou blanc sur fond sombre | Styles globaux > Couleurs (thèmes de blocs) / Personnaliser > Couleurs (thèmes classiques) |
| Titres | Même couleur que le texte ou légèrement plus sombre | Styles globaux > Typographie > Titres / Personnaliser > Typographie |
| Liens | Couleur secondaire + soulignement au survol | Styles globaux > Éléments > Liens / CSS additionnel si besoin |
| Bouton principal | Fond = couleur principale, texte blanc | Styles globaux > Boutons / Personnaliser > Boutons |
| Bouton secondaire | Contour = couleur secondaire, fond neutre | Styles globaux > Boutons / CSS additionnel sur variantes |
| En-tête | Fonds neutres, liens = secondaire | Modèles > En-tête ou Personnaliser > En-tête |
| Pied de page | Fond plus sombre, texte clair | Modèles > Pied de page ou Personnaliser > Pied de page |
Polices : hiérarchie lisible et chargement maîtrisé
Deux familles typographiques suffisent pour 95 % des sites que je vois en formation. Une police expressive et lisible pour les titres, et une police confortable pour les paragraphes. Multiplier les graisses alourdit le site et dilue la hiérarchie. Trois graisses couvrent l’essentiel : Regular pour le corps, Medium pour les sous-titres et Bold pour les titres forts.
Question performance, les polices système (Arial, Georgia, Segoe UI, etc.) chargent instantanément et conviennent aux sites sobres. Les webfonts offrent plus de personnalité mais ajoutent des requêtes. Si vous partez sur des webfonts, limitez les variantes, activez uniquement les jeux de caractères nécessaires et définissez des polices de secours cohérentes.
Astuce terrain : si votre thème propose une « variable font », vous obtenez une plage de graisses avec un seul fichier. Pratique pour affiner sans multiplier les téléchargements.
Appliquer dans WordPress sans bricolage
Sur un thème de blocs, centralisez tout via Apparence > Éditeur > Styles. Couleurs, polices, tailles et boutons se règlent au même endroit et se propagent aux modèles. Si vous hésitez entre thème classique et thème de blocs, lisez ce point de vue nuancé sur les thèmes de blocs et l’éditeur de site.
Sur un thème classique, passez par Apparence > Personnaliser > Couleurs, Typographie et éventuellement CSS additionnel pour peaufiner. Visez d’abord le global : textes, titres, liens, boutons. Le peaufinage page par page vient ensuite, à la marge.
Pensez au contexte de marque. Votre logo et votre favicon doivent s’intégrer à la palette plutôt que la dicter. Réglez-les seulement une fois la charte posée, avec ce tutoriel sur ajouter son logo et son favicon sur WordPress.
Selon votre arborescence, certains éléments méritent un style dédié (ex. bandeau d’alerte, encarts d’avis, tableaux de prix). Créez une variante de bloc avec la couleur secondaire et une taille de titre spécifique, au lieu de réinventer la roue à chaque section.
Si vous débutez et souhaitez une mise en main complète de WordPress en petit groupe, voyez le programme de la formation WordPress débutant que j’anime en direct.
Vérifier lisibilité, cohérence et accessibilité
- Contraste suffisant sur tous les boutons et les liens, y compris au survol.
- Corps de texte confortable sur mobile et desktop, interlignage ni trop serré ni trop lâche.
- Une seule couleur de lien dans les paragraphes, un seul style de survol.
- Jamais plus de 3 graisses chargées. Supprimez celles que vous n’utilisez pas.
- Équilibre des espacements verticaux entre titres et paragraphes, constant d’une page à l’autre.
- État focus visible sur les liens et boutons pour la navigation clavier.
La cohérence visuelle aide aussi vos contenus à être mieux compris par les systèmes d’IA qui résument les pages. Pour aller plus loin sur cet enjeu, vous pouvez lire mon article sur le géo-référencement dans les moteurs génératifs.
Exemples d’application concrets
Site de services B2B sobre : couleur principale bleu/gris bleuté, secondaire bleu plus vif pour les liens et puces, neutre gris clair pour les fonds alternés. Titres en sans-serif avec Medium/Bold, corps en sans-serif Regular. Bouton principal plein en bleu, bouton secondaire en contour.
Blog magazine : couleur principale chaude pour le bouton et quelques encarts, secondaire déclinée en teinte plus douce pour les liens, neutres très clairs pour aérer les longues lectures. Titres en serif pour le caractère, corps en sans-serif pour l’endurance de lecture.
Petite boutique : couleur principale issue du logo pour les actions d’achat, secondaire pour les étiquettes promotionnelles, neutre franc pour structurer les fiches produits. Hiérarchie typographique compacte pour garder les pages légères et claires.
Erreurs fréquentes et corrections rapides
Trop de couleurs. Réduisez à 1 primaire, 1 secondaire et 1 neutre, puis remplacez les teintes redondantes par des variations de luminosité.
Trop de polices et de graisses. Revenez à 2 familles et 3 graisses maximum, supprimez les fichiers non utilisés.
Contraste faible. Inversez le texte/fond des boutons ou foncez la teinte jusqu’à obtenir un rendu lisible à première vue.
Styles incohérents par page. Ramenez les tailles au jeu de 5 à 6 valeurs défini dans vos Styles globaux, et uniformisez les marges au-dessus des titres.
Questions fréquentes
Dois-je partir de mon logo pour définir la palette ?
Servez-vous du logo comme référence, pas comme contrainte. Gardez-en la teinte principale pour les actions et ajustez la saturation et la luminosité pour garantir un bon contraste et une lecture fluide sur les écrans.
Faut-il absolument utiliser des webfonts comme Google Fonts ?
Non. Les polices système suffisent pour un site rapide et sobre. Si vous optez pour des webfonts, limitez les variantes et prévoyez des polices de secours pour éviter les sauts de mise en page quand les fichiers se chargent.
Comment vérifier que mes contrastes sont corrects ?
Comparez visuellement texte et fond sur vos gabarits clés et testez les états au survol et au focus. Si vous hésitez, foncez la couleur du texte ou éclaircissez le fond jusqu’à obtenir une lisibilité nette à première vue sur mobile et desktop.
Aller plus loin en pratique sur WordPress
Dans la formation WordPress débutant, nous construisons ensemble une charte courte, puis nous l’appliquons proprement aux Styles globaux, aux modèles et aux blocs clés, pour que vous repartiez avec une méthode réutilisable sur vos prochains sites.
