Vijf tips voor het ontwerpen van visualisaties die geschikt zijn voor kleurenblinden

Opmerking: Deze eerste aflevering van onze serie gastposts is geschreven door Tableau Zen Master Jeffrey Shaffer.

Dit is de eerste aflevering van een serie posts over enkele van de bekende 'regels voor datavisualisatie'. We horen vaak over deze regels, maar de details worden vaak niet diepgaand onderzocht of volledig over het hoofd gezien. Hier ga ik enkele details nader onderzoeken om beter te begrijpen hoe ze moeten worden toegepast. Voor de eerste post van deze serie heb ik onderzoek gedaan naar de combinatie van rood en groen.

Er is een regel voor datavisualisatie die zegt: 'gebruik rood en groen niet samen'.
Het probleem: Tien procent van de mannen zijn kleurenblind en meestal gaat het daarbij om het onderscheid tussen rood en groen.
De oplossing: Gebruik rood en groen niet samen.

Uit onderzoek is gebleken dat ongeveer 8% van de mannen en 0,5% van de vrouwen een vorm van kleurenblindheid hebben. Kleurenblindheid is eigenlijk niet een nauwkeurige term.

Kleurenblind betekent niet dat iemand geen kleuren kan zien. Alleen mensen met achromatopsie zien echt geen kleuren en dit komt niet echt veel voor (1 op de 33.000 mensen). Voor mensen die de andere vorm van kleurenblindheid hebben, is het belangrijkste probleem dat verschillende kleuren er hetzelfde uitzien.

De twee meest voorkomende vormen van kleurenblindheid zijn deuteranomalie en deuteranopie (ongeveer 6% van de mannen), en protanomalie en protanopie (ongeveer 2% van de mannen). Zie color-blindness.com voor meer informatie. Deze gevallen worden ook wel aangeduid als 'roodkleurenblindheid' en 'groenkleurenblindheid' of 'rood-groene kleurenblindheid'. (Opmerking: Ik heb het hier niet over blauw-gele kleurenblindheid omdat deze vorm veel minder vaak voorkomt.)

Hier zijn enkele tips voor het ontwerpen van visualisaties die geschikt zijn voor mensen met kleurenblindheid.

1. De combinatie van rood en groen kan problematisch zijn, maar deze kleuren kunnen soms toch wel samen worden gebruikt.

De combinatie van rood en groen samen is dus inderdaad een veelvoorkomend probleem. Mensen die erg kleurenblind zijn, zien rood en groen allebei als bruin. Mensen met een lichtere mate van kleurenblindheid kunnen sterke rode en groene kleuren wel onderscheiden. De combinatie kan echter nog wel problematisch zijn in het geval van zwakke of gemengde kleuren.

Denk eraan dat de mogelijkheid om deze kleuren te onderscheiden alleen een probleem is als kleur de enige coderingsmethode is die wordt gebruikt om een duidelijke vergelijking te maken, bijvoorbeeld om een goed getal te onderscheiden van een slecht getal in een tabel, of om een regel te onderscheiden van een andere regel in hetzelfde lijndiagram. In het onderstaande diagram is bijvoorbeeld kleur nodig om een goed vierkant te onderscheiden van een slecht vierkant. Met een simulatie van deuteranopie kunnen we zien hoe moeilijk dit kan zijn.

Ik heb kritiek gezien op het gebruik van de combinatie van rood en groen in een en dezelfde visualisatie, maar de kleuren werden niet gebruikt om dingen te onderscheiden. Als ze apart worden weergegeven, bijvoorbeeld als twee verschillende diagrammen waarvan er een rood is en het andere groen, en deze diagrammen een duidelijke naam hebben, dan hoeft het helemaal geen probleem te zijn als ze allebei bruin lijken.

Het volgende diagram geeft een voorbeeld van een aslijn waarin gemakkelijk is te zien dat de meeste getallen positief zijn en andere negatief. Kleur is een secundair kenmerk dat simpelweg positief versus negatief aangeeft. Hoewel dit misschien niet de beste kleurcombinatie is, kan een kleurenblinde deze grafiek interpreteren zonder de kleuren te hoeven onderscheiden.

2. Maar er is meer dan alleen rood en groen.

Veel datavisualisatietools hebben een ingebouwd 'stoplichtpalet' en er zijn nog veel bedrijven (en klanten en leidinggevenden) die dit nog steeds maar al te graag gebruiken. Vanwege de vele discussies over stoplichtkleuren en de bijnamen voor kleurenblindheid is het geen wonder dat de datavisualisatieregel eenvoudigweg is samengevat als 'gebruik rood en groen niet samen'. Hieronder zie je een simulatie van protanopie en de stoplichtkleuren van Tableau.

Je ziet dat het probleem hier veel complexer is dan alleen maar rood versus groen. Aangezien rood, groen en oranje allemaal bruin lijken voor iemand die erg kleurenblind is, zou je eigenlijk moeten zeggen: ‘Gebruik geen combinaties van rood/groen/bruin/oranje’. Maar dat is nog niet alles. Wanneer kleuren worden gemengd, kan dit ook problematisch zijn.

Een kleurencombinatie die vaak over het hoofd wordt gezien, is de combinatie van blauw en paars. In een RGB-kleurmodel wordt paars gemaakt door blauw en rood te combineren. Als iemand problemen heeft met rood, dan kan de persoon ook problemen hebben met paars, omdat dit eruit kan zien als blauw.

Combinaties van roze en grijs, en grijs en bruin kunnen ook problematisch zijn. Hieronder zie je het kleurenpalet van Tableau 10 met een simulatie van deuteranopie. Niet alleen zijn rood, groen en bruin problematisch, maar ook de combinaties blauw en paars, roze en grijs, en grijs en bruin.

Mijn zwager is kleurenblind, dus ik gebruik hem vaak als proefkonijn voor mijn kleurexperimenten. Ik heb veel dingen op hem getest, en de combinatie van kleuren op de afbeelding hieronder (links) was voor hem het moeilijkst te onderscheiden. Hij lijkt last te hebben van protanopie, zoals in de simulatie rechtsonder.

Dus wat moeten we doen, nu we weten dat er veel meer potentieel problematische kleurencombinaties zijn?

3. Gebruik indien nodig een palet dat geschikt is voor kleurenblinden.

Een combinatie van kleuren is over het algemeen prima wanneer deze niet lastig is voor kleurenblinden. Blauw/oranje is bijvoorbeeld een veelvoorkomend palet dat geschikt is voor kleurenblinden. Blauw/rood of blauw/bruin kan ook best werken. Voor de meest frequente typen kleurenblindheid werken al deze combinaties goed, aangezien blauw er voor een kleurenblinde over het algemeen uitziet als blauw.

Tableau heeft een ingebouwd palet dat geschikt is voor kleurenblinden. Het palet is ontworpen door Maureen Stone. Dit palet werkt zeer goed voor de meest voorkomende gevallen van kleurenblindheid. Hieronder zie je het palet voor kleurenblinden van Tableau met een simulatie van deuteranopie en protanopie. Zie je hoe goed dit kleurenpalet werkt voor de verschillende kleurvergelijkingen?

Maar misschien is de combinatie van rood en groen vereist door je baas, de klant, de bedrijfskleuren of de stijlgids. Dus wat kunnen we dan doen?

4. Als je rood en groen samen moet gebruiken, geef dit dan ook weer als licht versus donker.

Voor een kleurenblinde is vooral de kleurtoon het probleem (bijvoorbeeld rood versus groen) en niet de kleurwaarde (licht versus donker).

Bijna iedereen kan het verschil zien tussen een zeer lichte kleur en een zeer donkere kleur, dus een andere optie bij de combinatie van rood en groen is om heel lichtgroen, gemiddeld geel en een zeer donkerrood te gebruiken. Dit lijkt meer op een sequentieel kleurenschema voor iemand die erg kleurenblind is, maar een kleurenblinde kan zo toch rood van groen onderscheiden, namelijk als licht versus donker.

5. Als je rood en groen samen moet gebruiken, bied dan andere methoden aan om data te onderscheiden.

Als je rood en groen gebruikt, kun je bijvoorbeeld ook pictogrammen, richtingspijlen, labels, annotaties of andere indicatoren toevoegen die een kleurenblinde laten zien dat iets slecht (rood) of goed (groen) is.

Een andere optie is om een selectievakje toe te voegen waarmee een gebruiker het kleurenpalet voor de hele visualisatie kan omschakelen naar een palet dat geschikt is voor kleurenblinden. Op die manier kan de combinatie rood/groen worden gebruikt voor het merendeel van de doelgroep, terwijl kleurenblinden het hele palet kunnen veranderen.

Helaas is er geen gemakkelijke manier om dit te doen in Tableau, maar het kan wel. Hieronder zie je twee voorbeelden: een met een parameter om het kleurenpalet te veranderen (met zowel een sequentieel als een categorisch kleurenschema met transparantie) en een met een dashboardactie, vergelijkbaar met wat Tableau Zen Master Robert Rouse gebruikte met zijn techniek voor verborgen menu's.

Wil je er zeker van zijn dat de door jou ontworpen visualisatie geschikt is voor kleurenblinden? Naast de online simulatoren voor kleurenblindheid hebben we ook een plug-in. Met de Chrome-plug-in 'NoCoffee' kun je alle vormen van kleurenblindheid simuleren in je browser, inclusief je visualisaties die worden gehost op Tableau Public of Tableau Server.

Probeer de NoCoffee-plug-in eens een hele dag uit en ontdek hoe de wereld eruitziet voor iemand met kleurenblindheid. Als je je visualisatie wilt weergeven zonder browser, kun je deze simulator van kleurenbeelden eens proberen.

Hierbij wil ik Maureen Stone bedanken voor haar waardevolle revisie, feedback en suggesties voor deze post.

Meer tips, ideeën en visualisaties van Jeffrey Shaffer vind je op zijn Tableau Public-pagina en in zijn blog. Je kunt ook contact met hem opnemen op Twitter @HighVizAbility.