An artistic abstract background with a spectrum of vibrant colors forming a fluid gradient.

Waarom iets communiceren met alleen een kleur niet voldoende is.

DoorGiljam Nijsse

Stel: je vult een formulier in op een website. Sommige velden zijn rood gemarkeerd. Daarmee wil de website duidelijk maken dat deze velden verplicht zijn of dat er iets fout is ingevuld.

Voor veel bezoekers lijkt dat misschien duidelijk. Maar niet iedereen ziet kleuren op dezelfde manier. Iemand die kleuren minder goed onderscheidt, kan die rode markering missen. De informatie is er dan wel, maar wordt niet door iedereen begrepen.

Dat is precies waar WCAG 1.4.1 Gebruik van kleur over gaat. Kleur mag helpen om informatie duidelijker te maken, maar kleur mag niet de enige manier zijn waarop belangrijke informatie wordt overgebracht.

Wat betekent WCAG 1.4.1 Gebruik van kleur?

WCAG 1.4.1 Gebruik van kleur betekent dat kleur niet de enige manier mag zijn om informatie duidelijk te maken. Dat geldt bijvoorbeeld voor informatie in formulieren, foutmeldingen, links, grafieken, tabellen en statusmeldingen.

Je mag kleuren natuurlijk zeker gebruiken en ook gebruiken om te communiceren, zoals een rood kader rond een fout veld, een groene melding na een succesvolle actie of een blauwe link kan heel nuttig zijn. Kleur helpt om een pagina overzichtelijker en begrijpelijker te maken.

Maar het wordt een probleem wanneer kleur de enige aanwijzing is. Als een bezoeker de kleur niet goed ziet of het kleurverschil niet herkent, kan de betekenis verloren gaan. Daarom moet belangrijke informatie ook op een andere manier zichtbaar zijn. Bijvoorbeeld met tekst, een icoon, een patroon, een onderstreping of een duidelijke melding.

De kern is dus eenvoudig: gebruik kleur als ondersteuning, maar niet als enige manier om iets duidelijk te maken.

Voor wie is dit belangrijk?

Niet iedereen ziet kleuren op dezelfde manier. Daarom is WCAG 1.4.1 Gebruik van kleur belangrijk voor verschillende groepen gebruikers.

Mensen die kleuren minder goed onderscheiden

Sommige mensen zijn kleurenblind of kunnen bepaalde kleuren moeilijk van elkaar onderscheiden. Rood en groen kunnen bijvoorbeeld minder duidelijk van elkaar verschillen. Als een website alleen kleur gebruikt om iets duidelijk te maken, kan belangrijke informatie verloren gaan.

Mensen met slechtziendheid

Ook mensen met slechtziendheid kunnen moeite hebben met kleurverschillen. Een rood kader, groene melding of oranje waarschuwing is dan niet altijd goed herkenbaar. Zeker wanneer het contrast laag is of de kleur subtiel wordt gebruikt.

Oudere bezoekers

Naarmate mensen ouder worden, kan het zicht veranderen. Kleuren kunnen minder helder overkomen en kleine kleurverschillen zijn soms moeilijker te zien. Informatie die alleen via kleur wordt gegeven, is dan minder betrouwbaar.

Mensen in lastige gebruikssituaties

Ook de situatie speelt mee. Denk aan fel zonlicht op een mobiel scherm, een lage schermhelderheid of vermoeide ogen na een lange werkdag. Zelfs iemand zonder visuele beperking kan kleurverschillen dan minder goed waarnemen.

De kern

Als belangrijke informatie alleen via kleur wordt overgebracht, kan een deel van de bezoekers die informatie missen. Daarom is het belangrijk om kleur altijd te combineren met een extra aanwijzing, zoals tekst, een icoon, een patroon, een onderstreping of een duidelijke melding.

Veelvoorkomende voorbeelden

WCAG 1.4.1 Gebruik van kleur gaat vaak mis op plekken waar kleur ongemerkt betekenis krijgt. Een paar herkenbare voorbeelden:

  • Verplichte velden zijn alleen rood gemarkeerd
  • Een foutmelding krijgt alleen een rood kader
  • Links zijn alleen door kleur herkenbaar
  • Grafieken gebruiken alleen gekleurde lijnen
  • Statussen zijn alleen groen, oranje of rood

Kort gezegd: als kleur de enige aanwijzing is, kan belangrijke informatie gemist worden.

Hoe los je dit goed op?

Een toegankelijke oplossing hoeft meestal niet ingewikkeld te zijn. Vaak is het al voldoende om kleur te combineren met een tweede aanwijzing. Zo blijft de informatie ook duidelijk voor mensen die kleurverschillen minder goed zien.

Situatie

Oplossing

Rood gemarkeerd verplicht veld

Voeg tekst toe, zoals “verplicht”, of gebruik een sterretje met een korte uitleg.

Rood kader rond een fout ingevuld veld

Toon ook een duidelijke foutmelding, zoals “Vul een geldig e-mailadres in.”

Groene melding na een succesvolle actie

Voeg tekst toe, zoals “Je formulier is succesvol verzonden.”

Waarschuwingskleur bij een melding

Gebruik naast kleur ook een icoon en tekst die uitlegt wat er aan de hand is.

Grafiek met gekleurde lijnen of vlakken

Gebruik ook labels, patronen of verschillende lijnstijlen.

Link die alleen door kleur herkenbaar is

Onderstreep de link of geef deze een andere duidelijke visuele aanwijzing.

Statussen in groen, oranje en rood

Voeg tekstlabels toe, zoals “Goedgekeurd”, “Controle nodig” of “Afgekeurd.”

De belangrijkste regel is: vraag jezelf steeds af of de betekenis ook duidelijk blijft wanneer iemand de kleur niet goed ziet. Als het antwoord nee is, is er een extra aanwijzing nodig.

Formulierveld Achternaam met alleen een rood kader als foutaanduiding.
De gebruiker ziet dat er iets mis is, maar niet wat er precies fout is of wat moet worden ingevuld.
Formulierveld Achternaam met rood kader en foutmelding: het veld achternaam is niet ingevuld.
Naast kleur wordt ook tekst gebruikt, zodat de gebruiker begrijpt welk veld niet is ingevuld.
Drie producten met alleen groene, oranje en rode bolletjes om beschikbaarheid aan te geven.
Wie het verschil tussen groen, oranje en rood niet goed ziet, mist de betekenis van de bolletjes.
Drie producten met gekleurde bolletjes en tekstlabels: beschikbaar, beperkt en uitverkocht.
Door labels als “Beschikbaar”, “Beperkt” en “Uitverkocht” is de status voor iedereen duidelijker.
Planner van juli waarin groene en rode vakjes aangeven welke datums beschikbaar of bezet zijn.
Als alleen groene en rode vakjes worden gebruikt, is niet voor iedereen duidelijk welke data beschikbaar of bezet zijn.
Planner van juli waarin elke datum ook tekst toont: beschikbaar of bezet.
Door in elk vakje ook “Beschikbaar” of “Bezet” te tonen, blijft de planning begrijpelijk zonder alleen op kleur te vertrouwen.

Waar wordt op gecontroleerd bij een WCAG-onderzoek?

Bij een WCAG-onderzoek wordt gecontroleerd of belangrijke informatie niet alleen via kleur wordt overgebracht. Dat wordt onder andere bekeken bij formulieren, foutmeldingen, links, knoppen, tabellen, grafieken, statusmeldingen en interactieve onderdelen.

De centrale vraag is steeds: blijft de informatie begrijpelijk als iemand de kleur niet goed waarneemt?

Als kleur de enige aanwijzing is, is er een extra signaal nodig. Denk aan tekst, een icoon, een patroon, een onderstreping of een duidelijke melding. Zo blijft de informatie niet alleen zichtbaar, maar ook begrijpelijk voor verschillende gebruikers.

Checklist: controleer je kleurgebruik

Wil je weten of kleur op je website goed wordt gebruikt? Stel dan bij elke kleurkeuze deze vragen:

  1. Geeft deze kleur belangrijke informatie door?
  2. Is die informatie ook op een andere manier zichtbaar?
  3. Begrijpt de gebruiker wat er aan de hand is zonder alleen op kleur te letten?
  4. Is duidelijk wat de gebruiker moet doen?
  5. Zijn links, foutmeldingen, statussen en grafieken ook zonder kleurverschil te begrijpen?

Als het antwoord op één van deze vragen “nee” is, is kleur waarschijnlijk te belangrijk geworden. Voeg dan een extra aanwijzing toe, zoals tekst, een icoon, een onderstreping, een patroon of een duidelijke melding.

De hoofdregel blijft eenvoudig: kleur mag helpen om informatie duidelijker te maken, maar mag niet de enige manier zijn waarop betekenis wordt overgebracht.

Lees hier meer artikelen