Passer au contenu principal
Toutes les collectionsApparencesAutres informations
Apparences basiques - comment bien choisir les couleurs de mes widgets ?
Apparences basiques - comment bien choisir les couleurs de mes widgets ?

Suivre les bonnes pratiques de choix de couleurs

Ugo Stephant avatar
Écrit par Ugo Stephant
Mis à jour il y a plus d'un an

Lorsque vous créez une Apparence basique dans votre dashboard, vous pouvez renseigner 4 couleurs différentes. 

Idéalement, renseignez ces couleurs au format hexadécimal, selon ce que vous aura communiqué votre équipe créative. Cette dénomination technique vous assurera d’utiliser les couleurs officielles de votre charte graphique digitale.

Si vous n’avez pas cette information à disposition, vous pouvez toujours utiliser le sélecteur de couleurs qui s'affiche au clic sur le champ concerné.

Couleur du bouton

On parle ici du bouton principal d’appel à l’action du paywall, celui qui invite le lecteur à effectuer l’action proposée.

Couleur principale

C’est la couleur de base qui s’affiche à la vue du paywall. Cette couleur doit être attractive et impactante tout en restant intégrée à la charte de votre marque. Le contraste entre la couleur du bouton et la couleur du texte devant être important, nous déconseillons les nuances de jaune.

❌ Éviter les couleurs claires comme le jaune

Couleur au survol

C’est la couleur que prend le bouton lorsqu’il est survolé par le curseur de la souris. Pour la choisir, voici nos conseils :

  • une couleur qui est légèrement différente de la couleur principale, afin que l’utilisateur voit un changement

  • mais une couleur qui n’est pas trop différente de la couleur principale non plus, afin de ne pas créer de rupture visuelle surprenante voire désagréable

  • une couleur qui préserve le contraste assez fort entre elle et celle du texte du bouton, comme expliqué un peu plus haut

Une piste est par exemple d’utiliser la même couleur que la couleur principale, mais avec un peu moins de luminosité.

Couleur d'habillage

Elle sert à colorer la ligne horizontale placée à gauche de certains widgets ainsi que l'animation de confirmation de déblocage d'un article.

Pour bien la choisir, vous devez prendre en considération deux points :

  • conserver la lisibilité du texte de confirmation de déblocage en choisissant un contraste assez fort (ce texte de confirmation est blanc ; nous conseillons donc d’éviter les nuances de jaune)

  • rester cohérent·e avec l’univers graphique de votre marque

Couleur de l'abonnement

Beaucoup de médias possèdent un code couleur précis lorsqu'ils parlent de la notion d'abonnement. Renseignée ici, elle sera utilisée comme couleur de survol pour le lien d'abonnement. Cela vous permettra de conserver des parcours utilisateurs logiques et cohérents sur l’ensemble des pages de votre site.

Nota bene sur les couleurs de textes

Pour des raisons évidentes de cohérence, de visibilité et de lisibilité, nous avons fait le choix de ne pas rendre la couleur des textes administrable.

Si vous souhaitez toucher à ces couleurs afin de (par exemple) pouvoir utiliser une couleur claire telle que le jaune comme couleur principale du bouton, alors vous pouvez utiliser le champ de CSS personnalisé mis à disposition.

Une personne de votre équipe technique pourra facilement rédiger le code CSS nécessaire à l’adaptation graphique sur-mesure.

Si vous avez des questions, n'hésitez pas à nous contacter via le chat Intercom !

Avez-vous trouvé la réponse à votre question ?