Fargeblindvennlige paletter og testing av design

En fargeblindvennlig palett er farger som forblir tydelige for dem som forveksler bestemte toner, vanligvis rødt og grønt. Trikset er å skille farger både etter lyshet og fargetone, og aldri la farge være eneste signal. Mørk blått og lys oransje ser ulikt ut for nesten alle. Mellomrødt og mellomgrønt med lignende lyshet kan se ut som samme grumsete brunfarge. Nedenfor er kopierbare paletter, parene du bør unngå og tre gratis måter å teste arbeidet på.

Kort om typer fargeblindhet

Fargesyn bygger på tre typer tappeceller i øyet, som reagerer omtrent på lange, middels og korte bølgelengder. Når én type mangler eller har forskjøvet følsomhet, begynner noen farger som de fleste skiller å se like ut. WebAIM-artikkelen om fargeblindhet beskriver biologien. For design er denne tabellen det viktigste.

Fellesnevneren: fargetone blir upålitelig, men lysheten består. En person med deuteranopi ser fortsatt tydelig at én farge er mørkere enn en annen. Dette ene faktumet ligger bak alle reglene under.

En fargeblindvennlig palett du kan kopiere

Det mest kjente trygge settet er paletten Masataka Okabe og Kei Ito foreslo til vitenskapelige figurer. De åtte fargene er valgt for å være tydelig ulike ved vanlige former for fargeblindhet. Paletten fungerer like godt til diagrammer, kart, etiketter og statusfarger i et produkt.

Til merkevarer er åtte farger vanligvis for mange. Det tryggeste enkeltparet er blått og oransje: de ligger på hver sin side av forvekslingslinjen for rødt og grønt og har ulik lyshet, så nesten alle ser dem som forskjellige. Blått med gult og mørk lilla med lys grønt fungerer også godt.

Gradienter og skalaer til data

Til varmekart og diagrammer som viser et spenn, bruk en skala der lysheten endres jevnt fra ende til ende. En rød-grønn skala svikter to ganger: endene forveksles av fargeblinde, og begge har lignende lyshet. Blått til oransje eller én tone fra mørkt til lyst fungerer for nesten alle.

Par du bør unngå og alternativene

Noen kombinasjoner skaper stadig problemer. Rødt #d7263d og grønt #2e9e44 over ser ulike ut for de fleste, men den opplevde lysheten er nesten lik, rundt 57% og 62% i OKLCH. For noen med deuteranopi er det derfor lite igjen som skiller dem.

Er merkefargene rødt og grønt, trenger du ikke bytte dem. Gjør bare den ene tydelig mørkere, og bruk dem aldri som eneste forskjell mellom for eksempel gevinst og tap. En pil eller pluss- og minustegn løser det for alle. Selve fargevalget beskrives i slik velger du merkefarger.

Stol aldri på farge alene

Dette er den viktigste regelen og også en del av Web Content Accessibility Guidelines. Hvis forklaringen i et diagram, en skjemafeil, et lagermerke eller et kart bare skiller seg ved farge, mister noen lesere meningen. Legg til et signal:

• Tekst direkte på diagramlinjer og søyler fremfor en fargeforklaring.
• Ikoner for tilstander: hake for suksess, kryss eller varseltegn for feil.
• Mønstre eller linjestiler, som stiplede og heltrukne linjer i diagrammer.
• Plassering og rekkefølge, så det første elementet alltid betyr det samme.
• Tekstkontrast som består alene, sjekket med en kontrastsjekker.

Grafikk til sosiale medier trenger samme omtanke. Et innlegg med «grønt betyr ledig» på en rød-grønn kalender mister noen lesere. Ord formidler bedre, og ordene må selv være lesbare mot bakgrunnen, særlig på gradienter der kontrasten endres over rammen. Tekst på gradienter dekker dette grundig.

Versjonen til høyre er det en Mark fra Gradiently gjør selv: den flytter sitt roligste område med best kontrast bak teksten, og Auto-tekstfarge velger lys eller mørk skrift per linje, så skillet kommer fra lyshet fremfor fargetone.

Slik tester du et design for fargeblindhet

1. 1

   Sjekk i gråtoner

   Eksporter designet eller ta skjermbilde, og gjør det om til gråtoner. Blir to farger med ulik mening samme grå, endre lysheten på én av dem.

2. 2

   Simuler i nettleseren

   Åpne utviklerverktøy i Chrome eller Edge, åpne kommandomenyen, skriv Rendering og bruk Emulate vision deficiencies til å se siden som ved protanopi, deuteranopi, tritanopi eller akromatopsi.

3. 3

   Se hele skjermen i grått

   Mac og Windows har begge gråtonefilter i tilgjengelighetsinnstillingene. Slå det på for å gjennomgå apper, designfiler og eksporter, ikke bare nettsider.

4. 4

   Fjern fargen og les igjen

   Spør om hvert diagram, merke og hver status fortsatt gir mening med bare tekst og ikoner. Gjør de det, er farge dekorasjon, som den bør være.

Simuleringer er omtrentlige, og fargesyn varierer fra person til person. Er tilgjengelighet viktig for produktet, be fargeblinde du kjenner se på det faktiske produktet. For diagrammer har infografikkdesign mer om merking og oppsett, og fargeharmoni hjelper når du trenger en trygg palett som fortsatt ser gjennomtenkt ut.