Lors de la refonte d'un site institutionnel, la question des couleurs de marque est presque toujours abordée. Les divergences les plus courantes sont les suivantes : certains souhaitent que toute la page utilise la couleur de marque, estimant que c'est la seule façon d'avoir une « identité de marque » ; d'autres craignent que trop de couleurs nuisent à la lisibilité. Une méthode de jugement plus pratique consiste d'abord à clarifier la tâche que la couleur de marque doit remplir sur la page, puis à décider où elle doit apparaître.
En termes simples, les couleurs de marque peuvent se diviser en deux catégories d'usage : celles qui servent à l'identification, comme la navigation, les boutons principaux, les titres de rubriques ; et celles qui servent à l'ambiance, comme les blocs de couleur en en-tête, les fonds de pied de page, les illustrations et les icônes. Les emplacements d'identification doivent être stables, tandis que les emplacements d'ambiance peuvent être plus discrets. Voici, dans l'ordre de haut en bas de la page, comment traiter chaque emplacement et selon quels critères.
Navigation et en-tête : distinguer les niveaux sans écraser le texte
L'en-tête est la première zone où le visiteur voit la couleur de marque. Deux approches sont courantes : soit toute la barre de navigation utilise la couleur de marque en fond, soit un fond blanc ou gris clair est utilisé, avec la couleur de marque réservée au logo, à la rubrique active et aux boutons principaux.
Si la barre de navigation utilise un fond de couleur de marque, il faut d'abord vérifier que le texte et les icônes restent lisibles sur ce fond. Un fond foncé avec du texte blanc, ou un fond clair avec du texte foncé, sont des combinaisons relativement sûres. Lorsque des rubriques de premier et de second niveau coexistent dans la navigation, il est conseillé de réserver la couleur de marque ou un style de mise en évidence marqué uniquement à la « rubrique actuelle », et de garder les autres rubriques dans une même couleur, pour éviter une navigation multicolore.
Le critère de jugement peut être très direct : réduisez la capture d'écran de l'en-tête à la largeur d'un écran de téléphone et vérifiez si l'on distingue encore d'un coup d'œil le logo, les rubriques et les boutons. Si tout se fond en une seule masse colorée, cela signifie que la surface de couleur de marque est trop importante ou que les niveaux ne sont pas assez différenciés.
Titres et liens dans le corps de page : faire porter à la couleur de marque le signal « cliquable »
La zone de contenu est l'endroit où la lecture se produit ; le rôle de la couleur de marque y est d'indiquer, non de décorer. La répartition courante est la suivante : les titres de niveau 1 et 2 en gris foncé ou presque noir, le texte courant en gris foncé, les liens et les textes cliquables en couleur de marque.
La raison est que le lecteur finit par associer cette couleur à « ceci est cliquable ». Si le corps de page est parsemé de couleur de marque, les liens perdent leur fonction d'indication. Imaginez une page où la couleur de marque est utilisée à la fois pour les titres, les mises en gras, les liens et les encadrés : le lecteur aura du mal à savoir quels éléments sont cliquables.
Si la couleur de marque est plutôt claire, comme le jaune ou le vert clair, elle peut manquer de contraste sur fond blanc. Dans ce cas, on peut ajouter un soulignement aux liens, ou utiliser une version plus foncée de la même teinte pour le texte, en réservant la version claire au fond des boutons.
Boutons et formulaires : couleur principale pour le bouton principal, discrétion pour les boutons secondaires
Les boutons sont l'endroit où l'usage de la couleur de marque doit être le plus mesuré. En général, une page ne conserve qu'un seul bouton d'action principal en couleur de marque, par exemple « Soumettre une demande », « Nous contacter », « Télécharger la documentation » ; les actions secondaires comme « Retour », « Annuler », « Voir plus » peuvent utiliser un bouton avec contour ou un bouton texte gris.
Il en va de même pour les formulaires. La bordure des champs de saisie, les indications de champs obligatoires et l'état de focus peuvent utiliser la couleur de marque, mais le fond des champs doit rester blanc ou gris clair pour que l'utilisateur distingue bien ce qu'il saisit.
La méthode de vérification : réduisez la page ou plissez les yeux ; le bouton principal reste-t-il l'un des éléments les plus visibles ? Si plusieurs blocs de couleur aussi vifs l'entourent, son rôle de guidage s'affaiblit.
Pied de page, blocs de couleur et illustrations : la couleur de marque pour l'ambiance, mais avec parcimonie
Le pied de page, les bannières de rubrique, les zones de présentation de données et les blocs de séparation conviennent à la couleur de marque pour créer une ambiance générale. La surface utilisée peut y être plus importante que dans le corps de page, mais attention à deux points : le texte sur les blocs de couleur doit rester lisible ; et il ne faut pas multiplier les nuances de la couleur de marque sur une même page, au risque de paraître désordonné.
Si l'entreprise dispose d'une charte graphique complète, elle distingue généralement couleur principale, couleurs secondaires et couleurs neutres. Appliqué au site web, on peut répartir ainsi : couleur principale pour la mise en évidence dans la navigation, les boutons principaux et les titres clés ; couleurs secondaires pour les icônes, les étiquettes et les blocs de catégorie ; couleurs neutres pour le texte, les fonds et les séparateurs. En l'absence de charte complète, on peut aussi définir d'abord un ensemble de règles simples selon cette logique, puis les appliquer page par page.
Cohérence entre les pages : plus important que l'esthétique d'une page isolée
Le problème le plus fréquent avec les couleurs de marque ne se situe pas sur une page particulière, mais dans l'incohérence entre les pages. Par exemple, le bouton de la page d'accueil est bleu foncé, celui de la page produit devient bleu clair ; les étiquettes de la liste de réalisations et celles de la liste d'actualités sont totalement différentes. En naviguant d'une page à l'autre, le visiteur a l'impression que le site n'appartient pas à la même marque.
En phase de maintenance, on peut procéder régulièrement à une vérification simple : ouvrir la page d'accueil, une page de rubrique, une page de détail, une page de formulaire et le pied de page, et contrôler la cohérence des couleurs des boutons principaux, des liens, des titres et des états sélectionnés. Si plusieurs personnes contribuent au site, il est conseillé de consigner les valeurs chromatiques et les usages des couleurs de marque dans une courte note, placée dans l'administration ou dans un document partagé, à consulter lors de la création de nouvelles pages.
Par ailleurs, l'affichage des couleurs de marque dans l'administration et sur le front-end peut varier selon l'écran, le navigateur et la compression des images. Avant la mise en ligne, il est préférable de vérifier sur un ordinateur et un téléphone courants que les couleurs ne présentent pas d'écart visible et que le texte reste lisible sur son fond.
Un ordre de répartition applicable
Si vous ne voulez pas vous perdre dans les hésitations dès le départ, vous pouvez procéder étape par étape dans l'ordre suivant :
- Définir d'abord les couleurs neutres : quels gris utiliser pour le texte, le fond et les bordures, afin de garantir un confort de lecture.
- Définir ensuite les emplacements de la couleur principale : rubrique active dans la navigation, boutons principaux, liens, titres importants.
- Puis définir les emplacements des couleurs secondaires : icônes, étiquettes, catégories, blocs décoratifs.
- Enfin, vérifier les contrastes : faire une capture d'écran de chaque emplacement utilisant la couleur de marque et s'assurer que le texte et les icônes sont bien lisibles.
- Après la mise en ligne, contrôler la cohérence page par page et consigner les règles pour les mises à jour futures.
Où placer les couleurs de marque ? La question n'est pas fondamentalement esthétique, mais relève de la répartition des tâches de la page. Garder stables les emplacements d'identification, limiter la surface des emplacements d'ambiance, et laisser la couleur au service de la lecture dans le corps de page : le site sera généralement plus agréable à regarder et plus facile à maintenir cohérent sur le long terme. Pour la prochaine étape, ouvrez votre site actuel et choisissez une page pour chacun des quatre types d'emplacements — en-tête, corps de page, boutons, pied de page — puis vérifiez-les à l'aide des critères ci-dessus.
