Fargekontrast

Slik jobber vi med fargekontraster i NAV.

8. des. 2022

Sarah Brodwall

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

Meningsbærende grafiske elementer

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

NAV-krav: Ikke-tekstlig kontrast

Meningsbærende ikke-tekstlig informasjon må ha et kontrastforhold på minst 4,5:1 mot bakgrunnsfargen.

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
Meningsbærende grafiske elementer	3:1		4.5:1
Tekst til deaktiverte tilstander			4.5:1
Klikkeflater			3:1

Bidragsytere