# Färgblindvänliga paletter och så testar du dina designs

[Canonical HTML page](https://gradiently.design/sv/guide/color-blindness-design)

De flesta färgseendenedsättningar är inte att se i grått. Det är att vissa färgpar rinner ihop till en. Välj färger som skiljer sig i ljushet så designar du runt det.

## The short version

- En färgblindvänlig palett använder färger som skiljer sig tydligt i ljushet, inte bara i nyans, så att de förblir åtskilda när vissa nyanser ser lika ut.
- Förväxling av rött och grönt är den överlägset vanligaste typen av nedsatt färgseende; förväxling av blått och gult är mycket ovanligare, och att inte se någon färg alls är ännu ovanligare.
- Okabe och Itos palett med åtta färger utformades för att förbli urskiljbar för de vanliga typerna av färgblindhet och är fri att använda.
- Låt aldrig färg bära betydelse på egen hand: lägg också till en etikett, en ikon, ett mönster eller en position.
- Devtools i Chrome och Edge kan simulera flera typer av färgblindhet på vilken sida som helst, och en kontroll i gråskala fångar de flesta problem på sekunder.

En **färgblindvänlig palett** är en uppsättning färger som förblir åtskilda för människor som förväxlar vissa nyanser, oftast rött och grönt. Knepet är att skilja färger åt på ljushet såväl som på nyans, och att aldrig låta färg vara den enda signalen. Ett mörkblått och ett ljust orange förblir olika för nästan alla; ett medelrött och ett medelgrönt, i liknande ljushet, kan se ut som samma leriga brunt. Nedan finns paletter du kan kopiera, paren att undvika och tre gratis sätt att testa ditt arbete.

## Typer av färgblindhet, kort

Färgseende bygger på tre slags tappar i ögat, avstämda ungefär mot långa, medellånga och korta våglängder. När ett slag saknas eller är förskjutet börjar vissa färger som ser olika ut för de flesta se lika ut. [WebAIM-artikeln om färgblindhet](https://webaim.org/articles/visual/colorblind) tar upp biologin; för design är det den här tabellen som räknas.

| Typ | Påverkade tappar | Färger som förväxlas | Hur vanlig |
| --- | --- | --- | --- |
| Deuteranomali och deuteranopi | Gröna (medellånga) | Rött med grönt, grönt med brunt, blått med lila | Den vanligaste |
| Protanomali och protanopi | Röda (långa) | Rött med grönt och svart, röda toner ser mörkare ut | Vanlig |
| Tritanomali och tritanopi | Blå (korta) | Blått med grönt, gult med rosa eller grått | Ovanlig |
| Akromatopsi | Alla | Allt ses i gråtoner | Mycket ovanlig |

Röd-gröna typer ärvs på X-kromosomen, vilket är varför de är mycket vanligare hos män än hos kvinnor.

Den röda tråden: nyansen blir opålitlig, men **ljusheten består**. En person med deuteranopi ser fortfarande tydligt att en färg är mörkare än en annan. Det enda faktumet styr varje regel nedan.

## En färgblindvänlig palett du kan kopiera

Den mest kända säkra uppsättningen är paletten som föreslagits av Masataka Okabe och Kei Ito för vetenskapliga figurer. Dess åtta färger valdes för att förbli urskiljbara för de vanliga typerna av färgblindhet, och den fungerar lika bra för diagram, kartor, etiketter och statusfärger i en produkt.

- Svart #000000: #000000
- Orange #e69f00: #e69f00
- Himmelsblå #56b4e9: #56b4e9
- Blåaktigt grön #009e73: #009e73
- Gul #f0e442: #f0e442
- Blå #0072b2: #0072b2
- Cinnoberröd #d55e00: #d55e00
- Rödaktigt lila #cc79a7: #cc79a7

Okabe och Itos palett. Använd så få av färgerna du behöver; fyra eller fem är lättare för alla än åtta.

För varumärkesarbete är åtta färger oftast för många. Det säkraste enskilda paret är **blått och orange**: de ligger på motsatta sidor av förväxlingslinjen mellan rött och grönt och skiljer sig i ljushet, så de läses som olika av nästan alla. Blått med gult, och mörklila med ljusgrönt, håller också bra.

### Gradienter och skalor för data

För värmekartor och diagram som visar ett spann, använd en skala vars ljushet ändras jämnt från ena änden till den andra. En skala från rött till grönt fallerar två gånger: ändarna förväxlas av färgblinda läsare, och båda ändarna har liknande ljushet. Blått till orange eller en enda nyans från mörk till ljus fungerar för nästan alla.

- Undvik: rött till grönt: `linear-gradient(90deg, #d7263d, #f5f5f5, #2e9e44)`
- Säkert: blått till orange: `linear-gradient(90deg, #0072b2, #f5f5f5, #e69f00)`
- Säkert: mörklila till gult: `linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725)`

Den sista skalan följer de flitigt använda viridis-färgerna: dess ljushet stiger jämnt, så den överlever till och med utskrift i gråskala.

## Par att undvika och vad du kan använda i stället

Vissa kombinationer ställer till problem gång på gång. Det röda `#d7263d` och gröna `#2e9e44` ovan ser tydligt olika ut för de flesta, men deras perceptuella ljushet är nästan identisk (omkring 57 % och 62 % i [OKLCH](https://gradiently.design/sv/guide/oklch-explained)), så för någon med deuteranopi finns det lite kvar att skilja dem åt på.

### Undvik bredvid varandra

- Rött och grönt i liknande ljushet
- Grönt och brunt
- Blått och lila
- Ljusgrönt och gult
- Rosa och grått, eller gult och ljusgrått

### Använd i stället

- Blått och orange
- Mörkblått och ljusgult
- Mörklila och ljusgrönt
- En nyans i tydligt olika ljushetssteg
- Vilket par som helst plus en etikett eller ikon

Om dina varumärkesfärger är rött och grönt behöver du inte byta dem. Gör bara den ena tydligt mörkare än den andra och använd dem aldrig som enda skillnaden mellan till exempel en vinst och en förlust. En pil eller ett plus- och minustecken löser det för alla. Att välja färgerna från början tas upp i [så väljer du varumärkesfärger](https://gradiently.design/sv/guide/how-to-choose-brand-colors).

## Förlita dig aldrig på enbart färg

Det här är den viktigaste regeln, och den ingår också i Web Content Accessibility Guidelines. Om en diagramförklaring, ett formulärfel, en lagerstatusmärkning eller en karta bara skiljer sig åt i färg förlorar vissa läsare betydelsen. Lägg till en andra signal:

- **Etiketter** direkt på diagramlinjer och staplar i stället för en färgnyckel.
- **Ikoner** för tillstånd: en bock för lyckat, ett kryss eller en varningsskylt för fel.
- **Mönster eller linjestilar**, som streckade och heldragna linjer, i diagram.
- **Position och ordning**, så att det första objektet alltid betyder samma sak.
- **Textkontrast** som klarar sig själv, kontrollerad med en [kontrastkontroll](https://gradiently.design/sv/guide/color-contrast-accessibility).

Grafik för sociala medier behöver samma omsorg. Ett inlägg som säger "grönt betyder ledigt" över en röd-grön kalender tappar några läsare. Ord bär det bättre, och orden själva måste läsas mot bakgrunden, särskilt på gradienter, där kontrasten ändras över ramen. [Text på gradienter](https://gradiently.design/sv/guide/text-on-gradient) går igenom det i detalj.

Ett workshopmeddelande där rubriken ligger på en rörig del av gradienten med liten ljushetskontrast

När text och bakgrund ligger nära varandra i ljushet gör nyansen hela jobbet, och det är precis det vissa läsare förlorar.

Samma workshopmeddelande med en lugnare, mörkare yta bakom rubriken så att den läses tydligt

Med en lugn, djupare yta bakom orden ligger kontrasten i ljushet, vilket varje läsare kan se.

Den högra versionen är vad en Mark i Gradiently gör på egen hand: den flyttar sin lugnaste, bäst kontrasterande del bakom texten och auto ink väljer ljus eller mörk text för varje rad, så att åtskillnaden kommer av ljushet snarare än nyans.

## Så testar du en design för färgblindhet

1. **Gör gråskalekontrollen** Exportera eller ta en skärmdump av designen och gör den om till gråskala. Om två färger som betyder olika saker blir samma grå, ändra ljusheten på den ena.
2. **Simulera i webbläsaren** I Chrome eller Edge öppnar du devtools, trycker på kommandomenyn, skriver Rendering och använder **Emulate vision deficiencies** för att se den levande sidan som protanopi, deuteranopi, tritanopi eller akromatopsi.
3. **Kontrollera hela skärmen i grått** Både Mac och Windows har ett gråskalefilter i tillgänglighetsinställningarna. Slå på det för att granska appar, designfiler och exporter, inte bara webbsidor.
4. **Ta bort färgen och läs igen** Fråga om varje diagram, märke och status fortfarande är begripligt enbart med etiketter och ikoner. Om det är det är färg dekoration, vilket är där den hör hemma.

Simuleringar är approximationer, och färgseende varierar från person till person. Om tillgänglighet är viktig för din produkt, be färgblinda personer du känner titta på det riktiga. För diagram i synnerhet har [infografikdesign](https://gradiently.design/sv/guide/infographic-design) mer om etiketter och layout, och [färgharmoni](https://gradiently.design/sv/guide/color-harmony) hjälper när du behöver en säker palett som ändå ser genomtänkt ut.

## FAQ

### Vilka färger är bäst för färgblinda?

Blått och orange är det säkraste paret, följt av blått och gult. Framför allt: välj färger som skiljer sig tydligt i ljushet, så att de förblir åtskilda även när nyanser ser lika ut.

### Vad är Okabe Ito-paletten?

En uppsättning av åtta färger (svart, orange, himmelsblått, blåaktigt grönt, gult, blått, cinnoberrött och rödaktigt lila) utformad för att förbli urskiljbar för de vanliga typerna av färgblindhet.

### Vilka färger ska jag undvika tillsammans?

Rött med grönt, grönt med brunt, blått med lila och ljusgrönt med gult, särskilt när de har liknande ljushet.

### Hur ser jag min design som en färgblind person skulle se den?

I devtools i Chrome eller Edge öppnar du panelen Rendering och väljer ett alternativ under Emulate vision deficiencies. En snabb skärmdump i gråskala avslöjar också färger som bara beror på nyans.

### Måste jag ändra röda och gröna varumärkesfärger?

Nej. Gör den ena märkbart mörkare än den andra och lägg till etiketter eller ikoner överallt där färgerna bär betydelse.