Kontrast

For å sikre god lesbarhet må all meningsbærende tekst og grafikk 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.

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.

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

Løsninger som møter kravene i forskriften

Krav til kontrast avhenger av størrelsen på objektene. 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
  • Ved fet tekststil er stor tekst 14 punkt og 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.

Kontrast kan du måle med gratisverktøy, som for eksempel Colour Contrast Analyser.

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.

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

Unntak

Dersom et objekt ikke er meningsbærende eller det skal oppfattes som inaktivt, kan det i gitte situasjoner være akseptabelt ikke å forholde seg til kontrastkravene, men dette må vurderes nøye.

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

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.

Høykontrastløsning

En god del brukere vil ha stor nytte av mørk bakgrunn og lys tekst, gjerne kalt invertert oppsett. Det bør være så enkelt så mulig for brukeren å oppnå dette, og helst med en metode som gir effekt også på andre nettsteder.

Metoder for å få mørk bakgrunn og lys tekst er:

  • Innstillinger på operativsystemnivå – påvirker det meste av programvare på enheten
  • Innstillinger i nettleser – påvirker alle nettsteder som åpnes i nettleseren
  • Egendefinert funksjon på nettstedet – påvirker bare det spesifikke nettstedet

Fortrinnsvis bør det fungere med endring av innstillinger i operativsystem eller nettleser. Fra et brukerperspektiv vil det være samme funksjon uavhengig av nettsted, og fra utviklerperspektiv er det ganske krevende å bygge og vedlikeholde/kvalitetssikre en egendefinert funksjon for invertering.

Uavhengig av hvilken løsning som velges, er det viktig at den har fullt gjennomslag og fungerer på alle sider og på alle objekter. Høykontrastløsning skal også være nettopp det, altså at alle kontraster tilfredsstiller det strengere kontrastkravet på AAA-nivå. Øvrige krav må fremdeles tilfredsstilles, som for eksempel tydelig fokusmarkering ved tastaturnavigering.

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)

Publisert: 01. jul 2015, Sist endret: 08. sep 2017

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?
*