Farveblindvenlige paletter og sådan tester du dine designs

En farveblindvenlig palet er et sæt farver, der forbliver adskilte for folk, der forveksler bestemte nuancer, som regel røde og grønne. Tricket er at adskille farver ved lyshed såvel som ved nuance og aldrig lade farven være det eneste signal. En mørkeblå og en lys orange forbliver forskellige for næsten alle; en mellemrød og en mellemgrøn med samme lyshed kan se ud som den samme mudrede brune. Nedenfor finder du paletter, du kan kopiere, de par, du skal undgå, og tre gratis måder at teste dit arbejde på.

Typer af farveblindhed, kort fortalt

Farvesyn afhænger af tre slags tapper i øjet, afstemt nogenlunde til lange, mellemlange og korte bølgelængder. Når en slags mangler eller er forskudt, begynder nogle farver, der ser forskellige ud for de fleste, at ligne hinanden. WebAIM-artiklen om farveblindhed dækker biologien; til design er det denne tabel, der tæller.

Den røde tråd: nuance bliver upålidelig, men lyshed består. En person med deuteranopi ser stadig tydeligt, at en farve er mørkere end en anden. Det ene faktum driver hver regel nedenfor.

En farveblindvenlig palet, du kan kopiere

Det bedst kendte sikre sæt er paletten foreslået af Masataka Okabe og Kei Ito til videnskabelige figurer. Dens otte farver er valgt til at forblive adskillelige for de almindelige typer farveblindhed, og den virker lige så godt til diagrammer, kort, etiketter og statusfarver i et produkt.

Til brandarbejde er otte farver som regel for mange. Det sikreste enkeltpar er blå og orange: de ligger på hver sin side af rød-grøn-forvekslingslinjen og adskiller sig i lyshed, så de læses som forskellige af næsten alle. Blå med gul og mørk lilla med lysegrøn holder også godt.

Gradienter og skalaer til data

Til varmekort og diagrammer, der viser et spænd, så brug en skala, hvis lyshed ændrer sig jævnt fra den ene ende til den anden. En skala fra rød til grøn fejler to gange: enderne forveksles af farveblinde læsere, og begge ender har næsten samme lyshed. Blå til orange eller én nuance fra mørk til lys virker for næsten alle.

Par at undgå og hvad du kan bruge i stedet

Nogle kombinationer giver problemer igen og igen. Den røde #d7263d og grønne #2e9e44 ovenfor ser tydeligt forskellige ud for de fleste, men deres opfattede lyshed er næsten identisk (omkring 57 % og 62 % i OKLCH), så for en med deuteranopi er der næsten intet tilbage, der adskiller dem.

Hvis dine brandfarver er rød og grøn, behøver du ikke ændre dem. Gør bare den ene tydeligt mørkere end den anden, og brug dem aldrig som eneste forskel mellem fx en gevinst og et tab. En pil eller et plus- og minustegn løser det for alle. At vælge farverne fra start dækkes i sådan vælger du brandfarver.

Stol aldrig kun på farve

Det er den regel, der betyder mest, og den er også en del af Web Content Accessibility Guidelines. Hvis en diagramforklaring, en formularfejl, et mærke for på lager eller et kort kun adskiller sig ved farve, mister nogle læsere meningen. Tilføj et andet signal:

• Etiketter direkte på diagramlinjer og søjler frem for en farvenøgle.
• Ikoner til tilstande: et flueben til succes, et kryds eller en advarsel til fejl.
• Mønstre eller linjestile, som stiplede og hele linjer, i diagrammer.
• Placering og rækkefølge, så det første element altid betyder det samme.
• Tekstkontrast, der består alene, tjekket med en kontrastkontrol.

Grafik til sociale medier kræver samme omhu. Et opslag, der siger »grøn betyder ledig« over en rød og grøn kalender, mister nogle læsere. Ord bærer det bedre, og selve ordene skal kunne læses mod baggrunden, især på gradienter, hvor kontrasten ændrer sig henover billedet. Tekst på gradienter dækker det i detaljer.

Den version til højre er det, en Mark fra Gradiently gør af sig selv: den flytter sit roligste, mest kontrastrige område bag teksten, og automatisk tekstfarve vælger lys eller mørk skrift til hver linje, så adskillelsen kommer af lyshed frem for nuance.

Sådan tester du et design for farveblindhed

1. 1

   Lav gråtonetjekket

   Eksportér eller tag et skærmbillede af designet, og gør det gråt. Hvis to farver, der betyder forskellige ting, bliver den samme grå, så ændr lysheden af den ene.

2. 2

   Simulér i browseren

   I Chrome eller Edge åbner du devtools, trykker på kommandomenuen, skriver Rendering og bruger Emulate vision deficiencies til at se den levende side som protanopi, deuteranopi, tritanopi eller akromatopsi.

3. 3

   Tjek hele din skærm i gråt

   Mac og Windows har begge et gråtonefarvefilter i deres tilgængelighedsindstillinger. Slå det til for at gennemgå apps, designfiler og eksporter, ikke kun websider.

4. 4

   Fjern farven, og læs det igen

   Spørg, om hvert diagram, mærke og hver status stadig giver mening med kun etiketter og ikoner. Hvis det gør, er farven pynt, og det er der, den hører hjemme.

Simulationer er tilnærmelser, og farvesyn varierer fra person til person. Hvis tilgængelighed betyder noget for dit produkt, så bed farveblinde, du kender, om at se på det rigtige. Til diagrammer specifikt har infografikdesign mere om etiketter og layout, og farveharmoni hjælper, når du har brug for en sikker palet, der stadig ser gennemtænkt ud.