Kontrast

For å sikre god lesbarhet må all tekst ha tilstrekkelig kontrast mot bakgrunnen. Dette er viktig for alle brukere, særlig under krevende lysforhold. De som trenger dette mest er svaksynte, dyslektikere og fargeblinde.

Publisert: 01. jul 2015, Sist endret: 12. des 2018

Introduksjon

Kontrast måles ut fra lysstyrke, der maksimal kontrast er 21:1 for svart mot hvit. Det spiller ingen rolle for kontrastmåling hva som er forgrunnsfarge og hva som er bakgrunn, men brukeropplevelsen vil selvfølgelig være ulik. En god del brukere er svært lyssensitive, og vil kunne foretrekke mørk bakgrunn og lys tekst.

Løsninger som møter kravene i forskriften

Krav til kontrast avhenger av størrelsen på teksten. WCAG 2.0 setter skille ut fra størrelse på teksten:

  • kontrastkravet for stor tekst 3.0:1
  • kontrastkravet for liten tekst 4.5:1
  • Ved normal teksttykkelse er stor tekst 18 punkt og større. Dette tilsvarer 24 piksler eller større.
  • Ved fet tekststil er stor tekst 14 punkt og større. Dette tilsvarer 19 piksler eller større.

Tekststørrelse kan være litt krevende å vurdere, så en enkel pekepinn er at stor tekst er det som er dobbelt så stor som brødtekst. Alt annet er liten tekst.

Kravet til kontrast gjelder både tekst og bilde av tekst.

Eksempler på kontrastnivå:

Ulike kontrastnivå på tekstavsnitt med tilhørende overskrift, kontrast på henholdsvis 3.0:1 (ikke godkjent), 7.0:1 (OK) og 21.0:1 (bra).
 
 
Slik vises forskjellige kontrastnivåer på mobilen
 
 

Måling av kontrast

Dersom bakgrunn og/eller forgrunn har varierende farge, er det den svakeste kontrasten som skal måles. Her ser du målepunktet:

Markering av målepunkt for kontrast ved varierende bakgrunnsfarge.
 
 

Vær også oppmerksom på at kantutjevning kan føre til at fargen på liten tekst ikke alltid fremstår som den definerte fargen. Selv om det er den definerte fargen som gjelder ved kontrastvurdering, kan kantutjevning endre den opplevde fargen, og dermed også kontrasten, ganske betydelig. 

Kontrast kan du måle med gratisverktøy, som for eksempel Colour Contrast Analyser (ekstern lenke, engelsk språk)

 Forstørring, sammenligning mellom vektorbasert og pikselbasert forstørring og hvilken effekt det har på fargeopplevelsen.
 
 

Unntak

Tekst i logoer og tekst i tilknytning til deaktiverte skjemaelementer er ikke omfattet av kravet.

Avkrysningsvalg som ikke er mulig å velge er markert med svakere farge.
 
 

Kravet gjelder heller ikke for søyler, støttelinjer og andre grafiske element i blant annet diagram og grafer. 

Høykontrastløsning

En god del brukere vil ha stor nytte av høykontrastvisning, for eksempel med mørk bakgrunn og lys tekst.

Sammenligning mellom lys bakgrunn med mørk skrift og mørk bakgrunn med lys skrift.
 
 

Høykontrastløsning er en alternativ måte å oppfylle kravet på. Løsningen er i samsvar med krav til kontrast, hvis innholdet på sidene er det samme i høykontrastvisning som i ordinær visning.

Anbefalinger utover kravene i forskriften

Du bør vurdere AAA-nivå for kontrast på løpende tekst, altså 7:1. Dette vil ha stor innvirkning på lesbarheten for mange brukere, særlig på mobil og nettbrett som ofte brukes i dårlige lysforhold.

Kvalitetssikring av farger

Du kan med fordel vurdere hvordan fargene oppleves for fargeblinde, også med tanke på kontrast. Fordi fargeblinde brukere ikke registrerer alle fargekomponenter, kan opplevd lyskontrast være vesentlig svakere enn det som kan måles ut fra koden. Enkelte grønnfarger kan for eksempel variere med omtrent 200 % i opplevd lysstyrke. Også dette kan du måle med gratisverktøy, som for eksempel Colour Contrast Analyser (ekstern lenke, engelsk språk)

Deldette

Fant du det du lette etter?

Stjerne(*) er obligatoriske felter som du må fylle ut for å sende skjemaet. 

MERK: Du får ikke svar på denne meldingen. Har du spørsmål du ønsker svar på send oss en e-post til uu@difi.no.

Fant du det du lette etter?
*