Wat betekent informatief kleurgebruik?
Bij informatief kleurgebruik draagt kleur informatie (over functie) over. Als je kleur niet goed kunt waarnemen, mis je deze informatie of functionaliteit. Denk bijvoorbeeld aan een rood kader rondom een formulierveld als deze verkeerd is ingevuld. Of een wisseling van kleur als een menu-item actief is. Voor (informatieve) publicaties wordt vaak kleur gebruikt om onderdelen in een datavisualisatie te onderscheiden. Denk aan een taartdiagram. Of om met een legenda onderdelen op een kaart aan te duiden. In al deze gevallen moet er naast kleur ook een andere visuele manier gebruikt worden om de informatie over te dragen.
Geen probleem als kleur in je publicatie informatie overdraagt. Maar zorg ook voor een andere manier waarop de informatie wordt overgedragen. Dit kan op verschillende manieren.
In datavisualisaties zoals grafieken en diagrammen wordt vaak gebruik gemaakt van kleur. Meestal gekoppeld aan een legenda. Als je de kleuren niet goed kunt onderscheiden, weet je ook niet hoe je de data moet interpreteren. Mogelijke oplossingen zijn:
- Patronen: gebruik patronen om de verschillende elementen van elkaar te onderscheiden. Bijvoorbeeld verschillende soorten strepen of stippen. Dan zijn de elementen ook zonder kleur van elkaar te onderscheiden.
- Labels: voeg labels toe aan de elementen. Plaats bijvoorbeeld tekst in of gelinkt aan de stukken van een taartdiagram.
Ook in tekst kan kleur worden gebruikt om informatie over te dragen. Bijvoorbeeld arcering met een specifieke betekenis. Of rode tekst om aan te duiden dat het een waarschuwing is. Manieren om naast kleur informatie over te dragen zijn:
- Tekst of symbolen toevoegen: door tekst toe te voegen draag je de betekenis van kleur duidelijk over. Bijvoorbeeld “Let op”.
- Tekstopmaak: pas specifieke opmaak toe aan tekst zoals vetgedrukt. Zorg er natuurlijk wel voor dat de tekst aangenaam en rustig leesbaar blijft.
- Kaders: voeg kaders toe rondom gekleurde woorden of tekst. Hier kun je verschillende soorten kaders afwisselen zoals dubbele lijnen of stippellijnen.
Deze oplossingen kunnen in combinatie met elkaar worden gebruikt. Daarbij kunnen ze ook toegepast worden als kleur een status(wijziging) aangeeft van een element. Zoals actieve menu-items of een foutmeldingen in een formulierveld. Voorbeeld: in een formulier zijn verkeerd ingevulde velden rood gemarkeerd. Dan kan dit aangevuld worden met een symbool zoals een uitroepteken.
WCAG en informatief kleurgebruik
Het criterium 1.4.1: Gebruik van kleur uit WCAG 2.2 heeft betrekking op informatief kleurgebruik. Het criterium stelt dat kleur niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.
Gerelateerd aan informatief kleurgebruik is criterium 1.3.3 zintuiglijke eigenschappen. Dit criterium gaat niet over het gebruik van kleur, maar over verwijzingen naar kleur. Het criterium stelt dat een verwijzing naar alléén kleur (druk op de blauwe knop), niet toegestaan is. Naast de verwijzing via kleur moet er ook een andere manier zijn. Bijvoorbeeld druk op de blauwe verzendknop. Dit geldt volgens het criterium niet alleen voor kleur, maar ook voor vorm, omvang, visuele locatie, oriëntatie en geluid.
Naast eisen over informatief kleurgebruik, staan in de WCAG ook eisen beschreven over contrast. Die eisen zijn uitgelegd in artikel kleurcontrast.
Toetsen
Toetsen of er voldaan wordt aan dit criterium kan door visueel door content heen te gaan. Let hierbij op onderdelen in een afwijkende kleur, zoals tekst in een andere kleur, informatieve afbeeldingen en datavisualisaties. Maar ook onderdelen waar interactie mee mogelijk is zoals knoppen, formuliervelden en menu’s. Daarbij is het belangrijk dat statuswijzigingen niet alleen met kleur worden aangeduid. Als je toetst op informatief kleurgebruik, kun je ook direct toeten op kleurcontrast.
