Votre bleu de marque est magnifique sur la charte graphique imprimée. Sur votre site, il paraît terne, ou trop agressif, ou simplement différent. Les couleurs de marque d'un site internet ne se comportent pas comme sur le papier, et personne ne vous l'a expliqué.
Couleurs de marque sur un site internet : la même teinte, trois rendus
Une couleur n'existe jamais seule. Elle est perçue à travers un écran, à côté d'autres teintes, sous une lumière que vous ne maîtrisez pas. Ce que votre charte appelle « bleu » devient un bleu différent selon chaque contexte.
D'abord, l'écran émet de la lumière là où le papier la réfléchit. Les nuances très saturées d'un nuancier comme celui de Pantone n'ont souvent aucun équivalent exact en RVB : l'écran les approche, sans les reproduire.
Un dirigeant d'entreprise industrielle le découvre souvent à la livraison : le orange de ses véhicules, éclatant dans la rue, devient une couleur criarde sur fond blanc dans un navigateur.
Le contexte change la couleur : le contraste simultané
Le contraste simultané est un effet de perception : une teinte paraît plus claire, plus chaude ou plus terne selon la couleur qui l'entoure. Votre bleu posé sur du blanc n'est pas le même que sur du gris chaud, alors que son code est identique.
Les principes de la théorie des couleurs enseignés par l'Interaction Design Foundation montrent que l'on juge une couleur par ses relations, jamais isolément. Sur un site, ces relations changent à chaque section : fond, image, bouton, texte.
Une couleur ne se choisit pas, elle se règle par rapport à ce qui l'entoure.
Une palette n'est pas un nuancier : chaque teinte a un rôle
Beaucoup de chartes listent six ou huit couleurs à égalité. Sur un site, cela produit un résultat confus, parce que chaque élément reçoit sa propre teinte. Une palette utilisable répartit les rôles : une couleur dominante, un neutre qui porte les textes, un accent réservé à l'action.
Le système de couleurs de Material Design formalise cette logique : des rôles précis (principal, secondaire, surface, erreur) plutôt qu'une collection de teintes. Vous n'avez pas besoin de l'adopter, mais le principe vaut pour toute marque.
Un cabinet de conseil qui utilise son vert de marque pour les titres, les liens, les icônes et les boutons ne laisse plus rien ressortir. Quand tout est accentué, rien ne l'est.
La lisibilité : quand la couleur de marque fragilise le texte
Certaines couleurs de marque, notamment les pastels et les jaunes, échouent dès qu'elles portent du texte. Les critères de contraste des WCAG fixent un rapport minimum de 4,5 pour 1 pour un texte courant, et un outil comme le WebAIM Contrast Checker le vérifie en quelques secondes.
Au-delà de l'accessibilité, le guide web.dev sur la couleur et le contraste rappelle qu'un contraste faible fatigue tout lecteur, pas seulement les personnes malvoyantes. Un texte pénible à lire se quitte vite.
La solution n'est pas d'abandonner votre couleur, mais de lui trouver une déclinaison plus sombre pour le texte et les boutons, en gardant la teinte d'origine pour les grands aplats.
Ce que la couleur dit avant que vous parliez
La couleur participe au jugement rapide que l'on porte sur vous. Les visiteurs forment une opinion esthétique stable en quelques dizaines de millisecondes, et le Stanford Web Credibility Project place l'apparence soignée parmi les premiers critères de crédibilité.
Nielsen Norman Group rappelle de son côté que la couleur sert à guider et à hiérarchiser avant de décorer, et que l'effet d'esthétique-usabilité fait juger plus fiable ce qui paraît harmonieux. Une marque artisanale qui monte en gamme gagne souvent plus à retirer deux couleurs qu'à en ajouter une.
Comment passer de la charte à un système qui tient sur le site
On traduit la palette en règles d'usage : quelle teinte pour les fonds, lesquelles pour le texte, laquelle pour l'action, et dans quelles proportions. On teste ensuite chaque combinaison sur un vrai écran. C'est le même principe que celui décrit dans notre article sur la cohérence de marque : des règles stables plutôt que des exceptions.
Cette traduction fait partie de notre travail d'identité visuelle et de création de site sur mesure chez Ashenstar : on part de vos couleurs, on les règle pour l'écran, et on en fait un système que vos équipes peuvent appliquer.
Vos couleurs travaillent-elles pour vous, ou seulement pour la charte ?
Ouvrez votre site sur un téléphone, en plein jour. Quelle couleur voyez-vous en premier, et est-ce celle que vous auriez choisie ? Si c'est le hasard qui la désigne, qu'est-ce que vos clients retiennent de vous ?