Werkt de kleur van een knop echt?
Nauwelijks. Wat werkt is contrast: valt je knop op tegen alles eromheen? Welke kleur dat oplevert, is bijzaak.
De beroemde verhalen over een rode knop die het van een groene wint, gingen daar ook over. Op die pagina’s was rood de enige kleur die verder nergens voorkwam.
Op een site met een rode huisstijl werkt precies andersom.
Waarom contrast wel telt
Je oog zoekt naar wat afwijkt. Een knop die dezelfde kleur heeft als je koppen en je links, verdwijnt in het geheel.
Kies dus een kleur die je verder spaarzaam gebruikt, en reserveer die voor je hoofdactie.
Het misverstand
Kleurtesten zijn populair omdat ze makkelijk uit te voeren zijn. Je verandert één waarde en je hebt een uitkomst.
Maar de winst per test is klein en verdwijnt zodra je huisstijl verandert. Meer daarover lees je bij a/b-testen.
Wat wel verschil maakt
De tekst op de knop, de plek waar hij staat, en of het duidelijk is wat er gebeurt. Die drie samen wegen vele malen zwaarder dan kleur.
Daarna: grootte en witruimte eromheen. Een knop met lucht eromheen valt meer op dan een felle knop tussen andere elementen geplet.
Mijn vuistregels
- Kies één accentkleur en gebruik die alleen voor je hoofdactie.
- Zorg voor genoeg contrast met de achtergrond; dat is ook een toegankelijkheidseis.
- Geef je knop ruimte; witruimte doet meer dan felheid.
- Test de tekst voordat je de kleur test.
Die laatste is de volgorde die de meeste mensen omdraaien.
De toegankelijkheidskant
Je knoptekst moet genoeg contrast hebben met de knopkleur, anders is hij voor slechtziende bezoekers slecht leesbaar.
Vertrouw daarbij niet op kleur alleen: iemand die kleurenblind is, moet de knop ook aan vorm en plek herkennen. Meer daarover lees je bij accessibility.
Wanneer kleur wel uitmaakt
Bij een knop die iets onomkeerbaars doet, zoals verwijderen. Daar is rood een gangbare afspraak die mensen herkennen.
En bij een tweede, ondergeschikte actie: die maak je juist rustiger zodat de hoofdactie blijft opvallen.