Skønne, tilgængelige trafiklysfarver

author
3 minutes, 49 seconds Read

Alle bruger dem: Grøn, gul (eller orange) og rød. Vi bruger dem i datavisualisering, vi bruger dem i knapper, vi farver tekst og ikoner med dem og sætter dem ind i advarsler. De bruges ofte i afgørende øjeblikke, når vi annoncerer en succes, eller når vi meddeler dårlige nyheder. Vi misbruger dem også, idet vi bruger dem til at tiltrække opmærksomhed, hvor de ikke er relevante. Hvad vi ikke gør, alt for ofte, er at gøre dem tilgængelige.

Et betydeligt mindretal af mennesker er farveblinde, og de fleste af dem har rød-grøn farveblindhed. Siden 2011 har jeg været nødt til at løse problemet med farvetilgængelighed i vigtige interaktioner, f.eks. advarsler om patientens vitale værdier, kvaliteten af patientplejen, cloudserverstatus eller ledende salgsanalyser. Her er nogle råd om tilgængelighed, som jeg har fået undervejs, samt min personlige skabelon for en brugbar, tilgængelig farvepalet til trafikken.

Du kan designe en smuk, farveblindevenlig palet, men det skader aldrig at forstærke budskabet. I stedet for at ændre teksten til rød eller grøn kan du sætte et anderledes formet rødt eller grønt ikon ved siden af teksten. På den måde har du gjort din pointe klar, selv om du ikke har kontrol over din farvepalet, eller hvis diagrammet er blevet trykt i sort/hvid, eller din bruger kun ser i gråtoner.

Et eksempel herpå: Excel. Excel tilbyder ikoner i trafiklysfarver til at hjælpe med at fortælle din datahistorie. Sørg for at bruge forskelligt formede ikoner samt forskellige farver! Her er hvorfor:

Desktop Excel, Office 2013. Vær opmærksom på de røde og grønne cirkler – kan du nemt skelne dem fra hinanden? Microsoft har løst dette problem i senere versioner.

Deuteranopi og protanopi er to almindelige typer af rød-grøn farveblindhed. Test af dine farver i forhold til dem vil optimere for de fleste af dine brugere, men ikoner er med til at besegle aftalen.

Lid ikke på forudindstillede farvepaletter

Der findes mange ekstremt nyttige frameworks og boilerplates på nettet. De opfylder hver især mange behov, men ikke alle har haft tid til at optimere deres farver til farveblindhed.

Eksempler på populære forudindstillede farvetemaer, der ikke kontrollerede tilgængelighed i brugen af farver. (Eller: “Hvorfor man ikke skal bruge orange.”)

Det vigtigste spørgsmål, når du kigger på dine røde, grønne, orange og gule farver, er: “Vil mine brugere genkende denne farve, når de ser den i sig selv?” Du skal ikke stole på, at de mennesker, der har skabt dine rammer, har tænkt på dette. Tjek det selv.

Hvordan gør du det, spørger du? I mange år var den eneste løsning, jeg fandt til at teste, Adobes Photoshop, som tilbød protanopia- og deuteranopia-visninger af det, jeg var ved at skabe. Mulighederne findes under Vis → Prøveopsætning (se billedet nedenfor).

Skærmbillede: Find farveblindhedsprøverne i Adobe Photoshop.

Nu er Corblindor Coblis (Color Blind Simulator) blevet mit go-to værktøj. Du skal bare lave et hurtigt skærmbillede af dit arbejde, og se, hvordan det ser ud for mange forskellige typer farveblindhed.

Planlæg forud med en farveskabelon

Jeg har lavet en masse farvearbejde med datavisualisering i årenes løb, og der er opstået et mønster, som jeg finder nyttigt. Jeg tilbyder det her, for at gøre data mere anvendelige. Jeg anbefaler på det kraftigste at overveje denne tilgang, når du udvikler en farvepalet til dit brand.

Bemærk, hvordan lys vs. mørk og varm vs. kold differentierer den røde og grønne farve. Din gule skal være betydeligt lysere end enten din røde eller grønne!

Her er de vigtigste retningslinjer:

  • Brug en lys, medium og mørk nuance. Din gul skal være din lyse nuance.
  • Brug en varm grøn og en kold rød, eller en kold grøn og en varm rød. Du skal bare ikke have både kold eller varm.
  • Ingen orange. Fordi den er så meget lysere, er det ved at bruge gul i stedet for orange meget mindre sandsynligt, at din “advarsels”-farve vil komme i konflikt med din “succes”-grøn for farveblinde brugere eller ligne din “alvorlige problem”-rød (fejl, f.eks.) for meget.

Det er det! Tak fordi du læste med. Gå videre og hav det sjovt med at fortælle gode historier med dine data.

Similar Posts

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.