Fargene har utgangspunkt i Udirs identitetsfarger, men de er skarpere og har større kontrast. God nok kontrast mellom fargene er nødvendig, men ikke tilstrekkelig for å ivareta universell utforming. Les mer om universell utforming av diagrammer hos Tilsynet for universell utforming av ikt.
Farger for hvit bakgrunn
For å ivareta Udirs visuelle uttrykk er det satt opp en rekkefølge for hvordan fargene skal brukes. De fleste diagrammer bruker få farger. Rekkefølgen på fargen vil da gjøre at farge 1 og 2 blir brukt mest, mens farge 7 og 8 blir brukt minst. Rekkefølgen på fargene er også satt opp for å skape god kontrast mellom farger som står ved siden av hverandre. Fargene skal brukes på hvit bakgrunn for å ivareta universell utforming. Fargenavnet viser rekkefølgen fargene skal brukes i.
Oversikt over koder:
- Farge 1: (AA 3.03:19), HEX: #5BA27E
- Farge 2: (AA 4.24:1), HEX: #6C7C94
- Farge 3 (AA 3.1:1), HEX: #BB893E
- Farge 4 (AAA 12.26:1), HEX: #353535
- Farge 5 (AA 3.02:1), HEX: #30A1BB
- Farge 6 (AAA 7.52:1), HEX: #255F41
- Farge 7 (AAA 5.1:1), HEX: #9D5F32
- Farge 8 (AA 3.03:1), HEX: #949494
Fargepalett for mørk modus
I mange nettlesere kan brukerne velge å skru på mørk modus slik at bakgrunnen på de digitale flatene blir sort. Vi har derfor utviklet en fargepallett som skal brukes for diagrammer når brukerne har satt på mørk modus i nettleseren.
Udirs primære bakgrunnsfarger er lyse, og mørk bakgrunn brukes ikke i andre tilfeller enn der brukerne selv skrur det på.
- Farge 1: #76C69D
- Farge 2: #BED5E8
- Farge 3: #BD965E
- Farge 4: #F9F9F9
- Farge 5: #5DB6CB
- Farge 6: #D2EBDE
- Farge 7: #B36234
- Farge 8: #C4C4C4
Stolpediagram
Rekkefølgen på fargene er den samme uavhengig av om stolpediagrammet er stående, liggende eller stablet.
Under ser du eksempel på stolpediagram med to kategorier og da bruker vi farge 1 og farge 2 fra diagrampaletten.
Under ser du eksempel på stablet stolpediagram. Det har fem kategorier og derfor er det brukt farge 1 til farge 5 i den faste rekkefølgen for diagramfarger:
Kakediagram
Under ser du eksempel på kakediagram. Å bruke hjelpestreker mellom forklaring og farge gjør det enklere å oppfatte enn om forklaring kun står ved fargebokser. Rekkefølgen på fargene følger den faste rekkefølgen for diagrammer.
Linjediagram
Under ser du eksempel på linjediagram med tre linjer og da bruker vi farge 1 til farge 3 fra diagrampaletten. Geometriske figurer knyttet til linjene gjør det enklere å oppfatte enn å bare ha farger.
Diagram med midtpunkt
Tall som er større eller mindre enn et midtpunkt kan bruke grønn og blå som hvert sitt ytterpunkt og grå som nøytral farge mellom dem. Både grønn og blå brukes i en lys og en mørk nyanse. Den mørkeste nyansen brukes lengst fra midtpunktet.
Fargekodene er:
- Mørkeste grønn: #1E422F
- Lyseste grønn: #5BA27E
- Grå i midten: #DEDEDE
- Lyseste blå: #6C7C94
- Mørkeste blå: #2E3C51
Mengde og rekkefølge på fargene
Der rekkefølgen på kategoriene i diagrammet er likegyldig, velg vi kategorien med størst mengde til farge 1, nest størst til farge 2, osv. Grunnen til dette er at vi ønsker mest bruk av de første fargene i profilen. Under ser du et slikt diagram:
Hensynet til å ha mest av de første fargene i palletten, er underordnet regelen om rekkefølgen på fargene. For kategorier som allerede har en naturlig rekkefølge, så følger vi denne. Et eksempel på dette er kvartaler i et år. Kvartalene har allerede en naturlig rekkefølge. Fargene bruker fortsatt fast rekkefølge uavhengig av hvor stor mengde det blir av hver farge.
