# Farveblindvenlige paletter og sådan tester du dine designs [Canonical HTML page](https://gradiently.design/da/guide/color-blindness-design) Det meste farvesynsnedsættelse er ikke at se i gråt. Det er bestemte farvepar, der smelter sammen. Vælg farver, der adskiller sig i lyshed, og du designer uden om det. ## The short version - En farveblindvenlig palet bruger farver, der adskiller sig tydeligt i lyshed og ikke kun i nuance, så de forbliver adskilte, når nogle nuancer ligner hinanden. - Rød-grøn-forveksling er langt den mest almindelige form for nedsat farvesyn; blå-gul-forveksling er meget sjældnere, og slet ikke at se farver er sjældnere endnu. - Okabe og Itos palet på otte farver er designet til at forblive adskillelig for de almindelige typer farveblindhed og er gratis at bruge. - Lad aldrig farven bære betydning alene: tilføj også en etiket, et ikon, et mønster eller en placering. - Devtools i Chrome og Edge kan simulere flere typer farveblindhed på enhver side, og et gråtonetjek fanger de fleste problemer på få sekunder. 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](https://webaim.org/articles/visual/colorblind) dækker biologien; til design er det denne tabel, der tæller. | Type | Påvirkede tapper | Farver, der forveksles | Hvor almindelig | | --- | --- | --- | --- | | Deuteranomali og deuteranopi | Grøn (mellem) | Rød med grøn, grøn med brun, blå med lilla | Den mest almindelige | | Protanomali og protanopi | Rød (lang) | Rød med grøn og sort, røde toner ser mørkere ud | Almindelig | | Tritanomali og tritanopi | Blå (kort) | Blå med grøn, gul med pink eller grå | Sjælden | | Akromatopsi | Alle | Alt ses i gråtoner | Meget sjælden | Rød-grønne typer nedarves på X-kromosomet, hvilket er grunden til, at de er langt mere almindelige hos mænd end hos kvinder. 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. - Sort #000000: #000000 - Orange #e69f00: #e69f00 - Himmelblå #56b4e9: #56b4e9 - Blågrøn #009e73: #009e73 - Gul #f0e442: #f0e442 - Blå #0072b2: #0072b2 - Cinnoberrød #d55e00: #d55e00 - Rødlig lilla #cc79a7: #cc79a7 Okabe og Itos palet. Brug så få af farverne, som du har brug for; fire eller fem er lettere for alle end otte. 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. - Undgå: rød til grøn: `linear-gradient(90deg, #d7263d, #f5f5f5, #2e9e44)` - Sikker: blå til orange: `linear-gradient(90deg, #0072b2, #f5f5f5, #e69f00)` - Sikker: mørk lilla til gul: `linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725)` Den sidste skala følger de udbredte viridis-farver: dens lyshed stiger jævnt, så den endda overlever at blive printet i gråtoner. ## 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](https://gradiently.design/da/guide/oklch-explained)), så for en med deuteranopi er der næsten intet tilbage, der adskiller dem. ### Undgå side om side - Rød og grøn med samme lyshed - Grøn og brun - Blå og lilla - Lysegrøn og gul - Pink og grå, eller gul og lysegrå ### Brug i stedet - Blå og orange - Mørkeblå og lysegul - Mørk lilla og lysegrøn - Én nuance i tydeligt forskellige lyshedstrin - Ethvert par plus en etiket eller et ikon 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](https://gradiently.design/da/guide/how-to-choose-brand-colors). ## 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](https://gradiently.design/da/guide/color-contrast-accessibility). 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](https://gradiently.design/da/guide/text-on-gradient) dækker det i detaljer. En annoncering af en workshop, hvor overskriften står på en travl del af gradienten med lille lyshedskontrast Når skrift og baggrund ligger tæt på hinanden i lyshed, gør nuancen hele arbejdet, og det er præcis det, nogle læsere mister. Den samme annoncering af workshoppen med et roligere, mørkere område bag overskriften, så den læses tydeligt Med et roligt, dybere område bag ordene ligger kontrasten i lyshed, som hver læser kan se. 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. **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. **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. **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. **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](https://gradiently.design/da/guide/infographic-design) mere om etiketter og layout, og [farveharmoni](https://gradiently.design/da/guide/color-harmony) hjælper, når du har brug for en sikker palet, der stadig ser gennemtænkt ud. ## FAQ ### Hvilke farver er bedst til farveblinde? Blå og orange er det sikreste par, efterfulgt af blå og gul. Vælg først og fremmest farver, der adskiller sig tydeligt i lyshed, så de forbliver adskilte, selv når nuancer ligner hinanden. ### Hvad er Okabe-Ito-paletten? Et sæt på otte farver (sort, orange, himmelblå, blågrøn, gul, blå, cinnoberrød og rødlig lilla) designet til at forblive adskillelige for de almindelige typer farveblindhed. ### Hvilke farver bør jeg undgå sammen? Rød med grøn, grøn med brun, blå med lilla og lysegrøn med gul, især når de har samme lyshed. ### Hvordan kan jeg se mit design, som en farveblind ville se det? I devtools i Chrome eller Edge åbner du panelet Rendering og vælger en mulighed under Emulate vision deficiencies. Et hurtigt skærmbillede i gråtoner afslører også farver, der kun afhænger af nuance. ### Skal jeg ændre røde og grønne brandfarver? Nej. Gør den ene mærkbart mørkere end den anden, og tilføj etiketter eller ikoner, hvor farverne bærer betydning.