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 |
red-light | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
red | Ikke leselig | Ikke leselig |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
white | Ikke leselig | Ikke leselig |
yellow-50 | Ikke leselig | Ikke leselig |
| 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 |
---|
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 |
green-dark | AAA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
red | Ikke leselig | Ikke leselig |
green-dark | AAA | AAA |
| 16px | 24px |
---|
blue-dark | AAA | AAA |
red | Ikke leselig | Ikke leselig |
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 | 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 |
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 |