Värit

Työterveyslaitoksen pääväri on tunnuksemme sininen, jota käytämme aina yhdessä toisen päävärimme 60 % turkoosin kanssa. Lisäksi käytämme paljon valkoista. Yhdessä sovelluksessa ei koskaan voi olla vain sinistä ja valkoista ilman turkoosia.

Väripaletit

Käytämme kaikessa viestinnässä ja markkinoinnissa ensisijaisesti Työtiksen sinistä, 60% turkoosia ja valkoista.  

Isoissa, strategisesti priorisoiduissa kampanjoissa ja laajoissa kokonaisuuksissa, joissa on tarve erottua Työterveyslaitoksen ydinviestinnästä ja -markkinoinnista, käytämme lisäväripaletteja. Kokonaisuudessa voi käyttää vain yhtä palettia, eikä paletteja voi yhdistellä.

Myös lisäväripaleteissa on päävärejä ja tukivärejä, joiden keskinäinen painoarvoero tulee näkyä toteutuksessa. Näissäkin lisäväripaleteissa yhdistävä tekijä on Työtiksen tummansininen. Sininen lanka, joka auttaa sitomaan eri toteutukset yhtenäiseksi kokonaisuudeksi Työterveyslaitoksen sateenvarjon alle.

Värien saavutettavuus

Alla on eritelty väripalettiemme saavutettavat väriyhdistelmät. Tekstissä, jos värien kontrastiarvo on 3-4.5 täytyy tekstin olla suurikokoista tai lihavoitua. Huomaa, että turkoosin ja valkoisen yhdistelmä on kielletty tekstissä ja tietoa välittävässä grafiikassa.

Kontrastiarvo 10.95

Sininen #003C78
Valkoinen #FFFFFF

Kontrastiarvo 6.08

Turkoosi 60 % #66D0DF
Sininen #003C78

Kontrastiarvo 4.20

Turkoosi #00B0CA
Sininen #003C78

Kontrastiarvo 8.82

Keltainen #FFEA00
Sininen #003C78

Kontrastiarvo 4.42

Pinkki #E61E69
Valkoinen #FFFFFF

Kontrastiarvo 11.87

Violetti #640A64
Valkoinen #FFFFFF

Kontrastiarvo 5.51

Vihreä #96C800
Sininen #003C78

Kontrastiarvo 3.47

Oranssi #FF5800
Sininen #003C78

Kontrastiarvo 5.76

Pinkki 40 % #FAA5C3
Sininen #003C78

Laki digitaalisten palveluiden tarjoamisesta (306/2019) velvoittaa Työterveyslaitosta noudattamaan WCAG 2.1 -ohjeistuksen A- ja AA-tason mukaista saavutettavuutta. Noudatamme tätä kaikissa digitaalisissa palveluissamme ja aineistoissamme.

AA-tasolla normaalikokoisen tekstin (≤18 pt/24 px tai lihavoituna ≤14 pt/19 px) ja taustan kontrastiero tulee olla vähintään 4.5:1. Isokokoisessa tekstissä (≥18 pt/24 px) tai lihavoidussa tekstissä (≥14 pt/19 px) kontrasti on vähintään 3:1. Sama kontrastisuhde tulee olla myös olennaista informaatiota sisältävässä grafiikassa ja kuvakkeissa. 

Turkoosin ja valkoisen yhdistelmä on kielletty. Turkoosin ja valkoisen kontrastiero on 2.6:1. Siksi emme käytä turkoosia tekstiä, grafiikkaa tai kuvakkeita valkoisella taustalla, tai valkoisia tietoa välittävää grafiikkaa tai tekstiä turkoosilla pohjalla. 

Kontrasti on hyvä tarkistaa siihen tarkoitetulla työkalulla, joita löytyy verkosta useita erilaisia (esimerkiksi tämä englanninkielinen WebAIM:in selainpohjainen ja maksuton työkalu).

Tekstin väri

Otsikoiden, väliotsikoiden ja korostusten väri valkoisella taustalla on joko Työtiksen sininen tai musta. Linkkivärimme valkoisella taustalla on sininen.

Sinisellä taustalla teksti voi olla valkoista tai 60 % turkoosia ja turkoosilla taustalla sinistä, ei mustaa. 

Kuvaajien väritys

Olemme luoneet muutaman tummemman lisäsävyn valikoiduista brändiväreistämme käytettäväksi kuvaajissa. Tutustu tarkemmin tiedon visualisoinnin väriohjeisiin sivulla Tiedon visualisointi.

Piirroskuvien väritys

Piirroskuvissa ei ole välttämätöntä pitäytyä ainoastaan Työtiksen brändiväreissä ja niiden eri sävyissä, mutta kokonaisuuden on perustuttava pääasiassa meidän väreihimme ja toteutuksen on istuttava raikkaaseen, kirkkaaseen ja iloiseen värimaailmaamme.