Informasjonsgrafikk

Universell utforming

God kommunikasjon er både en forpliktelse og et virkemiddel for Finanstilsynets samfunnsoppdrag. For å sikre god lesbarhet i infografikk, skal all tekst og grafikk ha tilstrekkelig kontrast.

• Sørg for en tydelig visuell kobling mellom den grafiske visningen og den forklarende teksten. For eksempel bør sektordiagram(kakediagram) ha en beskrivelse av de enkelte sektorene (kakestykkene) i direkte tilknytning til den aktuelle sektoren.
• WCAG 2.0 nivå AA krever et kontrastforhold på  minimum 4,5:1 for normal tekst og 3:1 for stor tekst.
• WCAG 2.1 krever et kontrastforhold på minimum 3:1 for meningsbærende grafikk.
• I Norge gjelder foreløpig ikke WCAG nivå AAA.

Mer informasjon:

• Krav til universell utforming (uutilsynet)
• Nedsatt fargesyn (Store norske leksikon)
• Måling av kontrast (WebAIM online)

Eksempel på hvordan diagram kan oppleves med nedsatt fargesyn

Vanlig fargesyn. Personer som oppfatter alle farger:

Protanopia fargeblindhet. Personer som ikke oppfatter rødfarger:

Akromatopsi fargeblindhet. Personer som kun oppfatter nyanser i grått:

Fargeskalaer

Hovedfarge: Grønnblå

600: #16535B. RGB 22,83,91  (uu)
500: #117B8C. RGB 17-123-140  (uu)
450: #1890A6. RGB 24,144,166  (uu)
400: #0CA3BC. RGB 12,163,188  (uu)
300: #5CC1D3. RGB 92,193,211  (outline: #0CA3BC)
200: #9EDAE4. RGB 158,218,228  (outline: #0CA3BC)
100: #E2F4F7. RGB 226,244,247  (outline: #0CA3BC)

 

Sekundærfarge: Gul

600: #5B5234. RGB 91,82,52  (uu)
500: #776D46. RGB 119-109-70  (uu)
400: #A39558. RGB 163,149,88  (uu)
300: #BBAA66. RGB 187,170,102  (outline: #A39558)
250: #D2C174. RGB 210,193,116  (outline: #A39558)
200: #E5DA97. RGB 229,218,151  (outline: #A39558)
150: #F4EDBF. RGB 244,237,191  (outline: #A39558)
100: #FBF9E3. RGB 251,249,227  (outline: #A39558)

 

Tertiærfarge: Sort

Alle nøytrale gråtoner kan brukes, men her er det satt opp noen eksempler (Hvis alle tallene i en RGB kode er like er fargen nøytral).

UU: Den lyseste gråtonen 200 / #F0F0F0 kan brukes som bakgrunn til liten tekst i grønnblå 600 (#16535B) og 500 (#117B8C) så vel som gul 600 (#5B5234) og 500 (#776D46).

700: #282828. RGB 40-40-40  (uu)
600: #4B4B4B. RGB 75-75-75  (uu)
500: #767676. RGB 118-118-118  (uu)
400: #949494. RGB 148-148-148  (uu)
300: #CCCCCC. RGB 204-204-204  (outline: #949494)
200: #F0F0F0. RGB 240-240-240  (outline: #949494)

Utheving av dataserie: Rød kontrast

HEX: #A50021. RGB: 165,0,33 

Fonter og tekst i informasjonsgrafikk

Følg beste fremgangsmåte for datavisualisering: La dataene og kommunikasjonsmålene for visualiseringen diktere formatet og den visuelle stilen (ikke preferanser eller "magefølelse")

Alt-teksten skal kort beskrive formålet med og hovedinformasjon for bildet. Samtidig skal den detaljerte informasjonen presenteres i form av tekst.

• • Figurtittel og tittel på grafen skal ligge over diagrammet.
  • Primærfont er Arial
  • Farge på all tekst er svart: #282828, RGB 40,40,40.
  • I forkortelser benyttes bokstaver: mrd./mill./tusen/kr (ikke kroner), % hvis del av setning. Om aksetittelen kun skal være prosent, skal dette skrives helt ut (prosent ikke %). Dette kan også brukes på X-aksen. 
  • Ved aksenotasjon i forbindelse med verdiene skal det benyttes forkortelser.
  • Noter og kilde skal ikke benytte forkortelser. Disse skal plasseres under diagrammet og være venstrestilt.
  • All tekst skal skrives horisontalt. Ved avvik skal den ikke settes vertikalt (maksimum 45 graders vinkel) og skal stå i kontekst av informasjonen som beskrives.
  • Støtt det visuelle med en kort beskrivelse av den generelle trenden som genereres av diagrammet for å gi kontekst.
  • Sørg for at dataene og variablene er tydelig merket.
  • Sørg for at det er tilstrekkelig kontrast mellom graffargene, slik at personer med fargeblindhet kan skille fargene (WCAG-krav).
  • Vurder å komplettere grafen med datagrunnlaget i en tabell, slik at den lettere kan leses av program for skjermlesere og når den er komprimert til mindre skjermflater, som mobil.

Mer informasjon:

• Gruppering av tall (Korrekturavdelingen)

Visualisering flytskjema

Flytskjema beskriver som regel en prosess, eller er en visualisering av tekst. Disse skiller seg fra diagrammer og grafer ved at de inneholder mer beskrivende informasjon og har mer tekst og mindre data.

• Flytskjema

Visualisering av diagrammer og grafer

Formålet med informasjonsgrafikk er å formidle informasjon på en visuell og effektiv måte og samtidig følge kravene for universell utforming. Det er viktig å velge den visuelle formen som passer best for dataene som skal vises.

• Diagrammer og grafer

Visualisering av Power BI

Power BI er en programvare for datavisualisering utviklet av Microsoft med hovedfokus på forretningsinnsikt. Finanstilsynet tilstreber å tilpasse grafer og diagrammer fra Power BI til Finanstilsynets visuelle profil, men her kan det forekomme avvik.

• Diagrammer i Power BI