Gedaan met laden. U bevindt zich op: Kleuren en patronen Visuele data

Kleuren en patronen

De documentatie van het Design System is nog in bèta en wordt stapsgewijs aangevuld.

Vragen? Raadpleeg de vorige documentatiehub(opent in nieuw venster) of contacteer ons.

Hieronder enkele tips voor het ontwerpen van visuals die toegankelijk zijn voor gebruikers die problemen hebben met kleurwaarneming. 

Hou rekening met kleurenblindheid

  • Gebruik tinten in plaats van verschillende kleuren: Gebruik verschillende tinten van één kleur om variatie aan te brengen. Sommige kleuren lijken voor kleurenblinde gebruikers namelijk hard op elkaar (zoals blauw en paars). Door varianten van blauw in plaats van blauw en paars te kiezen, zijn de elementen beter te onderscheiden voor mensen met kleurenblindheid.
  • Test de kleuren: Gebruik tools zoals de Chrome-extensie Colorblindly(opent in nieuw venster) om te controleren of de kleuren te onderscheiden zijn voor mensen met diverse vormen van kleurenblindheid.
  • Kies één donkere hoofdkleur: Gebruik een donkere basiskleur en pas de transparantie aan om verschillende tinten te creëren. Zorg wel dat de tinten voldoende van elkaar verschillen.
Voorbeeld van een kleurenpalet bestaande uit een donkere tint en lichtere tinten ervan, zodat deze te onderscheiden blijven voor mensen met kleurenblindheid.
Voorbeeld van een kleurenpalet bestaande uit 1 donkere kleur en lichtere tinten ervan.
Zwart-wit weergave van hoe het bovenstaand kleurenpalet eruit ziet voor iemand met een bepaalde soort kleurenblindheid.
Kleuren blijven in zwart-wit ook te onderscheiden van elkaar, het worden verschillende tinten grijs; goed voor mensen met kleurenblindheid.

Maak gebruik van witruimte voor meer onderscheid

  • Witruimte tussen kleuren: Het gebruik van witruimte maakt het eenvoudiger om verschillende kleuren te onderscheiden, vooral in grafieken.
  • Categorieën direct in de grafiek opnemen: Door waarden of categorieën direct op de grafiek te zetten, wordt het duidelijker, zelfs zonder kleuren. Als je een legende gebruikt, blijft het belangrijk om te zorgen dat kleuren goed onderscheidbaar zijn. Zie Duidelijke legende.
Don't
  • Kleuren gebruiken die voor een bepaalde kleurenblindheid amper te onderscheiden vallen
  • Deze kleuren naast elkaar gebruiken in de grafiek, zonder witruimte; zo dreigen ze 1 vlak te vormen
Do

Witruimte gebruiken tussen de verschillende kleuren om deze makkelijker van elkaar te onderscheiden

Voorbeeld van een grafiek waar wel witruimte tussen de verschillende kleuren gebruikt wordt, waardoor kleuren makkelijker te onderscheiden zijn van elkaar.
Aangezien legende en waardes reeds meegegeven worden op de grafiek, vallen dankzij witruimte het paarse en donkerblauwe vak genoeg van elkaar te onderscheiden.

In plaats van witruimte, kan je ook een outline gebruiken

  • Gebruik een outline tussen kleuren: Outlines kunnen een alternatief zijn voor witruimte en helpen om kleuren beter te scheiden.
  • Kleuren goed genoeg onderscheiden: Let erop dat kleuren ondanks outlines alsnog goed zichtbaar zijn.
Don't

Pie chart zonder witruimte noch outline

Do

Pie chart met outline (stroke): Alle secties in de chart hebben een rand waardoor de secties nog duidelijker van elkaar onderscheiden kunnen worden.

Voorbeeld van pie chart met outline, waardoor verschillende secties en kleuren beter van elkaar onderscheiden kunnen worden.

Gebruik patronen bovenop kleurverschillen

  • Voeg patronen toe voor kleuronafhankelijk onderscheid: Patronen, zoals stippels of strepen, zijn onafhankelijk van kleur en blijven goed zichtbaar voor kleurenblinde gebruikers.
  • Combinatie van kleur en patroon: Dit kan vooral handig zijn bij datavisualisaties met veel categorieën.
  • Patroon in de legende opnemen: Zorg dat het patroon ook in de legende voorkomt, zodat het overal begrijpelijk blijft.
Don't

Enkel kleur gebruiken als onderscheid. Dit verhoogt het risico op kleuren die niet van elkaar onderscheiden kunnen worden met bepaalde kleurenblindheid.

Voorbeeld van een grafiek waar niet wordt aangegeven dat een actie nodig is van de gebruiker om waardes te onthullen.
Do

Patronen gebruiken om zaken los van kleur te kunnen onderscheiden. Neem de patronen ook op in je legende.

Grafiek die gebruik maakt van patronen bovenop kleuren om de verschillende datasets te onderscheiden van elkaar. Ook worden interactieve elementen weergegeven als bolletjes.

Vermijd kleur indien mogelijk

  • Gebruik patronen als alternatief voor kleur: In sommige gevallen bieden patronen alleen al genoeg onderscheid. Voeg in dat geval geen kleur toe als het niet nodig is.
  • Zorg voor duidelijkheid en interactie: Gebruik punten of markeringen voor interactieve elementen die extra aandacht vragen.
Voorbeeld van een grafiek waar onderscheid enkel gebeurd d.m.v. patronen, zonder verschillende kleuren te gebruiken
Deze grafiek maakt enkel gebruik van patronen om de twee secties van elkaar te onderscheiden, wat kleur onnodig maakt. Het patroon wordt ook opgenomen in de legende.
Deel deze pagina

Neem contact op met het Vlaanderen Design System team. 

Contacteer ons