Värit

Suomi.fi-väriteeman pääväreihin kuuluu sininen (brandBase ja highlightBase), valkoinen (whiteBase) ja harmaa (depthBase). Tekstien päävärinä käytetään mustaa (blackBase). Korosteväreinä käytetään oranssia (accentBase) ja harmaan eri sävyjä. Yleisilme on vaalean neutraali, ja väriä käytetään harkiten korostamaan keskeisiä toimintoja ja sisältöjä.

Saavutettavuus ja käytettävyys

Kun käytät komponenttien tarjoamaa valmista Suomi.fi-väriteemaa käyttöohjeistuksien mukaisesti, täyttyvät saavutettavuuskriteeristön (WCAG) kontrastivaatimukset ja väriyhdistelmät ovat saavutettavuudeltaan riittäviä.
Jos haluat muokata värejä sopimaan erilaiseen visuaaliseen ilmeeseen, muista varmistaa, että valitsemasi väriyhdistelmien kontrastit täyttävät saavutettavuuskriteeristön (WCAG) asettamat vaatimukset.
Huomioi, että saavutettavuuskriteeristön (WCAG) kontrastivaatimukset eivät koske komponentteja, joiden käyttö on estetty. On kuitenkin tärkeää varmistaa, että estetty sävy eroaa kontrastiltaan tarpeeksi aktiivisen tilan väristä.
Tutustu näihin kohtiin tarkemmin saavutettavuuskriteeristön ohjeistuksessa: WCAG 2.1., onnistumiskriteeri 1.4.3 Kontrasti (minimi).

WCAG 2.1 kontrastivaatimukset

Brändiväri

Brändiväriä (brandBase) käytetään Suomi.fi-palveluiden logossa, alatunnisteessa sekä palveluiden yläreunan värillisessä palkissa.

hsl(214, 100%, 24%)

#003479

brandBase

Tekstit

Tekstien pääväri on musta (blackBase). Mustaa käytetään myös joidenkin komponenttien yhteydessä olevissa ohjeteksteissä. Estetyissä (disabled) teksteissä käytetään vaalean harmaata (depthBase). Paikanvaraajanteksteissä käytetään tummanharmaata (depthDark2).

hsl(0, 0%, 13%)

#212121

blackBase

hsl(202, 7%, 67%)

#a5acb1

depthBase

hsl(201, 7%, 46%)

#6d787e

depthDark2

Linkit, painikkeet ja valinnat

Sinistä (highlightBase) sekä siitä johdettuja vaalempia sävyä (highlightLight) käytetään interaktiivisissa elementeissä ja valittujen elementtien korostamisessa. Violettia (accentTertiaryDark1) käytetään linkkien vierailun jälkeisessä tilassa (visited state). Estetyissä tiloissa käytetään harmaata (depthBase). Sinisestä johdettua tummempaa sävyä (highlightDark1) käytetään esimerkiksi painikkeiden hovertilassa (hover state). Sinistä korostusväriä (accentSecondary) käytetään kaikkien komponenttien fokustilassa (focus state).

hsl(212, 63%, 45%)

#2a6ebb

highlightBase

hsl(212, 63%, 49%)

#2e78cc

highlightLight1

hsl(212, 63%, 90%)

#d5e4f6

highlightLight2

hsl(212, 63%, 95%)

#eaf2fa

highlightLight3

hsl(212, 63%, 37%)

#235a9a

highlightDark1

hsl(202, 7%, 67%)

#a5acb1

depthBase

hsl(196, 77%, 44%)

#1a99c7

accentSecondary

hsl(284, 36%, 45%)

#86499c

accentTertiaryDark1

Ikonit

Kuvitusikoneissa käytetään harmaata (depthBase) sekä oranssia (accentBase) korostevärinä. Toiminnallisissa ikoneissa käytetään toiminnallisten elementtien sinistä (highlightBase) väriä sekä tummaa harmaata (depthDark1).

hsl(202, 7%, 67%)

#a5acb1

depthBase

hsl(23, 82%, 50%)

#e86717

accentBase

hsl(212, 63%, 45%)

#2a6ebb

highlightBase

hsl(202, 7%, 40%)

#5f686d

depthDark1

Taustat ja reunukset

Sivun taustaväri on vaalean harmaa (depthLight3) ja sisältöalueen tausta on valkea (whiteBase). Reunuksien väri on harmaa (depthLight1). Lisäksi käytössä on sinisestä (highlightBase) väristä johdettuja sävyjä (highlightLight4, highlightLight3 ja highlightLight2) sekä haalea vaaleansininen (depthSecondary).

hsl(0, 0%, 100%)

#fff

whiteBase

hsl(202, 7%, 97%)

#f7f7f8

depthLight3

hsl(202, 7%, 80%)

#c8cdd0

depthLight1

hsl(212, 63%, 90%)

#d5e4f6

highlightLight2

hsl(212, 63%, 95%)

#eaf2fa

highlightLight3

hsl(212, 63%, 98%)

#f7fafd

highlightLight4

hsl(215, 100%, 97%)

#f0f6ff

depthSecondary

Liikennevalovärit

Liikennevalovärit kuvaavat komponenttien, elementtien tai toimintojen tilatietoa. Vihreä (successBase) kuvaa onnistumista tai positiivista toimintoa. Keltainen (warningBase) kuvaa esim. tehtävää tai muuta asiaa, johon käyttäjän tulee reagoida. Punainen (alertBase) kuvaa virhetilaa tai häiriötä. Pelkkä väri ei riitä tiedon tai toiminnallisuuksien esittämiseen vaan tieto pitää esittää myös sanallisesti.

hsl(166, 90%, 34%)

#09a580

successBase

hsl(166, 54%, 80%)

#b0e8db

successSecondary

hsl(42, 93%, 50%)

#f6af09

warningBase

hsl(3, 59%, 43%)

#ae332d

alertBase

hsl(0, 59%, 96%)

#fbefef

alertLight1

Korostevärit

Korostevärejä käytetään tilanteissa, joissa väriä tarvitaan luomaan eroavaisuutta muista elementeistä.

hsl(23, 82%, 50%)

#e86717

accentBase

hsl(196, 77%, 44%)

#1a99c7

accentSecondary

hsl(196, 77%, 97%)

#f1fafd

accentSecondaryLight1

hsl(284, 36%, 53%)

#9b5cb2

accentTertiary