Fargekontrast

Slik jobber vi med fargekontraster i NAV.

Sarah Brodwall

—15. juli 2022

Innhold med god kontrast er lettere å lese for alle som ser. Høy kontrast er derimot særdeles viktig for folk som er svaksynte, folk som leser innholdet i omgivelser med mye lys og folk som bruker enheter med dårlig skjerm.

Dersom informasjon er viktig nok til at noen brukere skal kunne oppfatte den, er informasjonen viktig nok til at alle brukere skal kunne oppfatte den. Derfor stiller NAV strenge krav til fargekontrast.

Krav til fargekontrast i NAVs løsninger

Tekstlig kontrast

Tekst i NAV sine løsninger må oppfylle følgende krav:

NAV-krav: Tekstlig kontrast

Tekst har et kontrastforhold på minst 7:1 med bakgrunnen, unntatt i følgende tilfeller:

Normal-vekt tekst (CSS font-weightnormal eller 100 – 600) som er 24px eller større, og fet tekst (CSS font-weight bold eller 700 - 900) som er 19px eller større må ha et kontrastforhold på minst 4,5:1 med bakgrunnen.
Tekst som utgjør en del av en synlig inaktiv brukergrensesnittkomponentmå ha et kontrastforhold på minst 4,5:1 med bakgrunnen.
Tekst som er ren dekorasjon eller som ikke er synlig for noen er ikke underlagt kontrastkrav.

Ikke-tekstlig kontrast

Vi anbefaler mot at grafikk brukes som eneste måte av å kommunisere innhold—dvs., vi anbefaler mot meningsbærende grafikk. Grafikk alene kan lett være misforstått. I de aller fleste tilfeller bør du bruke forklarende tekst sammen med grafikk.

Skulle du velge å bruke meningsbærende grafikk uten støttende tekst, må dette møte følgende krav:

NAV-krav: Ikke-tekstlig kontrast

Meningsbærende ikke-tekstlig informasjon, inkludert synlige inaktive komponenter og klikkeflater, må ha et kontrastforhold på minst 3:1 mot bakgrunnsfargen.

Hvordan er NAV sine krav annerledes fra WCAG?

Type innhold	WCAG 2.1 AA	WCAG 2.1 AAA	NAV
Vanlig tekst	4.5:1	7:1	7:1
Stor/fet tekst	3:1	4.5:1	4.5:1
Miningsbærende grafikk	3:1		4.5:1
Deaktiverte tilstander			4.5:1
Klikkflater			3:1