Hoe verander je de kleur van Feedback-knoppen

De Ja- en Nee-feedbackknoppen onderaan elk artikel lijken standaard grijs wanneer lezers er niet overheen zweven. Deze lage contrast-standaard maakt de knoppen moeilijker op te vallen, waardoor de kans kleiner wordt dat lezers ermee omgaan. Je kunt de standaardknoppen overschrijven met een CSS-snippet om ze zichtbaarder te maken, je merkkleuren te laten overeenkomen of een duidelijker visueel onderscheid te maken tussen de positieve en negatieve feedbackopties.

Wanneer dit te gebruiken

Gebruik deze aanpassing wanneer je wilt:

• Maak feedbackknoppen prominenter zodat lezers er eerder mee zullen interacteren.
• Pas merkkleuren toe op de Ja- en Nee-knoppen om een consistente visuele ervaring te creëren.
• Onderscheid de Ja- en Nee-knoppen met verschillende kleuren, bijvoorbeeld groen voor Ja en rood voor Nee, om hun betekenis in één oogopslag te versterken.

Voordat je begint

• Je hebt toegang nodig tot Instellingen (
  ) > Kennisbanksite > Site-aanpassing > Custom CSS & JavaScript in het kennisbankportaal.
• Zorg dat je gewenste HEX-kleurcodes klaar is voordat je begint. Het standaardfragment gebruikt #5ebf83 (groen) voor Ja en #e67367 (rood/oranje) voor Nee.

Hoe de kleur van de standaard feedbackknop te wijzigen

1. Navigeer naar Instellingen (

   ) > Kennisbanksite > Site-aanpassing > Aangepaste CSS & JavaScript in het kennisbankportaal.

   

2. Selecteer in het linker navigatiepaneel het tabblad CSS en plak het volgende fragment:

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

3. Werk de kleurcodes bij naar de gewenste waarden.

4. Klik op Opslaan.

   

Uitkomst

Voorheen

De feedbackknoppen lijken grijs wanneer lezers er niet overheen zweven, waardoor ze gemakkelijk te missen zijn.

Na

Na het toepassen van de CSS worden de feedbackknoppen altijd weergegeven in de opgegeven kleuren, niet alleen tijdens het hoveren.

Best practices

• Houd Ja en Nee visueel verschillend. Lezers verwerken kleursemantiek snel. Groen gebruiken voor Ja en rood of oranje voor Nee volgt de gevestigde conventie en vermindert de cognitieve inspanning. Vermijd het gebruik van vergelijkbare kleuren voor beide knoppen.
• Controleer het contrast met de achtergrond van je pagina. De knoppenkleuren die je kiest moeten leesbaar zijn tegen zowel lichte als donkere achtergronden. Gebruik een contrastchecker om te controleren of je keuzes voldoen aan de WCAG AA-normen (minimaal 3:1 voor UI-componenten).
• Test na het opslaan. Open een artikel op je kennisbanksite en bevestig of de knoppen in de juiste kleuren worden weergegeven, zowel in hun standaardstaat als bij het hoveren.