Gå til hovedinnhold
Entur logo – designsystemets starside
UNIVERSELL UTFORMING

Kontrastsjekker

For å sikre god lesbarhet i våre applikasjoner er det viktig å opprettholde kontrastkrav for farger på nett.

I henhold til lovverket er vi pålagt å følge forskrift om universell utforming når vi utvikler våre digitale løsninger. Når det gjelder farger, må all tekst derfor ha tilstrekkelig kontrast mot bakgrunnen for å sikre god lesbarhet. Dette er viktig for alle brukere, særlig under vanskelige lysforhold. Kravet til kontrast er avhengig av størrelsen på teksten/objektene:

  • Stor tekst: kontrastkrav 3.0:1
  • Liten tekst: kontrastkrav 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.

Stor tekst er det som er dobbelt så stor som brødtekst, det vil si at mesteparten av tekstinnholdet på våre nettsider krever kontrastkrav 4.5:1. Grafiske objekter som er viktig for å forstå innholdet, har en kontrast på minst 3:1 mot bakgrunnsfargen.

Eksempler på kontrastnivå:

Om Entur

Entur leverer tjenester som gjør det enkelt å reise på tvers av alle kollektivselskaper i Norge.

Unngå
Slik ser det ut med kontrast 1.7:1. Dette er ikke innafor kontrast-kravet og ikke godkjent."

Om Entur

Entur leverer tjenester som gjør det enkelt å reise på tvers av alle kollektivselskaper i Norge.

Innafor
Slik ser det ut med kontrast 5.5:1. Dette er innafor kontrastkravet.

Om Entur

Entur leverer tjenester som gjør det enkelt å reise på tvers av alle kollektiv-selskaper i Norge.

Innafor
Slik ser det ut med maks kontrast 15.6:1. Dette er veldig innafor!

Color Contrast Checker

Bruk vår Color Contrast Checker for å bestemme lesbarheten til tekst og kontrasten til grafiske objekter.

HEX
LESS
SCSS
#181c56
HEX
LESS
SCSS
#aeb7e2
Contrast Ratio:
8.0:1
NavnNormal tekstStor tekst (18pt +)Grafisk objekt
WCAG AAInnaforInnaforInnafor
WCAG AAAInnaforInnaforInnafor
Rediger denne siden på GitHub