Käytämme tiedonvisualisoinneissa Työterveyslaitoksen värejä, typografiaa ja kuvitustyyliä. Aina brändivärit eivät kuitenkaan riitä tiedon visualisoinnin tarpeisiin, joten olemme luoneet infografiikkaa varten lisävärejä, joiden käyttö on sallittu vain infografiikassa, eli kuvaajissa ja kaavioissa. Muista että infografiikan tulee täyttää saavutettavuusvaatimukset. Lue suunnitteluperiaatteistamme ja perehdy tarkempiin ohjeisiin alla.
Käytä yhtenäistä asteikkoa ja varmista tiedon vertailtavuus.
Pyri yksinkertaiseen tiedon esitystapaan ja jätä pois epäoleellinen informaatio.
Jaa monimutkainen kuvio useammaksi yksinkertaiseksi kuvioksi. Yksi viesti/oivallus kuviota kohden riittää.
Käytä kaksiulotteista tyyliä.
Varmista, että kirjainten ja taustan välillä on selvä tummuusero. Varmista myös, että kirjaimen paksuus on riittävä etenkin kun käytät vaaleaa tekstiä tummalla taustalla.
Käytä mieluummin tummuusasteeltaan toisistaan tarpeeksi erottuvia yhden värin sävyjä kuin montaa eri väriä.
Käytä hieman suurempia kirjaimia ja graafisia elementtejä kuin itsestäsi tuntuisi riittävältä.
Varmista, että katseen etenemissuunta on selvä. Olemme tottuneet lukemaan vasemmalta oikealle, ylhäältä alas.
Ryhmittele tieto sen merkityksen ja yhteyksien mukaan. Huolehdi, että hierarkia ja rajat erottuvat selkeästi. Anna sopiva määrä tietoa oikeassa paikassa oikeaan aikaan.
Varmista, että korostetut kohteet ovat selvästi huomattavissa ja tarvittaessa yhdenmukaisia.
Varmista, että korostat oikeita asioita.
Käytä sovellukseen sopivaa ja käyttäjille tuttua tiedon esitystapaa.
Varmista, että graafi täyttää saavutettavuusvaatimukset
Väri ei saa olla ainoa visuaalinen tekijä, joka välittää informaatiota tai erottaa elementtejä toisistaan, joten käytä reunaviivoja ja arvopisteiden otsikoita.
Käytä ainoastaan saavutettavia väriyhdistelmiä.
Käytä pääasiassa turkoosia monokromaattista sävyasteikkoa kuvaajissa, kaavioissa ja taulukoissa.
Lisävärejä ja sävyjä poimitaan ensisijaisesti sinisestä ja harmaasta asteikosta. Voit myös käyttää infografiikkaa varten tehtyjä lisäsävyjä (ks. kuva yllä)
Varmista, että sävyt erottuvat toisistaan riittävästi; vaaleammissa sävyissä 40 % ero on suositeltava, tummemmissa riittää 20 %.
Lisää reunaviivat värikenttiin ja pylväisiin.
Viivakuvaajissa on käytettävä toisistaan eroavia arvopistemarkkereita. Erilaiset viivatyypit voivat myös auttaa saavutettavuudessa.
Älä käytä kuoseja kentissä ja pylväissä.
Käytä saavutettavia väriyhdistelmiä tekstissä ja tietoa välittävässä grafiikassa.
Käytä kirjainperheitä Source Sans Pro (leikkaukset regular, semibold, bold tai black) tai Segoe UI (regular, semibold, bold ja black) Officen ohjelmissa.
Tekstiä voi korostaa lihavoimalla. Älä käytä kursiivia korostuskeinona tai kokonaisissa kappaleissa.
Käytä painikkeissa ja CTA-elementeissä VERSAALEJA ja harvaa kirjainvälistystä (parivälistysarvo 50–100).
Linkin korostus leipätekstissä on alleviivaus ja linkin väri valkoisella pohjalla on sininen (#003c78).
Käytä saavutettavia väriyhdistelmiä tekstissä ja tietoa välittävässä grafiikassa.
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) kontrastin täytyy olla vähintään 3:1
Kaikki grafiikka, jota ei voi lukea pelkäksi koristeeksi täytyy esittää saavutettavassa muodossa (ml. painikkeet ja kuvakkeet)
Toimintaa ohjaavissa graafisissa elementeissä kontrastin on oltava vähintään 4.5. Suurikokoisissa elementeissä riitttää kontrastiarvo 3–4.5.
Linkkinä toimivan kuvakkeen yhteydessä tai kuvakkeessa tulee olla teksti, joka kertoo linkin kohteen.
