Wat is informatief kleurgebruik?
Bij informatief kleurgebruik gaat het om het toepassen van kleur om belangrijke informatie of functies in een digitale omgeving over te brengen. Dit kan bijvoorbeeld de kleur van tekst zijn, maar ook het menu, de knoppen en formuliervelden. En laten we de statusindicatoren niet vergeten: is een menu-item actief of inactief? Regelmatig wordt kleur ook gebruikt om een betekenis over te brengen, zo wordt de kleur groen vaak gebruikt om een succesvolle actie aan te geven en rood juist voor een foutmelding. Om te zorgen dat iedereen dezelfde informatie kan waarnemen, is het belangrijk dat de kleurkeuzes in ieder geval voldoende contrast bieden.
Toegankelijkheid van functionele elementen
Naast tekst zijn er dus ook interactieve elementen, zoals de knoppen, formuliervelden en menu-items, die afhankelijk zijn van kleur om hun status aan te geven. Denk aan een actieve knop, de randkleur van een tekstveld of het in- óf uitgeschakeld zijn van een checkbox. Deze elementen moeten ook voor mensen met een visuele beperking voldoende onderscheiden kunnen worden, ten opzichte van de achtergrond en de andere elementen, om de functionaliteit te begrijpen.
Zo moeten knoppen en menu-items duidelijk aangeven of ze interactief zijn. Bijvoorbeeld door het gebruik van een contrasterende kleur voor een actieve knop, of door een kleurverandering als je met je muis over het element beweegt, de zogeheten hover- of focus-effecten.
Randen van een formulierveld kunnen met een kleur de status aangeven, zoals een rode rand voor een foutmelding of een groene rand voor een succesvol ingevuld veld. Het is belangrijk dat deze kleuren een goed contrast bieden met de achtergrond.
Uitzonderingen op kleurgebruik
Niet alle kleurgebruik is even belangrijk voor de toegankelijkheid. Er zijn enkele gevallen waarin kleur minder kritisch is voor de gebruikservaring en toegankelijkheid:
- Niet-functionele of niet-informatieve informatie, zoals decoratieve onderdelen
Kleur wordt vaak gebruikt om content aantrekkelijk te maken en om accenten toe te voegen. Dit soort decoratieve elementen zijn niet informatief en hebben geen invloed op de functionaliteit of de boodschap die wordt overgebracht. Zolang de leesbaarheid van tekst of andere belangrijke informatie niet wordt aangetast, mogen deze elementen (eventueel) minder contrast hebben.
- Inactieve elementen
Het komt wel eens voor dat elementen bewust inactief weergegeven worden, zoals een uitgeschakelde knop of een niet-selecteerbare checkbox. In het kader van digitale toegankelijkheid moeten deze (in)actieve elementen goed van elkaar onderscheiden kunnen worden, maar ook hierbij gelden vanuit het WCAG minder strikte regels omtrent kleur en contrast.
- Logo's en beeldmerken
Merkidentificaties zijn meestal gebonden aan richtlijnen vanuit het betreffende merk. Een logo hoeft daardoor niet per se te voldoen aan de contrastvereisten. Toch is het ook hierbij van belang dat ze op de juiste manier weergegeven worden. Ze moeten immers voor iedereen zichtbaar en vooral herkenbaar zijn.
Praktische tips
Door rekening te houden met de WCAG-richtlijnen wordt (digitale) content voor iedereen een stuk toegankelijker gemaakt. Informatief kleurgebruik is daar een belangrijk onderdeel van. Een praktische tip om dit toe te passen is bijvoorbeeld, het toevoegen van tekstlabels, patronen of een icoontje bij de aanduiding van een foutmelding of een actieve knop. De betekenis van zo’n element is dan niet meer alleen afhankelijk van kleur.
Ook kan het gebruik van te veel verschillende kleuren verwarrend zijn, dus kies voor een beperkt aantal kleuren die goed met elkaar contrasteren. Gebruik deze kleuren vervolgens consistent om logica en duidelijkheid voor de gebruikers te creëren. Én zorg ervoor dat alle interactieve elementen genoeg visuele focus krijgen, door de kleur (van de knop zelf of de rand) te veranderen als je er met je muis overheen beweegt.
NB: bekijk ook eens de snelstartgids Maak open! met 10 handige sleutels om je digitale publicaties toegankelijk te maken, waaronder informatief kleurgebruik.
Bronnen: Dedicon, W3C/WCAG, Inclusief Publiceren
