Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

For å sikre god lesbarhet skal alt innhold ha tilstrekkelig kontrast mot bakgrunnen.
Dette er viktig for alle elever. Teksten du skriver i forfatterverktøyet vil automatisk være svart med
hvit bakgrunn, så der trenger du ikke bekymre deg.
Det er når du bruker bilder som inneholder tekst, eller bruker farger i mediebank, at du må passe på.

Dette er viktig når du bruker farger i oppgavene

🔵 Bruk aldri farger som eneste informasjonsbærer

Du kan bruke farger for å gi bedre oversikt og skape assosiasjoner hos den som leser.
Men du må aldri bruke kun farge fordi vi for å formidle informasjon. Vi mennesker har ulik evne til å
oppfatte farge. Samt at fargeblinde har problemer med å skille farger (enkelte ser ikke fordkjell på rødt og grønt) samt å se farger.

Bruk av farger i diagrammer - slik gjør du det riktig

Dette er feil med diagrammet til venstre:
Venstre diagram har ikke tatt hensyn til fargeblinde brukere fordi ilnjene kun belager seg på farger smedr lik kontrast og valør (lys eller mørk tone). Labelene som forklarer kategorien til de forkjellige linjene belager seg også kun på farger, så disse er også feil. 

Derfor er diagrammet til høyre tiktig:

I dette diagrammet bruker de farge OG mønster på å skille de forkjellige linjene.  I tillegg har de gitt hver linje et kategorinavn (som er direkte linket til

, og enkelte klarer for eksempel ikke å se forskjell mellom rødt og grønt.

🔵

linjen) )forskjellige "mønster" på linjene. I tillegg har samt gitt hver linje en label (navn).

Image Removed

2.

Kontrasten må være høy nok

Elever kan få utfordringer med å se når kontrasten ikke er høy nok. Vi må derfor
passe på at bakgrunns- og forgrunnsfarge har riktig kontrastforhold.
I følge WCAG 2.1 er dette forholdet 3:1 som et minimum. 

Består innholdet ditt testen?
Du kan sjekke kontrastforhold på denne siden (webaim.org)

Eksempler på bruk av farger

Lenker – slik skal de se ut 

Du kan bruke farge på en lenke som er forskjellig fra resten av teksten, men
i tillegg til farge må du ha en visuell fremheving som for eksempel understrek eller fet tekst.

Kort sagt: Lenker enten være fet eller streket under, i tillegg til å være en annen farge (valgfritt).

Eksempel: Lenker

Riktig: 

Les mer om eksempeloppgavene på udir.no

Les mer om eksempeloppgavene på udir.no

Feil: 

Les mer om eksempeloppgavene på udir.no

Slik sjekker du kontrasten

Kontrasten  bør måles med programvare. 
Accessible Web sin Contrast Checker er et godt og trygt verktøy som kan legges til som en utvidelse i nettleseren. 
Denne kan legges til både i Chrome og Edge. 

Hvis du ikke ønsker å legge til noe i nettleseren, kan du google "contrast checker" og bruke
et av de gratis verktøyene som kommer opp. 



Dette er god kontrast ✅


Dette er dårlig kontrast ❌






Panel
titleBGColor#E3F2EB
borderStylesolid
titleEksempel på god bruk av farger

Image Added


Dette linjediagrammet bruker både farger, indikatorer med ulike mønster og etikettnavn på linjene for å skille de fra hverandre. 






Panel
titleBGColor#E3F2EB
borderStylesolid
titleEksempler på bruk av farger – i diagram

Image Added

🟥 I diagrammet til venstre er man fullstendig avhengig av å kunne se farger for å tyde diagrammet. Dette er ikke god bruk av farger. 

I diagrammet til høyre brukes både forskjellige farger og forskjellige mønstre til å skille linjene. I tillegg har linjene fått en etikett med kategorinavn. 





Content by Label
showLabelsfalse
showSpacefalse
titleRelaterte artikler
cqllabel in ("universell-utforming","uu") and space = currentSpace()

Farger i diagrammer

I diagram brukes ofte ulike farger for å formidle informasjon.
For at alle seende elever skal skjønne koblingen mellom fargen og informasjonen, trenger vi
flere meningsbærere. For eksempel kan vi koble ledeteksten til fargen slik som på eksempelet under.

Eksempel: Ledetekst (etiketter) koblet til diagrammet

Image Removed

Eksempel: Linjediagram med indikatorer

Bildet viser et universelt utformet linjediagram. I tillegg til forskjellige farger, er det

  • ulike mønstre (indikatorer) på linjene som trekanter og sirkler for å skille linjene fra hverandre
  • en tekst i nærheten til linja som viser hvilken kategori linja tilhører
Image Removed