For lav fargekontrast

Hva betyr dette?

WCAG 1.4.3 Kontrast (minimum) stiller krav til fargeforskjellen mellom tekst og bakgrunn. Kontrastforholdet måles som et tall - jo høyere tall, desto lettere er teksten å lese. Kravet er:

• 4.5:1 for normal tekst (under 18pt, eller under 14pt fet)
• 3:1 for stor tekst (18pt og over, eller 14pt fet og over)

Et kontrastforhold på 1:1 betyr at tekst og bakgrunn er helt like (usynlig tekst), mens 21:1 er svart tekst på hvit bakgrunn - maksimal kontrast. De fleste kontrastproblemer på nettsider oppstår i gråsonen, for eksempel lysegrå tekst på hvit bakgrunn.

Dette kravet er klassifisert som nivå AA i WCAG, som er standarden norske virksomheter må oppfylle.

Hvorfor er det viktig?

Fargekontrast handler om å gjøre tekst lesbar for alle - ikke bare personer med perfekt syn. Omtrent 250 000 nordmenn har en synsnedsettelse, og mange flere opplever midlertidig dårlige leseforhold: sollys på mobilskjermen, en flekket skjerm, tretthet på slutten av arbeidsdagen.

Lav kontrast rammer spesielt:

• Svaksynte personer som trenger tydelig forskjell mellom tekst og bakgrunn for å lese
• Eldre brukere med naturlig aldersrelatert synsreduksjon
• Fargeblinde som oppfatter farger annerledes - omtrent 8 % av alle menn har en form for fargeblindhet
• Alle som bruker mobil i sollys - skjermens lysstyrke og refleksjoner reduserer effektiv kontrast dramatisk

Dårlig kontrast betyr tapt informasjon. Hvis brukeren ikke kan lese teksten din, spiller det ingen rolle hvor god den er. For en nettbutikk kan det bety tapte salg. For en offentlig tjeneste kan det bety at folk ikke får informasjonen de har rett på.

Hvordan fikser jeg det?

Løsningen er enkel i teorien: juster fargene i CSS-en din slik at kontrastforholdet oppfyller kravene. I praksis krever det noen gode verktøy og litt forståelse for hvor problemene typisk oppstår.

Typiske problemområder

De vanligste kontrastfeilene vi ser på norske nettsider:

• Lysegrå tekst på hvit bakgrunn - populært i design, men ofte for lav kontrast
• Hvit tekst på lyse bilder - kontrastforholdet varierer over bildet
• Lette pastellfarger - ser fine ut, men teksten forsvinner
• Plassholdertekst i skjemafelt - som oftest altfor lys

Eksempel: Fikse lysegrå tekst

Her er et vanlig problem og løsningen:

/* Før: For lav kontrast mot hvit bakgrunn (2.8:1) */
.undertekst {
  color: #999999;
  background-color: #ffffff;
}

/* Etter: Godkjent kontrast (4.6:1) */
.undertekst {
  color: #595959;
  background-color: #ffffff;
}

Forskjellen i utseende er overraskende liten - teksten blir litt mørkere, men leselig for langt flere mennesker.

Eksempel: Lenker i brødtekst

Lenker som bare skiller seg fra vanlig tekst med farge, må ha 3:1 kontrast både mot bakgrunnen og mot den omliggende teksten:

/* Dårlig: Lys blå lenke som er vanskelig å skille fra sort tekst */
a {
  color: #5f9eef;
  text-decoration: none;
}

/* Bedre: Tydelig lenke med god kontrast og understreking */
a {
  color: #0055aa;
  text-decoration: underline;
}

Det er anbefalt å alltid ha understreking på lenker i tillegg til fargeforskjell, slik at fargeblinde brukere også kan identifisere dem.

Verktøy for å sjekke kontrast

Du trenger ikke gjette - det finnes gode gratisverktøy:

• WebAIM Contrast Checker - skriv inn forgrunns- og bakgrunnsfarge, og du får kontrastforholdet med en gang
• Chrome DevTools - inspiser et element, og Chrome viser kontrastforholdet direkte i fargevelgeren
• Colour Contrast Analyser (CCA) - et gratis program du installerer, som lar deg bruke et pipetteverktøy for å måle kontrast direkte på skjermen
• Lighthouse i Chrome - kjør en tilgjengelighetssjekk som automatisk finner kontrastproblemer

Tips for designprosessen

Den beste måten å unngå kontrastproblemer er å tenke på det tidlig:

• Velg en palett med god kontrast fra starten. Det er langt enklere enn å fikse farger i etterkant.
• Test fargekombinasjonene dine med et kontrastverktøy før du implementerer dem.
• Unngå tekst oppå bilder med mindre du legger til en halvgjennomsiktig bakgrunn bak teksten.
• Ikke stol bare på farge for å formidle informasjon - bruk også form, tekst eller ikoner.

God kontrast koster ingenting ekstra å implementere, men gjør innholdet ditt tilgjengelig for hundretusener av nordmenn som ellers ville slitt med å lese det.