Fargekontrast-sjekker (WCAG)
Velg to farger — kontrastforholdet regnes ut automatisk, og du ser om det består WCAG 2.1-kravene til lesbar tekst.
Hvordan bruke fargekontrast-sjekkeren
- Velg tekstfarge og bakgrunnsfarge med fargevelgeren eller ved å skrive en hex-kode direkte.
- Kontrastforholdet og hvilke WCAG-nivåer det består vises automatisk.
- Forhåndsvisningen nederst viser hvordan kombinasjonen faktisk ser ut.
Hva betyr WCAG AA og AAA?
WCAG (Web Content Accessibility Guidelines) er den internasjonale standarden for tilgjengelig webinnhold. For vanlig brødtekst krever AA-nivået et kontrastforhold på minst 4,5:1, mens AAA (strengere) krever minst 7:1. For stor tekst (18pt+/24px+, eller 14pt+/18,5px+ i fet skrift) er kravene lavere: 3:1 for AA og 4,5:1 for AAA.
Kontrastforholdet beregnes ut fra fargenes relative luminans (lyshet) etter WCAG 2.1 sin offisielle formel — samme metode som brukes i nettleserens tilgjengelighetsverktøy og automatiserte revisjonsverktøy som Lighthouse.
God kontrast handler ikke bare om synshemming — svak kontrast blir vanskelig å lese for de fleste i sollys på en mobilskjerm, ved nedsatt syn som følge av alder, eller for personer med fargesynsavvik som gjør enkelte fargekombinasjoner (som rødt på grønt) vanskeligere å skille selv når det tekniske kontrastforholdet er høyt. Derfor bør fargevalg aldri være den eneste måten å formidle informasjon på, f.eks. «feilmeldinger i rødt» bør også ha tekst eller et ikon i tillegg til fargen.
Kravene over gjelder tekst. Grafiske elementer og komponenter i brukergrensesnitt — som ikoner, avkrysningsbokser og kanten på et inputfelt — har et eget, lavere WCAG-krav på 3:1 mot omkringliggende farger, siden disse har andre visuelle kjennetegn (form, kontur) enn løpende tekst.
Ofte stilte spørsmål
Hvilket nivå bør jeg sikte mot?
AA er minstekravet i de fleste tilgjengelighetsregelverk (som WCAG 2.1 AA, ofte lovpålagt for offentlige nettsteder). AAA er strengere og anbefales der det er praktisk mulig, spesielt for lange tekster.
Hvorfor er kravet lavere for stor tekst?
Store bokstaver er lettere å skille fra bakgrunnen selv med lavere kontrast, siden formen og detaljene i hver bokstav er tydeligere synlige.
Sendes fargevalgene mine til en server?
Nei, all beregning skjer lokalt i din egen nettleser.
Gjelder kontrastkravet også for knapper og ikoner?
Ja, men med et lavere krav: grafiske elementer og UI-komponenter (ikoner, kanten på et inputfelt, avkrysningsbokser) trenger minst 3:1 kontrast mot bakgrunnen, mens løpende tekst har det strengere kravet på 4,5:1 (AA).
Hvorfor består ikke gult på hvitt kontrasttesten selv om det ser lesbart ut?
Gult har svært høy luminans i seg selv, så forskjellen fra en lys bakgrunn som hvitt blir liten selv om fargene virker forskjellige for øyet. Kontrastforholdet måler den faktiske lysstyrkeforskjellen, ikke hvor «ulike» fargene oppleves — derfor kan lyse farger på lys bakgrunn stryke selv når det ser greit ut ved første øyekast.