Gebruik kleur met een doel

Als je kleuren gebruikt doe je dat met een bepaald doel, hierdoor hebben ze een betekenis. Het is belangrijk dat die kleur consistent hoort bij die betekenis. Bijvoorbeeld: rood wordt gebruikt om risico aan te geven, of een blokkade door een foutmelding. Gebruik rood dan niet wanneer je juist wél ergens op moet klikken, zoals een link of een verzendbutton.

Signaalkleuren

Het kan zijn dat in je huisstijl de 'stoplichtkleuren' rood, amber of groen een belangrijke rol hebben. Gebruik rood dan niet als primaire kleur voor interactieve elementen zoals een link of button. Probeer deze 'stoplichtkleuren' op plekken te gebruiken waar ze je huisstijl ondersteunen, maar geen verwarring veroorzaken voor gebruikers. Daarnaast zijn ze ook inzetbaar als signaalkleur voor bijvoorbeeld een fout- of succesmelding.

Interactie

Het is verstandig om vanuit je kleurenpalet één kleur als uitgangspunt aan te houden voor interactie. Door dat te doen, help je gebruikers interactieve elementen te herkennen, en wordt je interface geen kleurenkermis. Een blauwe tint geeft het sterkste signaal voor interactie, maar andere kleuren werken bijna net zo goed. Gebruik deze kleur vervolgens niet meer voor niet-interactieve elementen. Dus wel voor buttons, links, breadcrumbs, pagination, accordions, etc. Maar niet voor headings.

Inzicht vanuit gebruikersonderzoek

Uit een onderzoek van Gemeente Utrecht blijkt dat de kleur rood mensen die laaggeletterd zijn afschrikt. Bijvoorbeeld als achtergrondkleur van een button. De tekst wordt niet gelezen, de laaggeletterde acteert op kleur. Deze kleur wordt daarom niet langer als standaard interactie kleur toegepast.

Gerelateerde WCAG-succescriteria:

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.