Informasjonsgrafikk

Publisert: 1. januar 2023
Sist endret: 19. januar 2023

Formålet med informasjonsgrafikk er å formidle informasjon på en forståelig og effektiv måte, samtidig som det bryter opp en lang tekst med et grafisk element. All informasjonsgrafikk skal følge kravene for universell utforming. Vi deler opp informasjonsgrafikk i flytskjemaer og diagrammer/grafer.

Bilde av eksempler på diagramstil i Finanstilsynet.

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:

Eksempel på hvordan diagram kan oppleves med nedsatt fargesyn

Vanlig fargesyn. Personer som oppfatter alle farger:

Eksempel på diagram - personer som oppfatter alle farger

Protanopia fargeblindhet. Personer som ikke oppfatter rødfarger:

Eksempel på Protaniposk fargesyn - personer som ikke oppfatter rødt

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

Eksempel på Akromatomisk fargesyn-personer som kun oppfatter gråtoner

Fargeskalaer

Fargeskalaen er basert på Finanstilsynets fargepalett for nettsiden. Det er benyttet tre farger som beskrives med toneverdiskala.

Bildet viser tre farger til bruk på informasjonsgrafikk. Linjen viser skillet mellom kontrastkrav i skalaene. Dersom det benyttes toner som ikke tilfredsstiller kravene, anbefales det å bruke en linje rundt sektoren som tilfredsstiller kravene.

Fargepalett for informajonsgrafikk

Hovedfarge: Turkis

  1. #E2F4F7. RGB 226,244,247 (outline: #0CA3BC)
  2. #9EDAE4. RGB 158,218,228 (outline: #0CA3BC)
  3. #5CC1D3. RGB 92,193,211 (outline: #0CA3BC)
  4. #3FB5CA. RGB 63,151,202 (outline: #0CA3BC)
  5. #0CA3BC. RGB 12,163,188 (uu)
  6. #1890A6. RGB 24,144,166 (uu)
  7. #10707F. RGB 16,112,127 (uu)
  8. #16535B. RGB 22,83,91 (uu)

Sekundærfarge: Gul

  1. #FBF9E3. RGB 251,249,227 (outline: #A3955)
  2. #F4EDBF. RGB 244,237,191 (outline: #A3955)
  3. #E5DA97. RGB 229,218,151 (outline: #A3955)
  4. #D2C174. RGB 210,193,116 (outline: #A3955)
  5. #BBAA66. RGB 187,170,102  (outline: #A3955)
  6. #A39558. RGB 163,149,88 (uu)
  7. #918655. RGB 145,134,85 (uu)
  8. #5B5234. RGB 91,82,52 (uu)

Tertiærfarge: Sort

  1. #FFFFFF. RGB 255,255,255 (outline: #939393)
  2. #F0F0F0. RGB 240,240,240 (outline: #939393)
  3. #E6E6E6. RGB 230,230,230 (outline: #939393)
  4. #DFDFDF. RGB 223,223,223 (outline: #939393)
  5. #D2D2D2. RGB 210.210.210 (outline: #939393)
  6. #939393. RGB 147,147,147 (uu)
  7. #282828. RGB 40,40,40 (uu)

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 Open Sans, alternativ erstatningsfont er Arial. Fontstørrelse på tall, tegnforklaringer, noter og kilde bør ikke være mindre enn 14px/0,875em/11pt.
    • 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:

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.

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.

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.

Abonner på nyhetsvarsel