Alla använder dem: Grön, gul (eller orange) och röd. Vi använder dem i datavisualisering, vi använder dem i knappar, vi färglägger text och ikoner med dem och lägger in dem i varningar. De används ofta i avgörande ögonblick, när vi tillkännager framgångar eller meddelar dåliga nyheter. Vi missbrukar dem också och använder dem för att väcka uppmärksamhet där de inte är relevanta. Vad vi inte gör, alldeles för ofta, är att göra dem tillgängliga.
En betydande minoritet av människor är färgblinda, och de flesta av dem har röd-grön färgblindhet. Sedan 2011 har jag varit tvungen att lösa färgtillgänglighet i viktiga interaktioner, t.ex. varningar för patientens vitala värden, kvaliteten på patientens vård, molnserverns status eller ledningens försäljningsanalyser. Här är några tillgänglighetstips som jag har fått på vägen, samt min personliga mall för en användbar, tillgänglig färgpalett för trafik.
Du kan utforma en vacker, färgblindvänlig palett, men det skadar aldrig att förstärka budskapet. Istället för att ändra text till rött eller grönt, sätt en annorlunda formad röd eller grön ikon bredvid texten. På så sätt har du gjort din poäng även om du inte har någon kontroll över din färgpalett, eller om diagrammet har tryckts i svartvitt, eller om användaren bara ser i grått.
Ett exempel på detta: Excel. Excel erbjuder ikoner i trafikljusfärger som hjälper dig att berätta din datahistoria. Se till att du använder olika formade ikoner samt olika färger! Här är varför:
Deuteranopi och protanopi är två vanliga typer av rödgrön färgblindhet. Om du testar dina färger mot dem kan du optimera dem för de flesta av dina användare, men ikoner hjälper till att försegla affären.
Lita inte på förinställda färgpaletter
Det finns många extremt användbara ramverk och boilerplates på nätet. Var och en uppfyller många behov, men alla har inte haft tid att optimera sina färger för färgblindhet.
Den viktigaste frågan när du tittar på dina röda, gröna, orange och gula färger är: ”Kommer mina användare att känna igen den här färgen när de ser den för sig själva?”. Lita inte på att de som skapade ditt ramverk har tänkt på detta. Kolla upp det själv.
Hur gör du det, frågar du? I många år var den enda lösning jag hittade för att testa Adobe Photoshop, som erbjöd protanopi och deuteranopi av det jag skapade. Alternativen finns under View → Proof Setup (se bild nedan).
Nu har Corblindor Coblis (Color Blind Simulator) blivit mitt favoritverktyg. Gör bara en snabb skärmdump av ditt arbete och se hur det ser ut för många olika typer av färgblindhet.
Planera i förväg med en färgmall
Jag har gjort en hel del färgarbete för datavisualiseringar under årens lopp, och det har vuxit fram ett mönster som jag tycker är användbart. Jag erbjuder det här, i syfte att göra data mer användbara. Jag rekommenderar starkt att du överväger detta tillvägagångssätt när du tar fram en färgpalett för ditt varumärke.
Här är de viktigaste riktlinjerna:
- Använd en ljus, medium och mörk nyans. Gult ska vara din ljusa nyans.
- Använd en varm grön och en kall röd, eller en kall grön och en varm röd. Ha bara inte både kallt och varmt.
- Ingen orange. Eftersom det är så mycket ljusare att använda gult i stället för orange är det mycket mindre troligt att din ”varnings”-färg kommer att stå i konflikt med din ”framgång”-grön för färgblinda användare, eller att den kommer att se för likadan ut som din ”allvarliga problem”-rödfärg (t.ex. fel).
Det är allt! Tack för att du läste. Gå vidare och ha kul att berätta bra historier med dina data.