Let op verschillen in waarneming van kleur

Vergeet niet dat mensen kleur op verschillende manieren kunnen waarnemen en ervaren. Soms zelfs helemaal niet.

Voorbeelden van verschillen in waarneming:

Iets niet kunnen zien als er tussen twee tinten te weinig contrast is

Lees meer over kleurcontrast opZorg voor voldoende kleurcontrast voor tekst tegen de achtergrond en Zorg voor voldoende kleurcontrast voor niet-tekstuele content.

Geen verschil kunnen zien tussen kleuren

Wanneer je twee kleuren naast elkaar gebruikt om verschil duidelijk te maken, kies dan kleuren die ook verschillend zijn voor mensen met kleurenblindheid. Dit is essentieel voor bijvoorbeeld datavisualisatie met een grafiek of landkaart.

En als je kleur gebruikt om de status van de component duidelijk te maken (bijvoorbeeld ‘disabled’ of ‘invalid’). Verander dan niet alleen de kleur, maar kies ook voor een donkerdere of lichtere tint, of maak de lijnen en tekst dikker.

Last ervaren van een te hoog contrast

Gebruik daarom geen puur zwarte tekst op een puur witte achtergrond. Zo’n sterk contrast (21:1) kan ertoe leiden dat mensen tekst wazig, bewegend of flikkerend ervaren.

Dit staat bekend als het Irlen-syndroom. Overweeg daarom het contrast te beperken tot bijvoorbeeld 17:1. Kies als tekstkleur bijvoorbeeld niet zwart, maar donker grijs.

Last ervaren van heldere kleuren en hoog contrast

Als je erg gevoelig bent voor licht, dan kun je software gebruiken om alle kleuren op het scherm donkerder te maken en de kleuren minder verzadigd weer te geven.

Dat kan bijvoorbeeld met Windows high contrast mode.

Meer op kleur dan tekst vertrouwen

Als je de Nederlandse taal niet spreekt of kan lezen, of als je laaggeletterd bent, dan kunnen kleuren essentieel zijn om de betekenis te begrijpen. Rood is fout, groen is goed, amber is een waarschuwing.

Schrik deze gebruikers niet onnodig af door rood te gebruiken voor acties die ongevaarlijk zijn om aan te klikken.

Geen kleuren zien, alleen lichte en donkere tinten

Als je een intense kleur wilt gebruiken om de aandacht te trekken, dan werkt dat niet voor iedereen. Begin eerst met een alternatief zoals een dikkere border, grotere afmeting, vette tekst, of een omgekeerd kleurenpalet.

Bijna niets tot niets zien

Daarom is het belangrijk dat informatie in eerste instantie duidelijk wordt door tekst of door deze informatie via ARIA aan hulpmiddelen door te geven.

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? Open een issue op GitHub en deel je mening.