Färgblindhet på webben: vad det betyder och hur man designar för det

Vad är färgblindhet?

Vi ser färger tack vare tre typer av tappar i näthinnan. Varje typ reagerar på olika ljusområden: röd, grön eller blå. Om en typ av tappar fungerar mindre bra eller inte alls, uppfattar människor vissa färger olika.

Strikt taget finns det två former:

• Färgseendebrist: Människor kan se alla färger, men uppfatta vissa av dem svagare. Rött och grönt, till exempel, ser väldigt lika ut.

• Färgblindhet: Människor kan inte uppfatta en eller flera färger alls. Vid fullständig färgblindhet, kallad akromatopsi, ser människor bara nyanser av grått.

I vardagligt språk används ofta "färgblindhet" för båda. De flesta som drabbas har en färgseendenedsättning, inte fullständig färgblindhet.

De vanligaste typerna

• Rödgrön brist: den absolut vanligaste formen. Rött och grönt är svåra att skilja åt. Beroende på vilken tape som är drabbad kallas det protanomali eller protanopi (rött) och deuteranomali eller deuteranopi (grönt).

• Blågul brist (tritanomali eller tritanopi): sällsynta. Blått och grönt, och gult och rosa, är svåra att skilja åt.

• Fullständig färgblindhet (akromatopsi): mycket sällsynt. De som drabbas ser bara ljus och mörker och är ofta mycket känsliga för bländning.

_{Figur 1: Simulering av olika färgblindheter. Ursprunglig (överst till vänster), rödblindhet (överst till höger), grönblindhet (nederst till vänster) och blåblindhet (nederst till höger).}

Hur många människor är drabbade?

Enligt det tyska hälsoministeriets portal gesund.bund.de , cirka 8 % av männen och 0,4 % av kvinnorna har en färgseendenedsättning. I ett team på 25 män är statistiskt sett två drabbade. Fullständig färgblindhet är däremot mycket sällsynt: i Tyskland lever endast cirka 2 700 personer med det.

Män drabbas mycket oftare eftersom generna för röda och gröna tappar finns på X-kromosomen. Män har bara en X-kromosom, så en förändring i denna gen har en direkt effekt. Kvinnor har två och är vanligtvis bärare utan symtom.

Färgseendet kan också förändras under livets gång, till exempel på grund av ögonsjukdomar. Dessutom ser många människor färger mindre tydligt i vissa situationer, som till exempel på en telefon i starkt solljus.

Vilka element på webbplatser orsakar problem?

Färgblindhet blir ett hinder när färg är det enda sättet att förmedla information. Typiska exempel:

• Länkar i löpande text: Om länkar bara är markerade med färg, utan understrykning, kan många inte se dem.

• Fel- och framgångsmeddelanden: En röd ram runt ett formulärfält eller en grön bock är inte tillräckligt.

• Diagram och kartor: Linjer, streck eller områden som bara skiljer sig åt i färg kan inte skiljas åt.

• Statusvisningar: Röda, gula och gröna indikatorer, såsom för tillgänglighet eller leveransstatus, blir otydliga.

• Knappar och val: Om det aktiva tillståndet endast visas med en färgförändring vet användarna inte vad som är valt.

• Låg kontrast: Ljusgrå text mot vit bakgrund eller text ovanpå bilder är svårläst – inte bara för personer med nedsatt färgseende.

• Platshållare i formulär: Ljusgrå platshållartext är ofta svår att skilja från text som redan har skrivits in.

Problemet är utbrett. Enligt WebAIM-miljon 2026 , 83,9 % av startsidorna på de en miljon största webbplatserna hade text med för låg kontrast.

Figur 2 visar hur ett diagram kan se ut för någon med grön blindhet:

^{Figur 2: Till vänster det oförändrade diagrammet, till höger med simulerad grön blindhet.}

Vad WCAG kräver

Riktlinjerna för tillgänglighet för webbinnehåll (WCAG) innehåller tre framgångskriterier som är särskilt viktiga för färg:

• 1.4.1 Färganvändning (nivå A): Färg får inte vara det enda visuella medlet att förmedla information, indikera en handling eller särskilja ett element.

• 1.4.3 Kontrast (Minimum) (nivå AA): Text behöver ett kontrastförhållande på minst 4,5:1 till bakgrunden, stor text minst 3:1.

• 1.4.11 Icke-textkontrast (nivå AA): Knappar, formulärfältskanter, fokusindikatorer och viktig grafik behöver ett kontrastförhållande på minst 3:1.

Dessa kriterier är en del av den europeiska standarden EN 301 549, där Europeiska tillgänglighetslagen är baserad.

Tips för färgtillgänglig webbdesign

1. Använd aldrig enbart färg: Kombinera färg med text, ikoner, mönster eller understrykningar. Ett felmeddelande behöver tydlig text, inte bara en röd ram.

2. Understrukna länkar: Länkar i löpande text bör vara understrukna eller på annat sätt synligt markerade.

3. Kontrollera kontrasten: Använd en kontrastkontroll för att kontrollera att text och viktiga element uppfyller WCAG-värdena.

4. Märk diagram direkt: Skriv etiketter bredvid linjer och streck istället för att bara använda en färgförklaring. Mönster eller olika linjestilar hjälper också.

5. Undvik kritiska färgkombinationer: Rött och grönt, grönt och brunt, och blått och lila är svåra att skilja åt för många.

6. Testa med en simulering: Många designverktyg och webbläsarutvecklingsverktyg kan simulera olika färgseendebrister. Detta visar snabbt var information går förlorad.

7. Tänk bortom färgblindhet: Bra kontrast och tydliga signaler hjälper även äldre personer, personer med nedsatt syn och alla som använder telefon utomhus.

Vår guide till tillgänglig design med WCAG och vår artikel om tillgängliga onlineformulär innehåller fler praktiska tips.

Hur Eye-Able hjälper

Tillgänglig design är grunden. Dessutom Eye-Able Assist låter besökare anpassa en webbplats efter sina egna behov. Ett specialläge justerar färgerna för personer med färgblindhet eller nedsatt färgseende, och kontrastläget gör texten lättare att läsa.

^{Figur 3: Illustration av färgkorrigering med Ishihara-testbilder (Källa: Wellcome Collection CC BY 4.0)}

Figur 3 visar hur färgläget kan göra skillnader synliga igen i Ishihara-testbilder. Att öka kontrasten eller färgmättnaden kan också hjälpa. Trafikljuset i figur 4 är ett annat exempel:

^{Figur 4: Trafikljus med normala färger (vänster), trafikljus för personer med rödfel (mitten), trafikljus för personer med rödfel efter Eye-Able-korrigeringen (höger)}

Assist ersätter dock inte tillgänglig design. Huruvida en webbplats uppfyller WCAG kontrastkrav beror på dess design och implementering. Eye-Able Revision och rapport , kan du kontrollera din webbplats för kontrastfel och andra hinder och åtgärda dem vid källan.

Slutsats

Ungefär en av tolv män har en färgseendenedsättning. För dem går information som endast förmedlas via färg förlorad. Lösningen är enkel: använd aldrig enbart färg, se till att det finns tillräcklig kontrast och testa din design med en simulering. Detta gör webbplatser enklare att använda för alla.

Nyfiken på hur tillgänglig din egen webbplats är? gratis tillgänglighetskontroll ger dig en första överblick på mindre än 2 minuter.

Vanliga frågor: färgblindhet på webben

Hur vanligt är färgblindhet?

Omkring 8 % av männen och 0,4 % av kvinnorna har en färgseendenedsättning. Den vanligaste formen är rödgrön synnedsättning. Fullständig färgblindhet, där människor bara ser nyanser av grått, är mycket sällsynt.

Vad är skillnaden mellan färgblindhet och färgseendebrist?

Personer med nedsatt färgseende ser alla färger, men vissa av dem svagare. Personer med färgblindhet kan inte uppfatta en eller flera färger alls. I vardagligt språk används ofta "färgblindhet" för båda.

Vilka färger bör jag undvika för färgblinda användare?

Undvik kombinationer av rött och grönt, grönt och brunt, samt blått och lila när de är avsedda att förmedla en skillnad. Viktigast av allt, använd aldrig färg som enda signal – lägg alltid till text, ikoner eller mönster.

Vad säger WCAG om färg?

WCAG framgångskriterium 1.4.1 säger att färg inte får vara det enda sättet att förmedla information. Dessutom behöver text ett kontrastförhållande på minst 4,5:1 (1.4.3), och knappar, formulärfält och viktig grafik behöver minst 3:1 (1.4.11).

Hur kan jag testa min webbplats för färgblindhet?

Använd simuleringen av färgblindhet i ditt designverktyg eller webbläsarens utvecklingsverktyg för att se din webbplats som personer med olika typer av färgblindhet ser den. En kontrastkontroll eller en automatiserad tillgänglighetskontroll visar kontrastfel.