Comment choisir les couleurs de votre marque et de votre site Internet

Choisir les couleurs d'une marque ne consiste pas à prendre celles qu'on préfère. Une palette doit servir la lisibilité du site, se décliner en clair et en foncé, et rester cohérente du logo jusqu'aux boutons. Voici une méthode simple en quatre étapes, les outils gratuits pour construire votre palette, et les erreurs les plus courantes.

Si vous avez déjà un logo, sa couleur principale est votre point de départ : le site doit prolonger l'identité visuelle, pas en inventer une deuxième. Si le logo n'existe pas encore, commencez par lui (voir comment créer un logo) : on conseille de le dessiner d'abord en noir et blanc, puis de choisir ses couleurs une fois la forme validée.

Une palette de site se compose en général de trois rôles :

• une couleur principale, celle qu'on associe à la marque (souvent celle du logo) ;

• une couleur secondaire, qui l'accompagne pour varier les fonds et les éléments graphiques ;

• une couleur d'accent, réservée aux actions : boutons, liens importants, éléments à remarquer.

À ces trois couleurs s'ajoutent des neutres : un blanc ou un blanc cassé pour les fonds, un gris très foncé ou un noir pour le texte, et deux ou trois gris intermédiaires pour les bordures et les textes secondaires.

Pour choisir la couleur principale quand rien n'existe, posez-vous trois questions : que doit évoquer la marque (sérieux, énergie, calme, luxe) ? quelles couleurs utilisent vos concurrents directs, pour vous en distinguer ? la couleur reste-t-elle lisible en petit, sur fond clair comme sur fond foncé ?

La règle 60-30-10, venue de la décoration d'intérieur, donne un ordre de grandeur pour équilibrer une page :

• 60% de couleur dominante, le plus souvent un fond neutre ;

• 30% de couleur secondaire (bandeaux, encadrés, en-tête, pied de page) ;

• 10% de couleur d'accent, pour ce qui doit attirer l'œil.

Ce n'est pas une loi, mais elle évite deux travers fréquents : un site entièrement saturé de la couleur de la marque, ou une couleur d'accent utilisée partout, qui n'attire donc plus l'attention. Si tous les éléments sont de la même couleur vive, plus rien ne ressort.

Une belle palette est inutile si le texte ne se lit pas. Les règles d'accessibilité du Web (WCAG 2.2, niveau AA) fixent des seuils de contraste mesurables entre la couleur du texte et celle du fond :

Sources : critères 1.4.3 Contraste (minimum) et 1.4.11 Contraste du contenu non textuel du W3C.

En pratique :

• testez chaque couple texte / fond de votre palette avec le vérificateur de contraste de WebAIM ;

• méfiez-vous des couleurs vives (jaune, vert clair, orange) en texte sur fond blanc : elles échouent souvent ;

• vérifiez le texte de vos boutons : un texte blanc sur un bouton de couleur moyenne est un cas d'échec classique ;

• ne transmettez jamais une information par la couleur seule (un champ en erreur doit aussi avoir un message ou une icône), pour les personnes qui distinguent mal certaines couleurs.

Plusieurs outils en ligne aident à trouver des couleurs qui vont bien ensemble et à les tester :

• Coolors : générateur de palettes (barre d'espace pour en proposer une nouvelle), extraction des couleurs d'une image, vérification du contraste. L'offre gratuite suffit pour un projet.

• Adobe Color : roue chromatique avec les harmonies classiques (complémentaire, analogue, monochrome), extraction de palette depuis une photo, vérificateur de contraste.

• Realtime Colors : affiche votre palette et vos polices sur une maquette de site, ce qui permet de juger le résultat en situation plutôt que sur des pastilles de couleur. Gratuit.

Une fois les couleurs choisies, notez pour chacune son code hexadécimal (ex. #1A5F7A) et son rôle (principale, secondaire, accent, texte, fond). Ajoutez une ou deux nuances plus claires et plus foncées de la couleur principale, utiles pour les fonds de section et les effets de survol. Ce tableau est la base de votre charte graphique.

• Trop de couleurs : au-delà de trois couleurs de marque plus les neutres, le site perd en cohérence.

• Des fonds très saturés sur de grandes surfaces : ils fatiguent les yeux et rendent le texte difficile à lire.

• Une couleur d'accent sur des éléments non cliquables : le visiteur s'attend à pouvoir cliquer sur ce qui a la couleur des boutons.

• Oublier les états : couleur au survol, lien déjà visité, champ sélectionné, message d'erreur et de succès.

• Choisir sur un seul écran : regardez votre palette sur un téléphone, en plein soleil, et sur un écran d'entrée de gamme.

• Copier la palette d'un concurrent : vous perdez l'intérêt d'être reconnaissable.

Déclarez vos couleurs une seule fois, dans les réglages globaux du thème, plutôt que de les saisir bloc par bloc : vous pourrez ensuite modifier une couleur sur tout le site en un clic.

• Avec un thème de blocs : menu Apparence, puis Éditeur, puis Styles, rubrique Couleurs et Palette. Vous pouvez y modifier les couleurs du thème et ajouter vos propres couleurs (voir la documentation WordPress sur les styles).

• Avec Divi : la palette de couleurs se règle dans les options du thème, et les couleurs globales se répercutent dans tout le site. Voir le tutoriel les couleurs dans Divi : palette et couleurs globales.

Pour voir la démarche appliquée à un cas réel, le module 4 de la formation « Mieux utiliser Divi » contient deux leçons sur les couleurs, « Utilisez les couleurs du logo dans le site » et « Des couleurs pour cet exemple » (leçons réservées aux membres) : voir le module Design.

Si vous préférez confier ce travail à un professionnel, demandez à votre designer de livrer la palette avec le logo, sous forme de charte graphique : codes des couleurs, rôles et exemples d'utilisation.