Comment changer la couleur des boutons de retour d’information

Les boutons de retour Oui et Non en bas de chaque article apparaissent gris par défaut lorsque les lecteurs ne survolent pas ces boutons. Ce défaut à faible contraste peut rendre les boutons plus difficiles à remarquer, réduisant ainsi la probabilité que les lecteurs interagissent avec eux. Vous pouvez remplacer les couleurs par défaut des boutons en utilisant un extrait CSS pour les rendre plus visibles, correspondre aux couleurs de votre marque, ou créer une distinction visuelle plus claire entre les options de retour positif et négatif.

Quand utiliser cela

Utilisez cette personnalisation lorsque vous souhaitez :

• Rendez les boutons de retour plus visibles pour que les lecteurs soient plus susceptibles d’interagir avec eux.
• Appliquez les couleurs de la marque aux boutons Oui et Non pour créer une expérience visuelle cohérente.
• Différenciez les boutons Oui et Non avec des couleurs distinctes, par exemple le vert pour Oui et le rouge pour Non, afin de renforcer leur signification d’un coup d’œil.

Avant que tu commences

• Vous avez besoin d’accéder aux paramètres (
  ) > site de la base de connaissances > personnalisation du site > CSS & JavaScript personnalisés dans le portail de la base de connaissances.
• Ayez vos codes de couleur HEX désirés prêts avant de commencer. Le extrait par défaut utilise #5ebf83 (vert) pour Oui et #e67367 (rouge/orange) pour Non.

Comment changer la couleur par défaut du bouton de retour d’information

1. Naviguer dans les paramètres (

   ) > site de la base de connaissances > personnalisation du site > CSS & JavaScript personnalisés dans le portail de la base de connaissances.

   

2. Depuis le panneau de navigation de gauche, sélectionnez l’onglet CSS et collez l’extrait suivant :

.article-feedback-action{
  button[aria-label="Yes"]{
    background-color: #5ebf83;
    color: white;
  }
  button[aria-label="No"]{
    background-color: #e67367;
    color: white;
  }
}

3. Mettez à jour les codes couleur selon les valeurs souhaitées.

4. Cliquez sur Enregistrer.

   

Conséquences

Avant

Les boutons de retour d’information apparaissent gris lorsque les lecteurs ne les survolent pas, ce qui les rend faciles à manquer.

Après

Après application du CSS, les boutons de retour s’affichent en permanence dans les couleurs spécifiées, pas seulement en survolant.

Meilleures pratiques

• Gardez Yes et Non visuellement distincts. Les lecteurs traitent rapidement la sémantique des couleurs. Utiliser le vert pour le Oui et le rouge ou l’orange pour Non suit la convention établie et réduit l’effort cognitif. Évitez d’utiliser des couleurs similaires pour les deux boutons.
• Vérifiez le contraste avec l’arrière-plan de votre page. Les couleurs des boutons que vous choisissez doivent être lisibles sur les fonds en mode clair et sombre. Utilisez un vérificateur de contraste pour vérifier que vos choix respectent les normes WCAG AA (minimum 3:1 pour les composants UI).
• Test après avoir sauvegardé. Ouvrez un article sur votre site de base de connaissances et confirmez que les boutons affichent les bonnes couleurs à la fois dans leur état par défaut et en survolant.