Fargepalettene for datavisualisering er designet for tilgjengelighet og god visuell brukeropplevelse. Fargene er valgt ut fra NAVs globale fargepalett, og skal dekke ulike behov vi har for å vise data. Det kan være alt fra komplekse visualiseringer og dashboards til enkle standard grafer.
I WCAG 2.1 kreves det et kontrastforhold på minimum 3:1. Det er også viktig at farge ikke er den eneste måten å formidle informasjon på.
Litt om fargeblindhet
Fargeblindhet er vanlig. Omtrent åtte prosent av alle menn og knapt én prosent av alle kvinner har mangelfullt fargesyn. Det finnes mange typer og grader av fargeblindhet, men det er få som ikke kan se farger i det hele tatt (akromatopsi). De vanligste formene for fargeblindhet er:
Rødblindhet (protanopi)
Grønnblindhet (deuteranopi)
Blåblindhet (tritanopi)
Både rød- og grønnblinde har vanskelig for å skille mellom røde, oransje, gule og gulgrønne farger. Derfor brukes ofte begrepet rødgrønn fargeblindhet. Blåblindhet (tritanopi), er mer sjelden.
Palettene er testet og skal fungere bra for mennesker med de vanligste formene for fargeblindhet.
Harmonisk palett
I datavisualiseringer må fargene ha tilstrekkelig kontrast seg imellom. Fargepaletten bør samtidig være harmonisk og balansert. Det skal være lett og behagelig å konsumere innholdet. I situasjoner der mange grafer vises samtidig kan det for eksempel være lurt å unngå de mørkeste fargetonene. Komplimentære farger og kombinasjon av varme og kalde toner gir gode kontraster. I stedet for å bruke hele fargespekteret kan “nabofarger” eller variasjoner av metning og lys kan være det som gir god harmoni. Sterke neonfarger kan virke slitsomt å se på.
Tre fargepaletter
For å møte de ulike behovene i NAV har vi designet tre paletter. Default-paletten inneholder farger som alle dekker kontrastkrav 3:1. Light-paletten inneholder lysere farger. Kombinasjonspaletten inneholder en kombinasjon av Default- og Light-palett. Ved å følge rekkefølgen på fargene gjør at man oppnår god kontrast til "nabo-fargen".
Default-palett
Navn
Hex
Blue-400
#3386E0
Deepblue-500
#005B82
Orange-600
#C77300
Lightblue-700
#368DA8
Green-400
#33AA5F
Purple-400
#8269A2
Light-palett
Navn
Hex
Blue-100
#CCE1FF
Deepblue-200
#99C4DD
Orange-300
#FFC166
Lightblue-500
#66CBEC
Green-200
#99DEAD
Purple-200
#C0B2D2
Eksempler på kombinasjoner Oversikten viser fargekombinasjoner som er harmoniske og har god kontrast.
Tips
Det er viktig å være konsistent med farger når det er flere diagrammer i samme visning. Hvis en farge brukes til å representere noe i ett diagram, bør alle andre diagrammer gjengi dette forholdet.
God praksis for fargebruk
Bruk av én farge Bruk én farge for å definere en enkelt verdi på en konsekvent måte. Hvis du for eksempel bruker blått for å representere antall utbetalinger i ett diagram, bruker du det til å representere den verdien i alle andre diagrammer.
Do: Bruk kun én farge for en enkelt verdi.
Don't: Unngå bruk av dekorative farger
Ved bruk av Light palett Vær oppmerksom ved bruk av lysere farger. Legg til en border for å sikre kontrastkrav.
Do: Bruk av mørkere border sikrer kontrastkravene.
Linjegrafer Pass på at strekene får sterk nok farge. Linjer trenger ekstra god kontrast til bakgrunnen.
Do: Linjegraf trenger ekstra god kontrast. Bruk Default-paletten.
Don't: Vær oppmerksom på lysere farger, og tilstrekkelig med kontrast til bakgrunnen.
Ekstra luft Luft mellom fargene gir bedre lesbarhet.
Do: Bedre lesbarehet med luft
Don't: Unngå å sette fargene helt inntil hverandre.
Verktøy for datavisualisering
Highcharts Vi har ikke egen-utviklede komponenter for datavisualisering i Aksel. Vi anbefaler å sjekke ut Highcharts som har god støtte for universell utforming, interaktivitet og responsivitet med støtte for berøring (touch).
Plugin Figma
Color Blind er en plugin i Figma som lar deg teste designet ditt for de vanligste typer av fargeblindhet.
