5 tips voor het ontwerpen van kleurenblind-vriendelijke visualisaties
opmerking: het volgende is de eerste aflevering in een serie gastposts van Tableau Zen Master Jeffrey Shaffer.
Dit is de eerste in een reeks berichten over enkele van de bekende “data-viz regels.”We horen deze regels vaak, maar de details erachter worden vaak niet grondig onderzocht of volledig over het hoofd gezien. Ik wilde er een paar onderzoeken om beter te begrijpen hoe ze moeten worden toegepast. Voor de eerste in de serie heb ik de kwestie van het gebruik van rood en groen samen onderzocht.,
Studies hebben aangetoond dat ongeveer 8% van de mannen en 0,5% van de vrouwen een tekort aan kleurenzicht (CVD) hebben. Dit wordt meestal aangeduid als kleurenblindheid, hoewel kleurenblindheid is niet de meest nauwkeurige term.
CVD hebben betekent niet dat een persoon geen kleur kan zien tenzij u de zeer zeldzame persoon bent (één op de 33.000 mensen) met achromatopsie. Voor de meer voorkomende persoon met CVD, het belangrijkste probleem is dat kleuren de meeste mensen zien als verschillend zal er hetzelfde uitzien.,
de twee meest voorkomende typen CVD zijn deuteranomalie en deuteranopia, die samen ongeveer 6% van de mannen uitmaken, en protanomalie en protanopia, die nog eens 2% voor hun rekening nemen (meer informatie is beschikbaar op color-blindness.com). deze voorwaarden worden ook vaak aangeduid als “rood zwak” en “groen zwak” of ” rood-groene kleurenblindheid.”(Opmerking: Ik zal niet Blauw/Geel CVD bespreken omdat het veel minder gebruikelijk is.)
Hier zijn enkele tips voor het ontwerpen van vizzen die kleurenblindvriendelijk zijn.,
rood en groen samen kunnen problematisch zijn, maar ze kunnen soms samen worden gebruikt
dus inderdaad, het gebruik van rood en groen samen is een veel voorkomend probleem. Mensen met sterke CVD (sterk betekent een strengere voorwaarde van CVD) zouden zowel rood als groen als bruin zien. Mensen met zwakke CVD kunnen sterke rode en groene kleuren zien als rood en groen. Dit kan echter nog steeds problematisch zijn wanneer de kleuren zwak of gemengd zijn.,
Houd er rekening mee dat de mogelijkheid om deze kleuren uit elkaar te houden alleen een probleem is als kleur de enige coderingsmethode is die wordt gebruikt om een duidelijke vergelijking te maken—bijvoorbeeld een goed getal VS.een slecht getal in een tabel, of een regel VS. een andere regel in hetzelfde lijndiagram. Bijvoorbeeld, in de grafiek hieronder, is kleur nodig om een goed vierkant van een slecht vierkant te onderscheiden. Met behulp van deuteranope simulatie, kunnen we zien hoe moeilijk dit zou zijn.,
Ik heb kritiek gezien over het gebruik van rood en groen samen in dezelfde visualisatie, maar de kleuren werden niet gebruikt op een manier die iemand nodig had om het verschil tussen hen te zien. Als ze op zichzelf staan – bijvoorbeeld twee verschillende grafieken, een rode en een groene-en ze zijn goed gelabeld, dan is het misschien geen probleem als ze beide bruin van kleur lijken.
het diagram hieronder geeft een voorbeeld waar het gemakkelijk te zien is aan de aslijn dat de meeste getallen positief zijn en andere negatief., Kleur is een secundaire functie gewoon coderen positief vs. negatief. Hoewel dit misschien niet de beste kleurkeuze is, kan iemand met CVD deze grafiek interpreteren zonder het gebruik van kleur om de vergelijking te maken.
wees ervan bewust dat het niet alleen rood en groen
veel data visualisatie tools hebben een “stoplight” palet ingebouwd in hen, en er zijn veel bedrijven (en klanten en bazen) die nog steeds aandringen op het gebruik van het stoplight palet., Met al het gepraat over stoplicht kleuren en de bijnamen voor de CVD voorwaarden, is het geen wonder dat de data visualisatie regel is gewoon geworden “gebruik Geen rood en groen.”Hieronder is een simulatie van Tableau’ s stoplicht kleuren met behulp van protanope simulatie.
merk op dat het probleem hier veel complexer is dan alleen maar rood versus groen. Omdat rood, groen en oranje allemaal bruin lijken voor iemand met een sterke CVD, zou het nauwkeuriger zijn om te zeggen, “Don”t gebruik Rood/Groen/Bruin/Oranje samen.”Maar daar houdt het niet op., Wanneer kleuren worden gemengd, kunnen ze ook problematisch zijn.
een kleurencombinatie die vaak over het hoofd wordt gezien, gebruikt blauw en paars samen. In een RGB-kleurenmodel wordt paars bereikt door blauw en rood samen te gebruiken. Als iemand problemen heeft met rood, dan kan de persoon ook problemen hebben met paars, wat lijkt op blauw.
ook kunnen roze en grijs samen en grijs en bruin samen problematisch zijn. Hieronder is het Tableau 10 kleurenpalet met behulp van een deuteranope simulatie., Niet alleen zijn rood, groen en bruin problematisch, maar ook blauw en paars, roze en grijs, en grijs en bruin.
mijn zwager heeft CVD, dus hij is vaak de proefkonijn voor mijn kleurexperimenten. Uit alle dingen die ik heb getest op hem, de combinatie van kleuren op de afbeelding hieronder (links) was het moeilijkst voor hem om te onderscheiden. Hij lijkt te lijden aan protanopia, die hieronder aan de rechterkant wordt gesimuleerd.
dus nu we weten dat er veel meer kleurcombinaties zijn die problematisch kunnen zijn, wat moeten we doen?,
gebruik een kleurenblindvriendelijk palet indien van toepassing
een kleur die samen wordt gebruikt in combinatie met een andere kleur is over het algemeen prima wanneer een van hen gewoonlijk niet geassocieerd wordt met CVD. Bijvoorbeeld, blauw / oranje is een gemeenschappelijke kleurenblind-vriendelijke palet. Blauw / rood of blauw / bruin zou ook werken. Voor de meest voorkomende aandoeningen van CVD, al deze werken goed, omdat Blauw over het algemeen blauw zou kijken naar iemand met CVD.
Tableau heeft een ingebouwd kleurenblindvriendelijk palet ontworpen door Maureen Stone. Dit palet werkt zeer goed voor de veelvoorkomende gevallen van CVD., Hieronder vindt u het Tableau kleurenblind-vriendelijke palet onder zowel deuteranope en protanope simulatie. Merk op hoe goed dit kleurenpalet werkt voor de verschillende vergelijkingen van kleur.
misschien is het de baas, de client, of zelfs de bedrijfskleuren of stijlgids die vereist dat u rood en groen gebruikt. Wat kunnen we nu doen?
als u rood en groen samen moet gebruiken, leverage light VS. dark
voor iemand met CVD, is het probleem voornamelijk met kleurtint (bijvoorbeeld rood vs. groen) en niet met de kleurwaarde (licht vs., donker).
bijna iedereen kan het verschil zien tussen een zeer lichte kleur en een zeer donkere kleur, dus een andere optie bij het gebruik van rood en groen samen is het gebruik van een echt lichtgroen, een medium geel, en een zeer donker rood. Dit lijkt meer op een sequentiële kleurenschema voor iemand die een sterke CVD heeft, maar de persoon zou op zijn minst in staat zijn om rood te onderscheiden van groen op basis van licht vs.donker.,
als u rood en groen samen moet gebruiken, biedt u alternatieve methoden om gegevens
te onderscheiden langs dezelfde lijnen. als u rood en groen gebruikt, kunt u ook pictogrammen, richtingspijlen, labels, annotaties of andere indicatoren toevoegen die een persoon met CVD in staat stellen om te zien dat iets slecht is (rood) versus goed (groen).
een andere optie is een keuzevakje voor een gebruiker om het kleurenpalet voor het gehele viz te schakelen naar een kleurenblindvriendelijk palet., Dit zorgt voor de rood/groene koppeling voor de meerderheid van het publiek, terwijl het aanbieden van een manier voor iemand met CVD om het palet volledig te veranderen.
helaas is er geen eenvoudige manier om dit te doen in Tableau. Het is echter zeker mogelijk. Hieronder zijn twee voorbeelden, een met behulp van een parameter om het kleurenpalet te veranderen (met behulp van zowel een sequentieel en categorisch kleurenschema met transparantie) en de andere met behulp van een dashboard actie, vergelijkbaar met wat Tableau Zen Master Robert Rouse gebruikte in zijn verborgen-menu techniek.,
wilt u er zeker van zijn dat het door u ontworpen zicht kleurenblindvriendelijk is? Naast een aantal online colorblind simulators, is er ook een plug-in voor dat. De Chrome plug-in “NoCoffee” zal alle soorten CVD te simuleren recht in uw browser, met inbegrip van uw visualisaties gehost op Tableau Public of Tableau Server.
probeer de nocoffee browser plug-in een hele dag te gebruiken, en je zult versteld staan hoe de wereld eruit ziet voor iemand met CVD. Voor afbeeldingen van uw visualisatie zonder browser, Probeer deze chromatische visie simulator.,
Ik wil Maureen Stone bedanken voor de waardevolle recensie, input en suggesties voor dit bericht.
voor meer tips, ideeën en vizzen van Jeffrey Shaffer, kijk op zijn Tableau Public pagina en zijn blog. U kunt ook contact met hem op Twitter @HighVizAbility.