Construire la palette de couleurs de son site

La palette, ce sont les quelques couleurs de votre site et le rôle de chacune. Bien réglée, elle fait reconnaître votre maison au premier coup d’œil et rend tout lisible. Mal réglée, elle efface le texte : en 2026, 83,9 % des pages d’accueil du million de sites les plus visités contenaient du texte trop peu contrasté, le défaut d’accessibilité le plus répandu de l’étude (WebAIM, 2026).

Voici comment la construire, et les quelques mesures qui la rendent lisible pour tout le monde.

Peu de couleurs, chacune avec un rôle

Une palette de site tient en quatre rôles :

• le fond : blanc cassé, crème, ou au contraire très sombre ;
• le texte : presque noir sur fond clair, presque blanc sur fond sombre ;
• l’accent : une seule couleur vive, pour ce qui se clique ;
• les neutres : un ou deux gris, chauds ou froids, pour les filets, les fonds de section et les mentions discrètes.

Partez de ce qui existe déjà : l’enseigne, la devanture, le logo, les matériaux du lieu. Une boulangerie peut tirer sa palette de la croûte et de la farine ; un cabinet de kinésithérapie, du bois clair et du vert de sa façade ; un photographe, d’un noir profond qui laisse toute la place aux images.

Notez chaque couleur avec son code et son rôle, et tenez-vous-y. Un site où chaque section invente une nuance finit par ne plus rien dire.

Le contraste du texte : 4,5:1

Le contraste se mesure par un rapport entre la luminosité des deux couleurs, de 1:1 (deux couleurs identiques) à 21:1 (noir sur blanc). Le critère WCAG 1.4.3 (niveau AA) demande :

• 4,5:1 au moins pour le texte courant ;
• 3:1 au moins pour le grand texte, à partir de 24 pixels environ, ou de 18,5 pixels en gras.

Le seuil est strict : un rapport de 4,47:1 échoue (W3C). Le chiffre de 4,5 compense la baisse de sensibilité au contraste d’une acuité d’environ 5/10, fréquente vers 80 ans. Il protège donc notamment vos clients âgés.

Les logos, le texte purement décoratif et les boutons désactivés échappent à la règle. Une charte graphique, elle, n’en dispense pas.

Le piège classique est le gris clair sur blanc, si élégant sur une maquette. Un exemple, calculé avec la formule des WCAG :

Pour vérifier, inutile de calculer : dans Chrome, le sélecteur de couleur des outils de développement affiche le rapport et indique s’il atteint le niveau AA, et Lighthouse liste les textes trop pâles de la page (Chrome for Developers).

Ce qui n’est pas du texte : 3:1

Le critère WCAG 1.4.11 (niveau AA) étend la règle à ce qui permet d’utiliser la page. Il demande 3:1 au moins contre les couleurs voisines pour :

• la bordure d’un champ de formulaire : une bordure gris clair #AAAAAA sur blanc, à 2,3:1, échoue ;
• une icône qui sert seule de bouton, comme le téléphone ou la flèche d’un menu ;
• l’indicateur de focus, le contour qui montre où l’on se trouve quand on navigue au clavier ;
• les parties utiles d’un graphique, comme les courbes ou les parts d’un camembert.

Un bouton qui porte un texte lisible n’a pas besoin d’une bordure contrastée : le texte suffit à le repérer. Le survol, lui, n’est pas soumis au rapport.

Jamais la couleur seule

Environ un homme sur douze voit mal certaines couleurs (National Eye Institute, 2025). Le critère WCAG 1.4.1 (niveau A, le premier) demande donc qu’aucune information ne repose sur la seule couleur. Le RGAA, le référentiel français, en fait son critère 3.1. Quelques cas courants :

• Les liens dans un paragraphe. Gardez-les soulignés. Sans soulignement, la technique G183 du W3C demande au moins 3:1 entre le lien et le texte qui l’entoure.
• Les champs obligatoires. Un libellé rouge ne suffit pas : ajoutez le mot « obligatoire », ou un astérisque expliqué en tête du formulaire.
• Ouvert ou fermé. Une pastille verte ou rouge à côté des horaires doit être doublée du mot.
• La formule conseillée d’une grille de tarifs : signalez-la par une mention écrite, en plus de sa teinte.

Un test simple : passez la page en niveaux de gris, avec un filtre de votre ordinateur ou une capture retouchée. Tout ce qui devient ambigu repose sur la couleur.

Une couleur d’accent, réservée

L’accent signale ce qui agit : le bouton d’appel, les liens, le focus. S’il colore aussi les titres, les icônes et les fonds de section, plus rien ne ressort, et le visiteur ne sait plus où cliquer. Réservez-le, et il guidera l’œil vers votre bouton d’appel.

Vérifiez-le dans ses deux usages :

1. En fond de bouton, avec le texte du bouton par-dessus : 4,5:1 au moins entre les deux. L’orange #FF8C00, illisible en texte sur blanc, donne 9:1 avec un texte noir posé dessus.
2. En texte, pour les liens : 4,5:1 contre le fond de la page. Les teintes vives et claires, jaune, orange, vert pomme, y échouent souvent ; foncez-les pour les liens et gardez la version vive pour les boutons.

Pensez enfin aux états : le bouton survolé, pressé et focalisé doit rester lisible dans chacun d’eux.

Le texte sur une photo ou une vidéo

Un titre posé sur une image est soumis à la même règle de 4,5:1, ou de 3:1 en grand. La difficulté vient de l’image, faite de mille nuances. Le W3C mesure le contraste contre ce qui se trouve directement derrière les lettres : pour un titre blanc, la zone la plus claire de l’image sert de test rapide (échec F83).

Quatre façons d’y arriver, inspirées de la technique G18 du W3C :

• choisir une image avec une zone calme à l’endroit du texte : un ciel, un mur, une ombre ;
• poser un voile qui assombrit ou éclaircit l’image derrière le texte ;
• entourer les lettres d’un halo ou d’un fin contour contrasté ;
• poser le texte sur un bandeau de couleur unie.

Avec une vidéo de fond, chaque image du film compte. Faites le test sur le passage le plus clair pour un titre blanc, le plus sombre pour un titre noir, et sur l’affiche, l’image fixe qui s’affiche avant le film. Une matière comme le grain de film habille l’image ; le contraste, lui, vient du voile ou du bandeau.

En résumé : quatre rôles, une couleur d’accent réservée à ce qui se clique, 4,5:1 pour le texte et 3:1 pour les contrôles. Doublez toute information portée par la couleur, et testez le texte posé sur une image sur sa partie la plus difficile.