Farveblindhed og webdesign: hvad du bør vide

Mere almindeligt, end de fleste designere er klar over

Nedsat farvesyn — almindeligvis kaldet farveblindhed — rammer omkring 8 % af mænd og 0,5 % af kvinder. Det er cirka 1 ud af 12 mænd og 1 ud af 200 kvinder, hvilket gør det mere udbredt end de fleste andre handicap, som webtilgængelighedsstandarder adresserer.

Alligevel bliver det rutinemæssigt overset i design. Teams tester med skærmlæsere og tastaturnavigation, kører en automatisk WCAG-scanning og betragter tilgængelighedsarbejdet som færdigt — uden nogensinde at tjekke, om deres farvepalet er læselig for farveblinde brugere.

At forstå farveblindhed, og hvad det faktisk gør ved de webgrænseflader, du designer, er det første skridt til at rette det.

Typerne, og hvad de gør

Nedsat farvesyn findes i flere former, og de producerer ikke alle den samme oplevelse.

Rød-grønne mangler (mest almindelige)

Protanopia — fuldstændig fravær af røde tap-fotoreceptorer. Rød fremstår mørk eller sort. Rød-grønne skelnen går tabt.

Protanomali — reduceret følsomhed over for rød. Rød, orange og gul forskyder sig mod grøn, og den overordnede oplevelse er mattere, som om den røde kanal er skruet ned.

Deuteranopia — fuldstændig fravær af grønne tapreceptorer. Den mest almindelige form for farveblindhed. Grøn og rød forveksles; verden ser ud, som om den er filtreret gennem en gulbrun linse.

Deuteranomali — reduceret følsomhed over for grøn. Ligner deuteranopia, men mildere. Den mest udbredte type samlet set, som rammer omkring 5 % af mænd.

Blå-gule mangler (sjældnere)

Tritanopia — fravær af blå tapreceptorer. Blå fremstår grøn, og gul fremstår bleg eller usynlig. Sjælden.

Tritanomali — reduceret følsomhed over for blå. Blågrøn og rødlilla forveksles.

Monokromasi (meget sjælden)

Achromatopsia — fravær af alle farvetapreceptorer. Kun lysstyrke opfattes; verden fremstår i gråtoner. Ofte ledsaget af lysfølsomhed og nedsat synsskarphed.

Hvordan farveblindhed bryder almindelige webmønstre

At kende typerne i abstrakt er mindre nyttigt end at vide, hvilke specifikke designbeslutninger der forårsager problemer. Disse er de mest almindelige.

Fejltilstande angivet kun med rød

At gøre kanten på et formularfelt rød for at vise en valideringsfejl er et af de mest udbredte mønstre i webdesign. For brugere med rød-grøn mangel kan rød på hvid eller rød på grå være næsten usynlig eller ikke til at skelne fra en normal ufokuseret tilstand.

Dette er dækket direkte af WCAG 2.2 1.4.1 Brug af farve (niveau A): farve må ikke være det eneste middel til at formidle information, angive en handling, fremkalde en respons eller skelne et visuelt element.

Løsningen er ligetil: kombinér farve med en anden visuel indikator — et ikon, en tekstetiket, en ændring i kanttykkelse eller et hvilket som helst andet ikke-farvebaseret signal.

<!-- Forlader sig på farve alene: fejler 1.4.1 -->
<input type="email" class="field--error">

<!-- Farve plus ikon plus tekst: består -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Indtast en gyldig e-mailadresse.
  </p>
</div>

Utilstrækkelig kontrast

Lav kontrast er et separat problem fra farveblindhed, men de overlapper. Mange farvepaletter, der fremstår læselige for typisk farvesyn, bliver endnu sværere at læse under nedsat farvesyn, fordi den opfattede forskel mellem forgrund og baggrund skrumper yderligere.

WCAG 1.4.3 kræver et minimumskontrastforhold på 4.5:1 for normal tekst og 3:1 for stor tekst. At teste kontrast med et værktøj som browserens DevTools-farvevælger eller en dedikeret kontroller er ikke til forhandling — stol ikke på visuel inspektion.

Datavisualisering, der kun koder i farve

Et cirkeldiagram med seks segmenter, der kun adskilles med farve. Et kort med en rød-til-grøn gradient. Et linjediagram, hvor fire datasæt kun skelnes ved farvetone.

For deuteranopia-brugere bliver rød og grøn umulige at skelne. Diagrammets betydning kollapser fuldstændigt. For mere om dette, se vores guide om tilgængelig datavisualisering.

Links, der kun forlader sig på farve for at skille sig ud fra brødteksten

Som standard understreger browsere links. Mange designere fjerner denne understregning og forlader sig på farve alene for at adskille links fra den omgivende tekst. Brugere med nedsat farvesyn — og især dem, der bruger temaer med lav kontrast — kan helt undlade at identificere links.

WCAG 1.4.1 gælder også her. Hvis linkfarve er den eneste visuelle indikator (ingen understregning, ingen fed skrift, ingen anden differentiering), er linket ikke tilgængeligt for farveblinde brugere.

Den enkleste løsning: genopret understregningen. Alternativt kan du sikre, at linkfarven har tilstrækkelig kontrast mod både brødtekstens farve og baggrunden.

At designe med farveblindhed i tankerne

Brug redundant kodning

Tilføj en anden visuel kanal ved siden af farve. I diagrammer: tilføj mønstre, teksturer eller dataetiketter. I statusindikatorer: tilføj ikoner. I formulartilstande: tilføj tekst. Målet er, at en person, der fjerner farve helt fra designet, stadig kan forstå alt.

Test med simuleringsværktøjer

Chrome DevTools har en indbygget farveblindhedssimulering. Åbn DevTools > Rendering-panelet > “Emulate vision deficiencies.” Du kan simulere protanopia, deuteranopia, tritanopia og achromatopsia.

Figma og andre designværktøjer har lignende plugins. At køre en simulering tager sekunder og afslører ofte problemer, der ikke var synlige i standardeksemplet.

Tjek din palet som en helhed

Test ikke bare individuelle elementpar. Se på den fulde palet samlet: primære, sekundære, fejl-, succes-, advarsels- og informationsfarver. Under deuteranopia-simulering, ser fejlrød og succesgrøn ens ud? Hvis ja, har du et problem, uanset om dine kontrastforhold teknisk består.

Undgå problematiske kombinationer

Særligt upålidelige ved nedsat farvesyn:

• Rød og grøn
• Grøn og brun
• Blå og lilla
• Grøn og grå
• Grøn og sort

Når disse par skal optræde i samme kontekst, skal du differentiere dem gennem lysstyrke eller mønster frem for farvetone.

Hvad WCAG dækker og ikke dækker

WCAG dækker farvekontrast (1.4.3, 1.4.11) og forbuddet mod at bruge farve som det eneste middel til at formidle information (1.4.1). Det angiver ikke, hvilke farver du kan eller ikke kan bruge, eller kræver, at hele din palet skal kunne opfattes under enhver type nedsat farvesyn.

Hvad det kræver, er, at ingen betydning går tabt, når farve fjernes. Det er den praktiske test. Fjern farven fra dit design. Forbliver hvert stykke information tilgængeligt gennem andre midler?

Hvis svaret er ja, har du opfyldt kravet. Hvis fejltilstande forsvinder, hvis diagramdata bliver tvetydige, hvis links bliver usynlige — så har du arbejde at gøre.

Vores tilgængelighedsaudits inkluderer farvetilgængelighed som en standarddel af gennemgangen. Hvis du vil vide, hvor dit nuværende design står, kør en gratis automatisk scanning for at fange de automatiserbare problemer som udgangspunkt.