5 tips om att designa colorblind-vänliga visualiseringar
Obs: följande är den första delen i en serie gäst inlägg av Tableau Zen Master Jeffrey Shaffer.
detta är en första i en serie inlägg om några av de välkända ”data-viz-reglerna.”Vi hör ofta dessa regler, men detaljerna bakom dem undersöks ofta inte på djupet eller förbises helt. Jag ville undersöka några av dem för att bättre förstå hur de ska tillämpas. För det första i serien undersökte jag frågan om att använda rött och grönt tillsammans.,
studier har visat att cirka 8% av männen och 0,5% av kvinnorna har färgseende brist (CVD). Detta kallas mer allmänt som färgblindhet, även om färgblindhet inte är den mest exakta termen.
att ha CVD betyder inte att en person inte kan se färg om du inte är den mycket sällsynta personen (en av 33 000 personer) med achromatopsi. För den vanligaste personen med CVD är det viktigaste problemet att färger som de flesta ser som olika kommer att se likadana ut.,
de två vanligaste typerna av CVD är deuteranomaly och deuteranopia, som tillsammans räknas för cirka 6% av männen, och protanomaly och protanopi, som står för ytterligare 2% (mer information finns på color-blindness.com). dessa villkor kallas också ”röd svag” och ”grön svag” eller ” röd-grön färgblindhet.”(OBS! Jag kommer inte att diskutera blå / gul CVD eftersom det är mycket mindre vanligt.)
här är några tips för att designa vizzes som är colorblind-vänliga.,
rött och grönt tillsammans kan vara problematiskt, men de kan ibland användas tillsammans
så att använda rött och grönt tillsammans är ett vanligt problem. Personer med stark CVD (stark betydelse ett svårare tillstånd av CVD) skulle se både röd och grön som brun. Personer med svag CVD kan se starka röda och gröna färger som röda och gröna. Detta kan dock fortfarande vara problematiskt när färgerna är svaga eller blandade ihop.,
tänk på att det bara är ett problem om färg är den enda kodningsmetoden som används för att göra en distinkt jämförelse—till exempel ett bra tal mot ett dåligt tal i en tabell, eller en rad mot en annan rad i samma linjediagram. Till exempel, i diagrammet nedan, behövs färg för att berätta en bra kvadrat från en dålig kvadrat. Med hjälp av deuteranope simulering, kan vi se hur svårt detta skulle vara.,
Jag har sett kritik mot användningen av rött och grönt tillsammans i samma visualisering, men färgerna användes inte på ett sätt som krävde att någon skulle berätta skillnaden mellan dem. Om de står ensamma—till exempel två olika diagram, en röd och en grön—och de är märkta bra, så kan det inte vara ett problem alls om de båda verkar bruna i färg.
diagrammet nedan ger ett exempel där det är lätt att se från axellinjen att de flesta siffrorna är positiva och andra är negativa., Färg är en sekundär funktion som helt enkelt kodar för positiv vs. negativ. Även om detta kanske inte är det bästa valet av färger, kan någon med CVD tolka detta diagram utan att använda färg för att göra jämförelsen.
var medveten om att det inte bara är rött och grönt
många datavisualiseringsverktyg har en ”stoplight” – palett inbyggd i dem, och det finns många företag (och kunder och chefer) som fortfarande insisterar på att använda paletten stoplight., Med allt prat om stoplight-färger och smeknamnen för CVD-förhållandena är det inte konstigt att datavisualiseringsregeln helt enkelt har blivit ”använd inte rött och grönt.”Nedan är en simulering av tableaus stoplight färger med hjälp av protanope simulering.
Observera att problemet här är mycket mer komplext än bara rött vs grönt. Eftersom röd, grön och orange alla verkar vara brun för någon med stark CVD, skulle det vara mer exakt att säga, ”Don”t använda röd/grön/brun/orange tillsammans.”Men det slutar inte där., När färgerna blandas kan de också vara problematiska.
en färgkombination som ofta förbises använder blå och lila tillsammans. I en RGB-färgmodell uppnås lila genom att använda blått och rött tillsammans. Om någon har problem med rött, kan personen också ha problem med lila, vilket verkar se ut som blått.
även rosa och grått tillsammans och grått och brunt tillsammans kan vara problematiskt. Nedan är Tableau 10 färgpalett med hjälp av en deuteranope simulering., Inte bara är röda, gröna och bruna problematiska men så är blå och lila, rosa och grå och grå och brun.
min svåger har CVD, så han är ofta marsvin för mina färgexperiment. Av alla de saker jag har testat på honom var kombinationen av färger på bilden nedan (vänster) det svåraste för honom att skilja. Han verkar lida av protanopi, som simuleras nedan till höger.
så nu när vi vet att det finns många fler kombinationer av färg som kan vara problematiska, vad ska vi göra?,
använd en färgblindvänlig palett när det är lämpligt
en färg som används tillsammans i kombination med en annan färg är i allmänhet bra när en av dem vanligtvis inte är associerad med CVD. Till exempel är blå/orange en vanlig färgblindvänlig palett. Blå / röd eller blå / brun skulle också fungera. För de vanligaste förhållandena för CVD fungerar alla dessa bra, eftersom blå i allmänhet skulle se blå ut till någon med CVD.
Tableau har en inbyggd färgblindvänlig palett designad av Maureen Stone. Denna palett fungerar mycket bra för de vanliga fallen av CVD., Nedan är Tablån colorblind-vänliga palett under både deuteranope och protanope simulering. Lägg märke till hur väl denna färgpalett fungerar för de olika jämförelserna av färg.
kanske är det chefen, klienten eller till och med företagets färger eller stilguide som kräver att du använder rött och grönt. Vad kan vi göra nu?
om du måste använda rött och grönt tillsammans, utnyttja ljus vs mörk
för någon med CVD är problemet främst med färgton (t. ex. Röd vs grön) och inte med färgvärdet (ljus vs, mörk).
nästan alla kan berätta skillnaden mellan en mycket ljus färg och en mycket mörk färg, så ett annat alternativ när du använder rött och grönt tillsammans är att använda en riktigt ljusgrön, en medelgul och en mycket mörkröd. Detta verkar vara mer av ett sekventiellt färgschema till någon som har stark CVD, men personen skulle åtminstone kunna skilja rött från grönt baserat på ljus eller mörk.,
om du måste använda rött och grönt tillsammans, erbjuda alternativa metoder för att skilja data
längs samma linjer, om du använder rött och grönt, kan du också lägga till ikoner, riktningspilar, etiketter, anteckningar eller andra indikatorer som skulle tillåta en person med CVD att se att något är dåligt (rött) vs. bra (grönt).
ett annat alternativ kan vara en kryssruta för en användare att byta färgpalett för hela viz till en färgblindvänlig palett., Detta gör det möjligt för den röda / gröna parningen för majoriteten av publiken samtidigt som man erbjuder ett sätt för någon med CVD att ändra paletten helt.
tyvärr finns det inte ett enkelt sätt att göra detta i Tableau. Det kan dock säkert göras. Nedan följer två exempel, en med en parameter för att ändra färgpaletten (med både ett sekventiellt och kategoriskt färgschema med transparens) och den andra med hjälp av en instrumentpanelåtgärd, som liknar vad Tableau Zen Master Robert Rouse använde i sin dolda menyteknik.,
Vill du se till att den viz Du designade är colorblind-vänlig? Förutom ett antal online colorblind simulatorer, det finns också en plug-in för det. Krom plug-in ”NoCoffee” kommer att simulera alla typer av HJÄRTKÄRLSJUKDOM direkt i webbläsaren, inklusive dina visualiseringar värd på Tablån Offentliga eller Tablån Server.
försök använda nocoffee browser plug – in för en hel dag, och du kommer bli förvånad över hur världen ser ut för någon med CVD. För bilder av din visualisering utan en webbläsare, Prova denna kromatiska vision simulator.,
Jag vill tacka Maureen Stone för den värdefulla översyn, input, och förslag för det här inlägget.
för fler tips, idéer och frågesporter av Jeffrey Shaffer, kolla in hans Tableau Offentliga Sida och hans blogg. Du kan också ansluta med honom på Twitter @HighVizAbility.