Grafieken toegankelijk maken bij kleurenblindheid

Grafieken zijn de plek waar problemen met kleurtoegankelijkheid het scherpst zichtbaar worden. Een legenda die reeksen uitsluitend op kleur onderscheidt, is meteen waardeloos zodra de lezer die twee kleuren niet uit elkaar houdt. Deze gids laat zien hoe u dat structureel oplost.

Het kernprobleem: de kleurgebonden legenda

De meeste grafieken volgen hetzelfde patroon: een legenda opzij koppelt kleuren aan reeksnamen. De lezer moet twee dingen doen: de kleur uit de legenda onthouden en die vervolgens terugvinden in de lijn of balk.

Kan de lezer groen niet van rood scheiden, dan faalt de tweede stap en is er geen weg terug.

De beste oplossing: label direct. Zet de naam van de reeks pal naast de eigen lijn of balk. Dat schrapt de hele koppelstap — en leest voor iedereen prettiger.

Kies een veilig palet

Moet u kleur gebruiken om reeksen te scheiden, kies dan uit beproefde paletten.

Het Okabe-Ito-palet — acht kleuren die bij alle gangbare kleurzienstoornissen onderscheidbaar blijven:

Zwart #000000
Oranje #E69F00
Lichtblauw #56B4E9
Blauwgroen #009E73
Geel #F0E442
Blauw #0072B2
Vermiljoen #D55E00
Roodpaars #CC79A7

Voor continue data gebruikt u Viridis of Cividis. Beide lopen gelijkmatig op in helderheid en blijven daardoor leesbaar, ook in zwart-witdruk.

Aantal reeksen: beperk u waar mogelijk tot vijf of zes per grafiek. Hoe meer kleuren, hoe groter de kans op verwarring — voor iedereen.

Voeg niet-kleurgebonden onderscheid toe

Per grafiektype:

Lijngrafieken

Varieer de lijnstijl: doorgetrokken, gestreept, gestippeld, streep-stip
Varieer de puntmarkeringen: cirkel, vierkant, driehoek, ruit
Varieer de lijndikte voor de belangrijkste reeks

Staafdiagrammen

Gebruik arceringen voor gestapelde staven (diagonaal, stippen, ruitjes)
Toon numerieke waarden op of in de staven
Gebruik witruimte en groepering om categorieën te scheiden

Taart- en ringdiagrammen

Label elk segment direct met naam en percentage
Gebruik witte scheidingslijnen tussen segmenten voor duidelijke grenzen
Overweeg een staafdiagram: dat laat waarden altijd nauwkeuriger aflezen

Heatmaps

Gebruik een palet met een doorlopend helderheidsverloop, niet rood-naar-groen
Toon numerieke waarden in de cellen wanneer daar ruimte voor is
Voeg een kleurenschaal met duidelijke waardelabels toe

Spreidingsdiagrammen

Gebruik puntvormen naast kleur
Overweeg aparte deelgrafieken in plaats van meerdere groepen over elkaar

Contrast voor niet-tekstuele elementen

WCAG 2.2 vraagt een contrastverhouding van minimaal 3:1 voor grafische elementen die nodig zijn om de inhoud te begrijpen. Daaronder vallen:

de lijnen in een lijngrafiek ten opzichte van de achtergrond
de grenzen tussen aangrenzende segmenten
focusindicatoren
rasterlijnen die nodig zijn om waarden af te lezen

Nauwelijks zichtbare rasterlijnen zijn een veelvoorkomend probleem: maak ze sterk genoeg om te lezen, maar niet zo prominent dat ze de data overstemmen.

Vergeet de tekst niet

Bij een toegankelijke grafiek hoort:

Een titel die de conclusie benoemt, niet alleen het onderwerp — “Omzet groeide 40% in Q3” is beter dan “Kwartaalomzet”
Alternatieve tekst die de belangrijkste trend samenvat voor schermlezergebruikers
Een datatabel als alternatief voor wie de exacte waarden wil

Dezelfde data in twee vormen is geen doublure, maar toegankelijkheid.

Uw testroutine

Zet om naar grijstinten — de snelste toets. Blijven de reeksen te scheiden, dan is uw helderheidscontrast voldoende
Simuleer — controleer de grafiek met onze simulator als protanopie, deuteranopie en tritanopie
Controleer contrastverhoudingen — gebruik de contrastchecker voor lijnen en labels tegen de achtergrond
Druk af in zwart-wit — de klassieke test die nog altijd feilloos werkt

Beknopte checklist

Reeksen zijn direct gelabeld, niet alleen via een kleurgebonden legenda
Er is een palet gekozen dat veilig is bij kleurenblindheid
Er is niet-kleurgebonden onderscheid (lijnstijl, puntvorm, arcering)
Grafische elementen halen een contrastverhouding van 3:1
De titel benoemt de belangrijkste conclusie
Er is alternatieve tekst of een datatabel
De grafiek blijft leesbaar in grijstinten
Gecontroleerd met minstens drie simulatievormen

Kort antwoord