Värit

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

Väripaletti

Käytämme kaikessa viestinnässä ja markkinoinnissa Työtiksen sinistä, 50% turkoosia, 20 % turkoosia ja valkoista sekä vadelmaa piristävänä aksenttivärinä.

Sinisen ja turkoosin lisäksi käytämme paljon valkoista tilaa ja valkoista tekstiä sinistä taustaa vasten. 50 % turkoosi toimii tukivärinä.

Sininen

#003C78
R 0, B 60, G 120
C 100, M 60, Y 0, K 40

Turkoosi 20 %

#CCEFF4
R 204, G 239, B 244
C 18, M 0, Y 4, K 0

Turkoosi 50 %

#7FD7E4
R 127, G 215, B 228
C 45, M 0, Y 12, K0

Turkoosi 100 %

#00A3BD
R 0, G 163, B 189
C 77, M 16, Y 21, K 0

Vadelma

#FF5C5C
R 255, G 92, B 92
C 0, M 79, Y 57, K 0

Valkoinen

#FFFFFF

Värien saavutettavuus

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 8.98

Turkoosi 20 % #CCEFF4
Sininen #003C78

 

Kontrastiarvo 6.64

Turkoosi 50 % #7FD7E4
Sininen #003C78

Kontrastiarvo 3.01

Turkoosi 100 % #00A3bD
Sininen #003C78

Kontrastiarvo 3.02

Vadelma #FF5C5C
Valkoinen #FFFFFF

Kontrastiarvo 10.95

Sininen #003C78
Valkoinen #FFFFFF

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 3.01:1. Siksi emme käytä turkoosia tekstiä 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 20- 50 % turkoosia ja  50 % turkoosilla taustalla sinistä, ei mustaa. 

Kuvaajien väritys

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.