Färgblindhet och webbdesign: vad du behöver veta

Vanligare än de flesta designers inser

Färgseendedefekt — vanligen kallad färgblindhet — drabbar ungefär 8 % av männen och 0,5 % av kvinnorna. Det är cirka 1 av 12 män och 1 av 200 kvinnor, vilket gör den vanligare än de flesta andra funktionsnedsättningar som standarderna för webbtillgänglighet hanterar.

Ändå förbises den rutinmässigt i design. Team testar med skärmläsare och tangentbordsnavigering, kör en automatiserad WCAG-skanning och betraktar tillgänglighetsarbetet som avklarat — utan att någonsin kontrollera om deras färgpalett är läsbar för färgblinda användare.

Att förstå färgblindhet, och vad den faktiskt gör med de webbgränssnitt du designar, är det första steget mot att åtgärda den.

Typerna och vad de gör

Färgseendedefekt förekommer i flera former, och de ger inte alla samma upplevelse.

Röd-gröna defekter (vanligast)

Protanopia — fullständig avsaknad av röda tappar (fotoreceptorer). Rött framstår som mörkt eller svart. Skillnader mellan rött och grönt går förlorade.

Protanomali — nedsatt rödkänslighet. Rött, orange och gult förskjuts mot grönt, och helhetsupplevelsen är mattare, som om den röda kanalen har skruvats ner.

Deuteranopia — fullständig avsaknad av gröna tappar. Den vanligaste formen av färgblindhet. Grönt och rött förväxlas; världen ser ut som om den filtreras genom en gulbrun lins.

Deuteranomali — nedsatt grönkänslighet. Liknar deuteranopia men mildare. Den mest utbredda typen totalt sett, som drabbar cirka 5 % av männen.

Blå-gula defekter (mer sällsynta)

Tritanopia — avsaknad av blåa tappar. Blått framstår som grönt, och gult framstår som blekt eller osynligt. Sällsynt.

Tritanomali — nedsatt blåkänslighet. Blågrönt och rödlila förväxlas.

Monokromasi (mycket sällsynt)

Achromatopsia — avsaknad av alla färgtappar. Endast ljusstyrka uppfattas; världen framstår i gråtoner. Ofta åtföljd av ljuskänslighet och nedsatt synskärpa.

Hur färgblindhet bryter vanliga webbmönster

Att känna till typerna abstrakt är mindre användbart än att veta vilka specifika designbeslut som orsakar problem. Dessa är de vanligaste.

Feltillstånd som endast anges med rött

Att göra ett formulärfälts kantlinje röd för att visa ett valideringsfel är ett av de mest utbredda mönstren inom webbdesign. För användare med röd-grön defekt kan rött på vitt eller rött på grått vara nästan osynligt, eller omöjligt att skilja från ett normalt ofokuserat tillstånd.

Detta täcks direkt av WCAG 2.2 1.4.1 Användning av färg (nivå A): färg får inte vara det enda sättet att förmedla information, ange en handling, uppmana till ett svar eller särskilja ett visuellt element.

Åtgärden är enkel: kombinera färg med en andra visuell indikator — en ikon, en textetikett, en förändring i kantlinjens tjocklek eller någon annan signal som inte är färgbaserad.

<!-- Förlitar sig enbart på färg: misslyckas med 1.4.1 -->
<input type="email" class="field--error">

<!-- Färg plus ikon plus text: godkänt -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Ange en giltig e-postadress.
  </p>
</div>

Otillräcklig kontrast

Låg kontrast är ett separat problem från färgblindhet, men de överlappar. Många färgpaletter som framstår som läsbara för typiskt färgseende blir ännu svårare att läsa vid färgseendedefekt, eftersom den upplevda skillnaden mellan förgrund och bakgrund krymper ytterligare.

WCAG 1.4.3 kräver ett minsta kontrastförhållande på 4,5:1 för normal text och 3:1 för stor text. Att testa kontrast med ett verktyg som webbläsarens DevTools-färgväljare eller en dedikerad kontrollerare är icke förhandlingsbart — förlita dig inte på visuell inspektion.

Datavisualisering som kodar enbart i färg

Ett cirkeldiagram med sex segment som endast särskiljs med färg. En karta med en gradient från rött till grönt. Ett linjediagram där fyra dataset skiljs åt enbart genom nyans.

För deuteranopia-användare blir rött och grönt omöjliga att skilja åt. Diagrammets innebörd faller samman helt. För mer om detta, se vår guide om tillgänglig datavisualisering.

Länkar som förlitar sig enbart på färg för att sticka ut från brödtext

Som standard understryker webbläsare länkar. Många designers tar bort denna understrykning och förlitar sig enbart på färg för att skilja länkar från omgivande text. Användare med färgseendedefekt — och särskilt de som använder teman med låg kontrast — kan misslyckas med att identifiera länkar över huvud taget.

WCAG 1.4.1 gäller även här. Om länkfärg är den enda visuella indikatorn (ingen understrykning, ingen fetstil, ingen annan särskiljare) är länken inte tillgänglig för färgblinda användare.

Den enklaste åtgärden: återställ understrykningen. Alternativt, säkerställ att länkfärgen har tillräcklig kontrast mot både brödtextfärgen och bakgrunden.

Att designa med färgblindhet i åtanke

Använd redundant kodning

Lägg till en andra visuell kanal vid sidan av färg. I diagram: lägg till mönster, texturer eller dataetiketter. I statusindikatorer: lägg till ikoner. I formulärtillstånd: lägg till text. Målet är att någon som helt tar bort färg från designen fortfarande kan förstå allt.

Testa med simuleringsverktyg

Chrome DevTools har en inbyggd simulering av färgblindhet. Öppna DevTools > panelen Rendering > “Emulate vision deficiencies”. Du kan simulera protanopia, deuteranopia, tritanopia och achromatopsia.

Figma och andra designverktyg har liknande insticksprogram. Att köra en simulering tar några sekunder och avslöjar ofta problem som inte var synliga i standardförhandsvisningen.

Kontrollera din palett som helhet

Testa inte bara enskilda elementpar. Titta på hela paletten tillsammans: primära, sekundära, fel-, framgångs-, varnings- och informationsfärger. Under deuteranopia-simulering, ser felrött och framgångsgrönt likadana ut? Om så är fallet har du ett problem oavsett om dina kontrastförhållanden tekniskt sett godkänns.

Undvik problematiska kombinationer

Särskilt opålitliga vid färgseendedefekt:

• Rött och grönt
• Grönt och brunt
• Blått och lila
• Grönt och grått
• Grönt och svart

När dessa par behöver förekomma i samma sammanhang, särskilj dem genom ljushet eller mönster snarare än nyans.

Vad WCAG täcker och inte täcker

WCAG täcker färgkontrast (1.4.3, 1.4.11) och förbudet mot att använda färg som det enda sättet att förmedla information (1.4.1). Det specificerar inte vilka färger du får eller inte får använda, och kräver inte att hela din palett ska vara uppfattbar under varje typ av färgseendedefekt.

Vad det kräver är att ingen innebörd går förlorad när färg tas bort. Det är det praktiska testet. Ta bort färgen från din design. Förblir varje informationsbit tillgänglig genom andra medel?

Om svaret är ja har du uppfyllt kravet. Om feltillstånd försvinner, om diagramdata blir tvetydig, om länkar blir osynliga — då har du arbete kvar att göra.

Våra tillgänglighetsgranskningar inkluderar färgtillgänglighet som en standarddel av granskningen. Om du vill veta var din nuvarande design står, kör en gratis automatiserad skanning för att fånga de automatiserbara problemen som en utgångspunkt.