Une couleur de marque, quinze couleurs de site : l’importance d’une charte graphique précise

Votre charte graphique résume votre identité visuelle sur une double page : un logo, deux typographies, trois pastilles de couleur et leurs codes. Votre futur site internet va nécessiter une quinzaine de couleurs.

Trouver le code HEX d'une couleur de marque prend trente secondes avec un convertisseur Pantone. Il reste ensuite à décider quelle couleur utiliser pour un lien, un bouton survolé, un message d'erreur ou un fond d'encart, et à vérifier que le texte posé dessus sera lisible.

Nous vous proposons d’analyser une charte graphique couleur classique, de voir comment créer une palette de couleurs harmonieuse, avec des exemples et des outils pour l'explorer, puis nous construisons le système de couleurs complet dont un site B2B a besoin. Tous les ratios de contraste cités ont été calculés par nos soins avec la formule officielle du W3C. Chacun peut être vérifié en quelques secondes avec un outil gratuit de contrôle des contrastes.

Comment créer une palette de couleurs harmonieuse pour une marque ?

Une palette harmonieuse se construit avec méthode. Les quatre étapes suivantes s'appliquent aussi bien à une création d'identité visuelle qu'à la refonte d'une charte existante.

Partir de l'identité et du positionnement

Le choix des couleurs est une décision stratégique. Il traduit, dans l'identité visuelle, l'histoire de la marque, ses valeurs et son positionnement face à ses concurrents.

Chez Galopins, cette étape passe par un temps d'immersion dans l'ADN de chaque structure, en co-construction avec le client. Nos identités visuelles sont créées sans intelligence artificielle : chaque proposition de palette s'appuie sur ce que l'équipe a compris de la marque.

Les codes couleur partagés par le public comptent aussi. La charte d'accessibilité de la communication de l'État recommande d'utiliser des couleurs communément admises : le rouge signale en général un interdit, le vert une bonne pratique. Une marque peut s'écarter de ces codes, à condition de le faire en connaissance de cause.

Choisir une harmonie sur le cercle chromatique

Le cercle chromatique sert de base à la plupart des palettes. À l'écran, les couleurs primaires sont le rouge, le vert et le bleu, qui s'additionnent pour produire la lumière. À l'impression, la quadrichromie fonctionne par soustraction avec le cyan, le magenta et le jaune, complétés par le noir.

Quatre harmonies reviennent le plus souvent dans les outils de création de palettes comme Adobe Color :

• Monochromatique : une seule teinte, déclinée en plusieurs niveaux de luminosité et de saturation.
• Analogue : des couleurs voisines sur le cercle, pour une palette douce et cohérente.
• Complémentaire : deux couleurs opposées sur le cercle, pour un contraste fort.
• Triadique : trois couleurs réparties à égale distance sur le cercle, pour une palette plus vive.

Une harmonie donne une structure à la palette. La lisibilité se vérifie à part : deux couleurs harmonieuses peuvent offrir un contraste insuffisant, comme le montre la suite de cet article.

Garder une palette resserrée

La charte d'accessibilité de la communication de l'État le rappelle : l'utilisation des couleurs rend un document attrayant et lisible, à condition de rester parcimonieuse pour ne pas diluer le message.

Dans nos refontes d'identité éco-conçues, la palette est pensée pour l'écran comme pour l'impression, puis consignée dans une charte qui fait de l'éco-performance une règle.

Tester la palette, puis la documenter

Une palette se juge sur ses supports réels : une maquette de site, un document imprimé, une signature de mail. Elle se teste aussi avec un simulateur de daltonisme et un outil de contrôle des contrastes.

La dernière étape est la documentation. Pour chaque couleur, la charte précise ses codes par support, son rôle et ses règles d'utilisation : sur quel fond la poser, pour quel type de texte, dans quel thème. Sans cette documentation, la palette se dilue à chaque nouveau support.

Trois exemples de palettes à étudier

Les systèmes de design publics comptent parmi les meilleures ressources pour comprendre une palette, car leur documentation détaille chaque couleur et son utilisation. Voici trois exemples aux logiques différentes.

Le système de design de l'État (DSFR)

Créé et maintenu depuis 2020 par le Service d'information du Gouvernement, le système de design de l'État représente l'identité numérique de l'État. Sa documentation, sa librairie Figma et son code source sont publics, sous licence open source MIT.

Sa palette s'organise autour de deux couleurs primaires, le bleu France et le rouge Marianne, complétées par une gamme étendue de couleurs. Selon la charte graphique de l'État, cette palette volontairement étendue couvre tous les besoins, et chaque couleur est déclinée pour garantir un contraste suffisant en thème clair et en thème foncé.

Son utilisation est réservée aux sites de l'État : les conditions d'utilisation du DSFR l'interdisent aux autres acteurs. Il se consulte donc comme un modèle de méthode.

Material Design 3, le système de Google

Material Design 3 génère une palette complète à partir d'une seule couleur source. Le système en déduit cinq couleurs clés (primaire, secondaire, tertiaire, neutre et neutre variante), puis décline chacune en une gamme tonale de 13 tons, du noir au blanc.

Des tons précis de chaque gamme sont ensuite attribués à des rôles dans l'interface, en thème clair comme en thème foncé. Le nuancier présenté plus bas suit la même logique : une couleur de marque, plusieurs rôles.

Toit à moi, une palette au service du positionnement

Pour l'association Toit à moi, les Galopins ont fait évoluer le rose fuchsia du logo vers un rouge qui contient toujours du rose. La palette garde sa chaleur et affirme un positionnement plus engagé.

Le choix est stratégique : le rouge évoque la passion et l'énergie, mais aussi la colère, ce sentiment qui pousse à agir contre l'injustice et qui fait la force de l'association. La refonte de l'identité visuelle s'est accompagnée de celle du site internet.

Outils pour créer et explorer une palette de couleurs

De nombreuses ressources gratuites permettent de créer une palette, d'explorer des palettes existantes et de vérifier leur accessibilité. En voici une sélection, classée par usage.

Pour explorer et créer

• Adobe Color : un cercle chromatique pour générer des palettes selon les harmonies monochromatique, analogue, complémentaire ou triadique, avec un simulateur de daltonisme intégré.
• Coolors : un générateur rapide, une bibliothèque de palettes à explorer et l'extraction des couleurs d'une image.

Pour construire une gamme accessible

• Leonardo : un outil open source d'Adobe qui génère les couleurs à partir d'un ratio de contraste cible.
• Material Theme Builder : l'outil de Google qui crée un thème clair et un thème foncé à partir d'une couleur source, en ligne ou en plugin Figma.
• Le sélecteur OKLCH d'Evil Martians : pour construire une gamme à luminosité perçue régulière.

Pour tester en situation

• Realtime Colors : applique la palette et les typographies à une maquette de site réelle, avec un contrôle des contrastes intégré.
• Colour Contrast Analyser : un logiciel gratuit de TPGi qui mesure les ratios de contraste, couramment utilisé dans les audits RGAA.

Ces outils génèrent des propositions en quelques secondes. Le choix final dépend de votre identité, de vos supports et de vos contraintes d'accessibilité, que la suite de cet article détaille.

Le code HEX de votre Pantone est une approximation

Passer une couleur d'un support à l'autre se heurte à des limites physiques. Pantone le reconnaît dans la présentation de son guide Color Bridge : une partie de ses couleurs en ton direct se situe hors de l'espace CMJN, et leur correspondance parfaite en impression quadrichromie est impossible.

Le papier modifie lui aussi la couleur. Le Formula Guide de Pantone présente ses 2 390 couleurs en ton direct dans deux nuanciers séparés, l'un sur papier couché, l'autre sur papier non couché, parce qu'une même encre ne rend pas de la même façon sur les deux supports.

À l'écran, le code HEX décrit uniquement les couleurs de l'espace sRGB, le standard historique du web. Les espaces plus larges comme Display P3 demandent d'autres notations, définies par le module CSS Color Level 4 du W3C.

Le convertisseur fournit donc un code de départ. La charte doit ensuite trancher, support par support : ce code devient-il la référence écran, ou faut-il redessiner une couleur plus fidèle à l'intention de la marque ? La réponse a sa place dans la documentation de la palette.

Une couleur de marque, quinze rôles sur un site

Pour rendre l'exercice concret, nous avons pris une couleur de marque fictive, un orange vif de code #F26B1D, et construit le nuancier dont un site vitrine B2B a besoin. Résultat : quinze couleurs, réparties en trois familles.

Les ratios suivent la formule de luminance relative des WCAG 2.2, la référence internationale du W3C reprise par le RGAA, le référentiel français d'accessibilité.

Les six déclinaisons de marque forment une gamme qui gère les états des éléments cliquables : repos, survol, focus clavier. Elles fournissent aussi une version lisible de l'orange pour les liens dans les paragraphes.

Les cinq neutres portent l'essentiel de la lecture. Ils sont très légèrement teintés de la même teinte orange, ce qui donne au gris une chaleur cohérente avec l'identité de la marque sans perturber la lisibilité.

Les quatre couleurs fonctionnelles signalent les erreurs, les validations, les alertes et les informations. Elles apparaissent dans chaque formulaire de contact et chaque inscription à une newsletter. Ensemble, ces quinze couleurs forment un véritable système, à documenter dans la charte au même titre que le logo et les autres éléments de l'identité visuelle.

Pourquoi « éclaircir de 20 % » ne suffit pas à décliner une couleur

Le réflexe le plus courant pour décliner une couleur consiste à faire varier sa luminosité en HSL, le format proposé par défaut dans beaucoup d'outils de design. Ce format a un défaut : sa valeur de luminosité ne correspond pas à la luminosité perçue par l'œil. La documentation de Mozilla (MDN) précise que la luminosité des espaces OKLCH et LCH n'a pas la même définition que celle du HSL.

Notre test est parlant. À luminosité HSL identique, fixée à 50 %, le jaune pur #FFFF00 affiche un contraste de 1,07:1 avec le blanc. Le bleu pur #0000FF affiche 8,59:1. Même valeur dans l'outil, lisibilité opposée à l'écran.

L'écart se retrouve dans les déclinaisons. Baisser la luminosité HSL de 10 points fait perdre au jaune deux fois plus de luminosité perçue qu'au bleu : 0,150 contre 0,070 sur l'échelle OKLCH. Une gamme construite par pas réguliers en HSL produit donc des marches irrégulières à l'écran.

L'espace OKLCH, défini dans le module CSS Color Level 4 du W3C, a été conçu pour une luminosité perçue homogène. Chrome, Edge, Firefox et Safari le prennent en charge depuis 2023. Nous l'utilisons pour construire les gammes tonales de nos palettes : la teinte reste fixe, seules la luminosité et la saturation varient.

Un espace perceptuel ne dispense pas de mesurer. Le ratio de contraste des WCAG repose sur la luminance relative, une grandeur différente de la luminosité OKLCH. Sur notre orange, la teinte de luminosité OKLCH 0,62 (#D85902) atteint 3,91:1 sur fond blanc et reste sous le seuil de 4,5:1. Il faut descendre à 0,55 (#B84B00) pour obtenir 5,18:1. Seul le contrasteur tranche.

La variante du texte

Le défaut de contraste est l'erreur d'accessibilité la plus répandue du web. Le WebAIM Million 2026, une analyse des pages d'accueil du million de sites les plus visités réalisée en février 2026, en relève sur 83,9 % des pages, contre 79,1 % un an plus tôt. Chaque page concernée en compte 34 en moyenne.

Les seuils sont fixés par le RGAA. Un texte courant doit atteindre un contraste de 4,5:1 avec son fond (critère 3.2). Un texte de grande taille, à partir de 24 px ou de 18,5 px en gras, doit atteindre 3:1. Les composants d'interface et les éléments graphiques porteurs d'information, comme les bordures de champs ou les icônes, doivent eux aussi atteindre 3:1 (critère 3.3).

Notre orange #F26B1D obtient 3,04:1 sur fond blanc. Il convient pour un grand titre ou une bordure de bouton. Il échoue pour un lien dans un paragraphe. Un texte blanc posé sur un bouton orange obtient le même 3,04:1 et échoue lui aussi.

Le bouton principal admet trois solutions, et chacune change l'allure du site. La première garde l'orange en fond avec un texte foncé #27201D, pour un contraste de 5,27:1. La deuxième passe le bouton sur la variante foncée #B84B00 avec un texte blanc, pour 5,18:1. La troisième réserve l'orange aux grands aplats et aux illustrations. Le choix relève de l'identité de marque mais aussi de la technique.

Le survol réserve un piège. Sur un bouton orange à texte foncé, assombrir le fond au survol (#D85902) fait chuter le contraste à 4,11:1, sous le seuil. Éclaircir le fond (#FB864D) le fait monter à 6,57:1. Ce détail se règle une fois pour toutes dans le nuancier, ou se découvre le jour de l'audit.

Sur un site internet existant, un audit RGAA mesure ces ratios sur un échantillon de pages représentatif. Les contrastes défaillants y apparaissent presque toujours, ce que confirment les 83,9 % relevés par WebAIM.

Pour certaines structures, ces seuils sont une obligation légale. L'article 47 de la loi du 11 février 2005 et le décret n° 2019-768, modifié par le décret n° 2026-816 du 24 août 2026, imposent aux entreprises dont le chiffre d'affaires annuel moyen en France atteint 250 millions d'euros de garantir l'accessibilité de leurs services en ligne. Depuis le 28 juin 2025, la directive européenne 2019/882 étend l'obligation à une liste de services grand public, dont le commerce en ligne. Les micro-entreprises de services, qui emploient moins de 10 personnes et réalisent au plus 2 millions d'euros de chiffre d'affaires ou de total de bilan, en sont exemptées.

Une charte graphique couleur classique

Une charte graphique couleur définit en général une couleur principale, une à trois couleurs secondaires et des neutres, souvent un noir et un gris. Chaque couleur de la palette y est traduite dans plusieurs systèmes de codes : une référence Pantone pour l'impression en ton direct, une formule CMJN pour la quadrichromie, des valeurs RVB et un code HEX pour les écrans. Cette base couvre les besoins des supports imprimés et des usages simples : carte de visite, plaquette commerciale, signature de mail. Sur un site internet, chaque couleur doit en plus remplir une fonction précise, dans plusieurs états, avec des exigences de lisibilité mesurables. Tout commence par une palette solide.

Cette base couvre les besoins des supports imprimés et des usages simples : carte de visite, plaquette commerciale, signature de mail. Sur un site, chaque couleur doit en plus remplir une fonction précise, dans plusieurs états, avec des exigences de lisibilité mesurables.

Le code HEX de votre Pantone est une approximation

Passer une couleur d'un support à l'autre se heurte à des limites physiques. Pantone le reconnaît dans la présentation de son guide Color Bridge : une partie de ses couleurs en ton direct se situe hors de l'espace CMJN, et une correspondance parfaite y est impossible.

Le papier modifie lui aussi la couleur. Le Formula Guide de Pantone présente ses 2 390 couleurs en ton direct dans deux nuanciers séparés, l'un sur papier couché, l'autre sur papier non couché, parce qu'une même encre ne rend pas de la même façon sur les deux surfaces.

À l'écran, le code HEX décrit uniquement les couleurs de l'espace sRGB, le standard historique du web. Les espaces plus larges comme Display P3 demandent d'autres notations, définies par le module CSS Color Level 4 du W3C.

Le convertisseur fournit donc un code de départ. La charte doit ensuite trancher, support par support : ce code devient-il la référence écran, ou faut-il redessiner une couleur plus fidèle à l'intention de la marque ?

Une couleur de marque, quinze rôles sur un site

Pour rendre l'exercice concret, nous avons pris une couleur de marque fictive, un orange vif de code #F26B1D, et construit le nuancier dont un site vitrine B2B a besoin. Résultat : quinze couleurs, réparties en trois familles.

Les ratios suivent la formule de luminance relative des WCAG 2.2, la référence internationale du W3C reprise par le RGAA, le référentiel français d'accessibilité.

Les six déclinaisons de marque gèrent les états des éléments cliquables : repos, survol, focus clavier. Elles fournissent aussi une version lisible de l'orange pour les liens dans les paragraphes.

Les cinq neutres portent l'essentiel de la lecture. Ils sont très légèrement teintés de la même teinte orange, ce qui donne au gris une chaleur cohérente avec la marque sans perturber la lisibilité.

Les quatre couleurs fonctionnelles signalent les erreurs, les validations, les alertes et les informations. Elles apparaissent dans chaque formulaire de contact et chaque inscription à une newsletter.

Pourquoi « éclaircir de 20 % » ne suffit pas à décliner une couleur

Le réflexe le plus courant pour décliner une couleur consiste à faire varier sa luminosité en HSL, le format proposé par défaut dans beaucoup d'outils. Ce format a un défaut: sa valeur de luminosité ne correspond pas à la luminosité perçue par l'œil. La documentation de Mozilla (MDN) précise que la luminosité des espaces OKLCH et LCH n'a pas la même définition que celle du HSL.

Notre test est parlant. À luminosité HSL identique, fixée à 50 %, le jaune pur #FFFF00 affiche un contraste de 1,07:1 avec le blanc. Le bleu pur #0000FF affiche 8,59:1. Même valeur dans l'outil, lisibilité opposée à l'écran.

L'écart se retrouve dans les déclinaisons. Baisser la luminosité HSL de 10 points fait perdre au jaune deux fois plus de luminosité perçue qu'au bleu : 0,150 contre 0,070 sur l'échelle OKLCH. Une gamme construite par pas réguliers en HSL produit donc des marches irrégulières à l'écran.

L'espace OKLCH, défini dans le module CSS Color Level 4 du W3C, a été conçu pour une luminosité perçue homogène. Chrome, Edge, Firefox et Safari le prennent en charge depuis 2023. Nous l'utilisons pour construire les gammes tonales : la teinte reste fixe, seules la luminosité et la saturation varient.

Un espace perceptuel ne dispense pas de mesurer. Le ratio de contraste des WCAG repose sur la luminance relative, une grandeur différente de la luminosité OKLCH. Sur notre orange, la teinte de luminosité OKLCH 0,62 (#D85902) atteint 3,91:1 sur fond blanc et reste sous le seuil de 4,5:1. Il faut descendre à 0,55 (#B84B00) pour obtenir 5,18:1. Seul le contrasteur tranche.

La variante du texte

Le défaut de contraste est l'erreur d'accessibilité la plus répandue du web. Le WebAIM Million 2026, une analyse des pages d'accueil du million de sites les plus visités réalisée en février 2026, en relève sur 83,9 % des pages, contre 79,1 % un an plus tôt. Chaque page concernée en compte 34 en moyenne.

Les seuils sont fixés par le RGAA. Un texte courant doit atteindre un contraste de 4,5:1 avec son fond (critère 3.2). Un texte de grande taille, à partir de 24 px ou de 18,5 px en gras, doit atteindre 3:1. Les composants d'interface et les éléments graphiques porteurs d'information, comme les bordures de champs ou les icônes, doivent eux aussi atteindre 3:1 (critère 3.3).

Notre orange #F26B1D obtient 3,04:1 sur fond blanc. Il convient pour un grand titre ou une bordure de bouton. Il échoue pour un lien dans un paragraphe. Un texte blanc posé sur un bouton orange obtient le même 3,04:1 et échoue lui aussi.

Le bouton principal admet trois solutions, et chacune change l'allure du site. La première garde l'orange en fond avec un texte foncé #27201D, pour un contraste de 5,27:1. La deuxième passe le bouton sur la variante foncée #B84B00 avec un texte blanc, pour 5,18:1. La troisième réserve l'orange aux grands aplats et aux illustrations. Le choix relève de l'identité de marque mais aussi de la technique.

Le survol réserve un piège. Sur un bouton orange à texte foncé, assombrir le fond au survol (#D85902) fait chuter le contraste à 4,11:1, sous le seuil. Éclaircir le fond (#FB864D) le fait monter à 6,57:1. Ce détail se règle une fois pour toutes dans le nuancier, ou se découvre le jour de l'audit.

Sur un site existant, un audit RGAA mesure ces ratios sur un échantillon de pages représentatif. Les contrastes défaillants y apparaissent presque toujours, ce que confirment les 83,9 % relevés par WebAIM.

Pour certaines structures, ces seuils sont une obligation légale. L'article 47 de la loi du 11 février 2005 et le décret n° 2019-768, modifié par le décret n° 2026-816 du 24 août 2026, imposent l'accessibilité des services en ligne aux entreprises dont le chiffre d'affaires annuel moyen en France atteint 250 millions d'euros. Depuis le 28 juin 2025, la directive européenne 2019/882 étend l'obligation à une liste de services grand public, dont le commerce en ligne. Les micro-entreprises de services, qui emploient moins de 10 personnes et réalisent au plus 2 millions d'euros de chiffre d'affaires ou de total de bilan, en sont exemptées.