1177 Vårdguidens varumärkesmanual är den prioriterade källan och är alltid vad vi utgår från i första hand när det gäller korrekt information om färger och färgkoder.
Exempel
Designspecifikation
1177 Vårdguidens färgpalett består av en röd primärfärg (main), sekundärfärgerna mörkröd (secondary-dark) och ljusrosa (secondary-light) och ett antal komplementfärger där blå (sky-base, sky-dark samt sky-background) är det vi främst använder.
Ljusgrå är även en sekundärfärg i varumärkesmanualen, men används inte i stor omfattning på webben.
På webben använder vi alltså i huvudsak röd och blå färgskala.
När ska jag använda röd eller blå färg?
Röd färg används i varumärkesbyggande illustrationer och ikoner samt i huvudnavigering.
Blå färg används för övrig navigering och CTA-element: På sidan-navigering, knappar, länkar samt ikoner vid knappar och länkar.
Navigationsbrickor (finns på sektions-/samlingssidor) kan ha röd eller blå färg beroende på användning:
För navigering till artikelsidor och med syfte att informera och inspirera används röd färgskala.
För navigering som används till verktyg används blå färgskala.
Se även tidigare avsnittet 1177 Vårdguiden där uppdelningen av tjänster inom varumärket 1177 Vårdguiden förklaras samt hur detta påverkar den grafiska gestaltningen.
Färger för statusmarkering
För att signalera en viss status kan olika färger användas, gärna i kombination med en ikon.
Gul = neutral/information
Röd = varning
Grön = ok/avklarat
Andra färger
Komplementfärger, förutom blå samt gul för meddelanden, används i övrigt mycket begränsat och rekommenderas att endast användas när det finns ett starkt specifikt behov.
Läs mer om färgpaletten i 1177 Vårdguidens varumärkesmanual.
Do’s and Don’ts
Se 1177 Vårdguidens varumärkesmanual.
Tillgänglighet
Samtliga färger i varumärkesmanualen är framtagna för att passa både tryck och digitalt bruk. Kontrastvärdena ska uppfylla kraven för WCAG 2.1, AA.
Var noga med att kontrollera kontrastvärdena både för text mot bakgrund respektive komponenter och informationsbärande grafik. Se riktlinjer:
https://webbriktlinjer.se/riktlinjer/126-tillrackliga-kontraster/
https://webbriktlinjer.se/riktlinjer/156-anvand-tillrackliga-kontraster-i-komponenter-och-grafik/
Obs! I varumärkesmanualen nämns det att “Samtliga färger är säkrade för tryck och digitalt bruk och uppfyller kraven för WCAG 2.0, AA.” Här bör tilläggas att det gäller nyans mörk av samtliga färger mot vit bakgrund, samt nyans bas för röd, blå, plommon och grå mot vit bakgrund. Kontrollera alltid kontrastvärdena själv mot den bakgrund som används.
Research på komponenten
Färgpaletten har tagits fram av One day interact på uppdrag av Diana Block och har i samband med detta tillgänglighetsanpassats/testats för att passa på webben (gäller huvudfärgerna).
Relaterade resurser/komponenter
Status
Status | FÄRDIG VALIDERAD |
|---|---|
Publicerad | 2020-01-18 |
Senast uppdaterad | 2020-01-20 |