Fargepaletter for datavisualisering
Hvordan jobbe med farger i datavisualisering?
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.
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.
Ved bruk av Light palett
Vær oppmerksom ved bruk av lysere farger. Legg til en border for å sikre kontrastkrav.
Linjegrafer
Pass på at strekene får sterk nok farge. Linjer trenger ekstra god kontrast til bakgrunnen.
Ekstra luft
Luft mellom fargene gir bedre lesbarhet.
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.
Bidragsytere