Fargebruk
Oslo kommune har en fargepalett som er inspirert av Oslos bybilde; blått fra trikken og fjorden, grønt fra våre grønne lunger og marka. De varme fargene er inspirert av fasader på byens bygninger.
Samlet sammensetning av fargene bør stemme overens med merkevarefargen som er valgt som hovedfarge til applikasjonen/domenet.
Nyansefarger bør brukes på en måte som komplimenterer brandfargene.
Kontrast
Hver farge i paletten er merket med bokstavene AA eller AAA for å indikere tilgjengeligheten på bakgrunnsfargen. Andre tekstfarger bør testes for kontrast ved å bruke en online kontrastkontroll for å sikre at den oppfyller WCAG AA-krav for tilgjengelighet.
Tilgjengelighet for fargeblinde
Det er en god idé å teste fargene du planlegger å bruke med en fargeblindesimuleringsapp, for eksempel Color Oracle. Du kan bruke simuleringen til å justere fargekombinasjonene for å være tilgjengelige.
Merkevarefarger
| 16px | 24px |
---|
blue-light | AAA | AAA |
white | AAA | AAA |
black | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
black | AAA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
black | AAA | AAA |
| 16px | 24px |
---|
green-light | AAA | AAA |
white | AAA | AAA |
blue-dark | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
green-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue-dark | AAA | AAA |
| 16px | 24px |
---|
green-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue-dark | AAA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
error | Ikke leselig | AA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
error | AA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
warning | AA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
gray-dark | AAA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
beige-dark | Ikke leselig | Ikke leselig |
Nyansefarger
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
green-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue-dark | AAA | AAA |
| 16px | 24px |
---|
green-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue-dark | AAA | AAA |
| 16px | 24px |
---|
green-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue-dark | AAA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
red | Ikke leselig | Ikke leselig |
error | AAA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
red | Ikke leselig | Ikke leselig |
error | AA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
warning | AAA | AAA |
yellow | Ikke leselig | Ikke leselig |
Tilstandsfarger
| 16px | 24px |
---|
blue-light | AAA | AAA |
blue | AA | AAA |
white | AAA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
blue | Ikke leselig | Ikke leselig |
white | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | Ikke leselig | Ikke leselig |
white | AA | AA |
blue-light | Ikke leselig | AA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
black | AAA | AAA |
| 16px | 24px |
---|
disabled-light | AAA | AAA |
white | AAA | AAA |
blue-dark | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
disabled | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue-dark | AAA | AAA |
Systemfarger
I noen tilfeller setter vi sammen farger fra den øvrige fargepaletten til å for eksempel lage systemmeldinger, og korreksjonstekst under inputfelt. Til feilmeldinger har vi en egen farge til den spesifikke konteksten. Se nedenfor.
Bruk blue-dark som tekstfarge. Nedenfor ser du hvordan den validerer på hvit bakgrunn. Bruk blue-dark-5 som bakgrunnsfarge.
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue | Ikke leselig | Ikke leselig |
Suksess
Bruk green-dark som tekstfarge. Nedenfor ser du hvordan den validerer på hvit bakgrunn. Bruk green-dark-5 som bakgrunnsfarge.
| 16px | 24px |
---|
green-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
black | AAA | AAA |
Advarsel
Bruk warning som tekstfarge. Nedenfor ser du hvordan den validerer på hvit bakgrunn. Bruk yellow-5 som bakgrunnsfarge.
| 16px | 24px |
---|
warning | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue-dark | AAA | AAA |
Feil
Bruk error som tekstfarge. Nedenfor ser du hvordan den validerer på hvit bakgrunn. Bruk red-5 som bakgrunnsfarge.
| 16px | 24px |
---|
error | AAA | AAA |
white | Ikke leselig | Ikke leselig |
blue-dark | AAA | AAA |
Nøytrale farger
Gråskala digital
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
disabled | AAA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
disabled | AAA | AAA |
| 16px | 24px |
---|
blue-dark | Ikke leselig | Ikke leselig |
white | AAA | AAA |
gray-light | AAA | AAA |
Gråskala
| 16px | 24px |
---|
blue-dark | AAA | AAA |
black | AAA | AAA |
green-dark | AAA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
gray-light | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
gray-light | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | AA | AAA |
white | Ikke leselig | Ikke leselig |
gray-light | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | AA | AAA |
white | Ikke leselig | Ikke leselig |
gray-light | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | Ikke leselig | AA |
white | Ikke leselig | AA |
gray-light | Ikke leselig | AA |
| 16px | 24px |
---|
blue-dark | Ikke leselig | Ikke leselig |
white | AA | AAA |
gray-light | AA | AAA |
| 16px | 24px |
---|
blue-dark | Ikke leselig | Ikke leselig |
white | AAA | AAA |
gray-light | AAA | AAA |
| 16px | 24px |
---|
blue | AAA | AAA |
white | AAA | AAA |
gray-light | AAA | AAA |
| 16px | 24px |
---|
blue | AAA | AAA |
white | AAA | AAA |
gray-light | AAA | AAA |
| 16px | 24px |
---|
blue | AAA | AAA |
white | AAA | AAA |
gray-light | AAA | AAA |