Tällä sivulla
Väripalettien lajit
Visualisoinneissa käytetyt väripaletit voidaan jakaa kategorioihin kuulumista ja muuta laadullista tietoa kuvaaviin laadullisiin paletteihin sekä numeroita kuvaaviin määrällisiin paletteihin.
Väriarvot taulukkona
Alta löytyvien valmiiden visualisointien väripalettien väriarvot voi kopioida oheisesta Excel-taulukosta(Linkki johtaa ulkoiseen palveluun).
Palettien suunnitteluperiaatteet
Myös muiden palettien käyttö visualisoinneissa on sallittu, kunhan ne ovat Helsingin kaupungin ilmeen ja saavutettavuusvaatimusten mukaisia, ja valitut värit erottuvat toisistaan riittävän hyvin. Laadullisessa paleteissa pyrkimyksenä on valita värit, jotka erottuvat toisistaan hyvin, mutta vaikuttavat visuaaliselta painoarvoltaan suunnilleen samanarvoisilta, ellei sitten tarkoituksena ole erityisesti korostaa tiettyjä kohteita voimakkaammalla värillä.
Määrällisissä paletetissa pyrkimyksenä on rakentaa paletit niin, että yhtä suuri harppaus värin tummuudessa merkitsee aina likimain yhtä suurta muutosta numeroarvossa. Tämä ohjeisto sisältää joukon kaupungin brändivärien pohjalta rakennettuja laadullisia ja määrällisiä väripaletteja, jotka huomioivat saavutettavuuskysymykset. Saavutettavuussyistä värien kanssa käytetään yleensä reunaviivoja. Myös muiden väriyhdistelmien käyttö on sallittu, kunhan ne ovat kaupungin brändi-ilmeen(Linkki johtaa ulkoiseen palveluun) mukaisia ja huomioivat tummuuskontrastille asetetut minimivaatimukset ja muut saavutettavuustekijät, joita käsitellään lähemmin alla.
Värien saavutettavuus
Värinäön poikkeamat ja synnynnäisesti tai ikääntymisen myötä tarkkuudeltaan heikentynyt näkö vaikeuttavat värien erottamista toisistaan. Lisäksi käytetyt esityslaitteet – varsinkin projektorit – ja muut käyttötilanteeseen liittyvät tekijät kuten voimakkaat heijastukset voivat vääristää havaittuja värejä. Koska väri näyttelee yleensä suurta roolia visualisoinneissa, on erityisen tärkeää, että värihavainnon keskeiset saavutettavuustekijät on huomioitu esityksessä käytettäviä värejä valittaessa.
Tummuuskontrasti
Digipalvelulaki(Linkki johtaa ulkoiseen palveluun) edellyttää verkossa pysyvästi julkaistavien sisältöjen yltävän vähintään WCAG 2.1 -saavutettavuusohjeen AA-tasolle. Värinkäytön osalta AA-tason saavuttaminen vaatii, että viereikkäisten väripintojen tulee yltää vähintään seuraaviin tummuuskontrastisuhteisiin:
- Tekstin ja sen taustavärin kontrasti vähintään 4,5:1
- Isokokoisen tekstin (normaali teksti 18 pistettä, lihavoitu teksti 14 pistettä) ja sen taustavärin kontrasti vähintään 3:1
- Muiden sisällöllisten elementtien ja niiden taustan tai viereisten elementtien kontrasti vähintään 3:1
- Ns. oheissisällölle, kuten puhtaasti koristeellisille elementeille ei ole minimikontrastivaatimusta
Kahden värin välisen tummuuskontrastin voi selvittää kontrastilaskurilla(Linkki johtaa ulkoiseen palveluun). Se on yleensä verkossa toimiva tietokoneohjelma, jolle annetaan kaksi väriä (tavallisesti ns. hex-muodossa, esim. #0072C6) ja ohjelma kertoo niiden välisen kontrastisuhteen. Käytetty algoritmi palauttaa saman kontrastiarvon riippumatta siitä kumpi on nimellisesti tausta- ja kumpi sisältöväri. (On syytä huomioida, että kontrastisuhteen laskemiseen käytetty algoritmi antaa epärealistisen hyviä arvoja silloin kun toinen väreistä on musta. Niinpä esimerkiksi musta teksti tummalla pohjalla voi saada laskennallisesti hyvän kontrastiarvon, vaikka tosiasiassa tekstiä on vaikea lukea.) Värin ja sen viereisten värien välistä kontrastia voidaan parantaa ääriviivan avulla, kuten seuraavat esimerkit osoittavat. Yleensä on suotavaa käyttää ääriviivan värinä tummempaa sävyä täyttöväristä.
Värinäön poikkeamat (“värisokeus”)
Perinnölliset värinäön poikkeamat – puhekielellä “värisokeus” – vaivaavat n. 8 prosenttia miehistä ja 0,5 prosenttia naisista. Tavallisimpia ovat eriasteiset vaikeudet punaisen ja vihreän sävyjen erottamisessa toisistaan. Värinäkö heikkenee ikääntymisen myötä myös niillä, joilla ei ole perinnöllisiä värinäön puutteita. Digipalvelulain edellyttämä WCAG 2.1 -saavutettavuusohje ei käsittele värinäön poikkeamia kuin epäsuorasti, mutta ne on silti syytä huomioida saavutettavia väripaletteja suunniteltaessa.
Helsingin kaupungin tunnusvärit(Linkki johtaa ulkoiseen palveluun) ja simulaatio siitä, miltä ne näyttävät sellaisen henkilön silmissä, jolla on kaikkein yleisin, deuteranopia-tyyppinen värinäön poikkeama. Jotkin tunnusväreistä ovat tällaiselle katsojalle lähes mahdottomia erottaa toisistaan.
Tässä oppaassa määritellyt laadulliset ja määrälliset väripaletit on suunniteltu huomioiden yleisimmät värinäön poikkeamat. Näiden palettien hyödyntämisen ohella on hyvä käyttää apuna värinäön poikkeamia simuloivia tietokoneohjelmia visualisointiin valittujen värien toimivuuden arvioimiseen.
- Adoben ohjelmissa (esim. Photoshop ja InDesign) on mahdollista valita Näytä-valikon Vedosasetuksista värisokeussimulaatio (deuteranopia- tai protanopia-tyyppiset värinäön poikkeamat).
- Windowsissa on mahdollista kytkeä päälle käyttöjärjestelmän asetuksista kohdasta Helppokäyttötoiminnot > Värisuodattimet värisokeussimulaatiot (deuteranopia, protanopia ja tritanopia*)
- Tarkoitukseen on olemassa myös selainpohjaisia työkaluja kuten Adobe Color accessibility tools(Linkki johtaa ulkoiseen palveluun) ja Coblis simulator(Linkki johtaa ulkoiseen palveluun)
*) Tritanopia-tyyppiset värinäön poikkeamat ovat hyvin harvinaisia – niiden esiintyvyys väestössä on vain n. 0,008 % – joten väripaletin toimivuus myös tritanopiasimulaatiossa ei ole välttämätön ehto sen hyödyntämiselle visualisoinneissa.
Viivoitus ja muut kuvioinnit
Viivoitusta tai muuta kuviointia hyödynnetään joskus väripintojen erottuvuuden parantamiseen. Vaikka kuvioinnit voivat auttaa etenkin sellaisia käyttäjiä, joilla on jokin värinäön poikkeama erottamaan eri värit luotettavammin toimistaan, niitä kannattaa silti käyttää säästeliäästi, sillä ne voivat heikentää grafiikoiden saavutettavuutta toisissa käyttäjäryhmissä. Etenkin hyvin voimakkaita tai tiheitä kuviointeja on syytä välttää. Ne aiheuttavat lukijalle ylimääräistä visuaalista kuormitusta ja saattavat pahimmillaan laukaista migreeni- tai epileptisen kohtauksen näistä vaivoista kärsivillä käyttäjillä. Sama koskee tällaisten kuviointien käyttöä liikkuvassa kuvassa. Viivoitusta ja kuviointia ei useimmiten tarvitse, jos käyttää valmiita väripaletteja, sillä näissä värien keskeinen erottuvuus on optimoitu eri käyttökohteita ajatellen.
Laadulliset väripaletit
Laadullisessa väripaletissa värejä hyödynnetään kuvaamaan eri kategorioita – esimerkiksi sukupuolta, ikäryhmää, peruspiiriä tai toimialaa. Pyrkimyksenä on käyttää värejä niin, että eri kategoriat erottuvat toisistaan selkeästi, mutta ovat visuaalisesti suunnilleen samanarvoisia – ellei sitten tarkoituksena ole nimenomaisesti korostaa jotain tiettyä kategoriaa.
Alla esitellään kuusi Helsingin kaupungin tunnusväreistä(Linkki johtaa ulkoiseen palveluun) rakennettua visualisointikäyttöön soveltuvaa laadullista väripalettia, joissa on huomioitu värinäön poikkeamien asettamat rajoitteet värien erottuvuudelle. Tunnusväreistä voi rakentaa myös muita yhdistelmiä, kunhan huomioidaan, että tiettyjä väriyhdistelmiä ei voi käyttää, sillä ne eivät erotu toisistaan riittävästi, mikäli katsojalla on jokin värinäön poikkeama. Niinpä eräät tunnnusvärit ovat visualisointikäytössä vaihtoehtoisia toisilleen.
Viereisestä kuvasta huomataan, että kaupungin tunnusväreistä ei ole saavutettavuuden vaatimukset huomioiden mahdollista rakentaa kuin enimmilllään 6 värin laadullinen paletti. Paljon tätä suurempaa värimäärää ei tosin yleensä ole muutenkaan suositeltavaa käyttää, joten tämä rajoite ei merkittävästi haittaa laadullisten väripalettien rakentamista. Mikäli kuviossa on enemmän kuin 6 sarjaa, on niitä yleensä parempi kuvata tunnusvärien sijaan esimerkiksi toistokuvion avulla.
Reunaviivat
Jotta riittävä tummuuskontrasti vierekkäisten kuvioelementtien sekä elementtien ja taustavärin välillä toteutuisi, väripintojen kanssa on useimmissa tapauksissa käytettävä reunaviivaa. Yleensä on suotavaa käyttää ääriviivan värinä tummempaa sävyä täyttöväristä. On mahdollista käyttää myös samaa reunaväriä kaikille täyttöväreille, mutta tällöin valitun reunavärin täytyy yltää 3:1-kontrastisuhteeseen kaikkien täyttövärien kanssa. Tämä vaatii usein hyvin voimakkaan reunavärin (esim. mustan) käyttöä, joka voi tehdä kuviosta visuaalisesti levottoman. Mikäli se on teknisesti mahdollista, on suotavaa, että reunaviivat piirretään järjestyksessä vaaleimmasta tummimpaan siten, että reunaviivojen osuessa päällekkäin tummemmat viivat peittävät vaaleammat alleen. Väriarvot voi kopioida tämän osion alkuun linkitetystä Excel-taulukosta.
Yleispätevä ratkaisu – tummat reunaviivat
Näissä reunaviivoissa toteutuu tummuskontrasti 3:1 täyttö- ja reunavärin välillä, joten niitä voi hyödyntää kaikissa käyttötapauksissa – myös silloin kun kuviossa saattaa osua useampi samanvärinen elementti vierekkäin (esim. koropleettikartta). Bussi-väriä ei tällaisissa tapauksissa voi käyttää lainkaan, sillä se on niin tumma, ettei sille ole mahdollista löytää reunaväriä, joka toteuttaisi 3:1-minimikontrastiehdon täyttöväriin.
Kun käyttöjärjestys on tiedossa – vähemmän tummat reunaviivat
Silloin kun värien käyttöjärjestys (ks. alla) on tiedossa, tai värit esiintyvät erillään valkoista taustaa vasten, voidaan käyttää hieman vaaleampaa reunaviivaa. 3:1-kontrastisuhteen pitää toteutua ainoastaan käyttöjärjestyksessä peräkkäisten värien sekä värin ja kuvion taustavärin (yleensä valkoinen) välillä. Yllä olevat reunavärit ovat riittävän tummat kaikille alla kuvatuille laadullisille paleteille.
Huom! Piirakka- ja rengaskuvioissa on yleensä tarpeen käyttää yllä määriteltyjä tummempia reunaviivoja, vaikka värien käyttöjärjestys kuviossa on tiedossa. Tämä johtuu siitä, että kuvion ensimmäinen ja viimeinen lohko, joiden värit eivät tavallisesti ole käyttöjärjestyksessä vierekkäin osuvat toistensa viereen:
Vaaleat tai valkoiset reunaviivat
Jos visualisoinnin taustaväri on valkoisen sijasta musta tai jokin muu hyvin tumma väri, voi olla perusteltua käyttää reunaviivana valkoista tai saman sävyn vaaleampaa versiota.
Värit ilman reunaviivoja
Seuraavia värejä voidaan käyttää ilman reunaviivaa sellaisissa käyttöyhteyksissä, joissa taustaväri on valkoinen ja kuvio on yksivärinen tai värilliset elementit ovat toisistaan erillisiä (esimerkiksi kuvakkeissa): Bussi, Vaakuna, Tiili, Spåra, Metro
Värien käyttö viivakuvioissa
Useimmat visualisoinnit perustuva melko suuriin väripintoihin, joissa reunaviivan käyttö täyttövärin ympärillä on toimiva ratkaisu erottuvuuden parantamiseksi. Viivakuvioissa ongelmaksi muodostuu, että kuvion viivojen ympärille ei voida helposti lisätä reunaviivaa. Tällöin heikoimmin taustaväristä erottuvien – yleensä vaaleiden – värien kohdalla itse viivan väriä on muutettava. Alla suositeltavat värit käytettäväksi viivakuvion viivoille silloin, kun taustavärinä on valkoinen. Merkityn viivakuvion merkeissä käytetään samaa väritystä kuin muissakin kuviotyypeissä. Väriarvot voi kopioida tämän osion alkuun linkitetystä Excel-taulukosta. Spåra- ja Kupari-värejä ei ole suositeltavaa käyttää samassa viivakuviossa. Alla suositeltavat värit käytettäväksi viivakuvion viivoille silloin, kun taustavärinä on valkoinen. Mustalla kirjoitetut värikoodit ovat samoja, joita käytetään myös täyttövärinä, punaisella kirjoitetut ovat saavutettavuussyistä tummennettuja sävyjä.
Värien käyttöjärjestys
Mikäli mahdollista, laadullinen väripaletti kannattaa rakentaa siten, että väreillä on kiinteä käyttöjärjestys, jossa tummemmat ja vaaleammat värit vuorottelevat. Tämä lisää värien erottuvuutta ja tunnistettavuutta pinotuissa kuviotyypeissä kuten summapylväs- ja aluekuvioissa. Tällöin siis kuvion ensimmäiselle sarjalle käytetään käyttöjärjestyksen ensimmäistä väriä, toiselle toista jne. Alla olevat laadulliset paletit on rakennettu tällä periaatteella.
Viivakuvossa käyttöjärjestys kannattaa muuttaa niin, että valittuun palettiin kuuluvat tummimmat värit (Bussi, Vaakuna, Tiili, Metro, Spåra) hyödynnetään ensin. Käyttöjärjestyksestä on syytä poiketa silloin kun se johdonmukaisuuden nimissä on aiheellista. Kategoriat, joilla on vakiintuneet tunnusvärit (esim. sininen veden tunnusvärinä tai vaikkapa HSL:n eri kulkuvälineiden tunnusvärit) kannattaa kuvata näillä väreillä riippumatta käytössä olevan paletin suositellusta käyttöjärjestyksestä. Samaa väriä tulee johdonmukaisesti käyttää kuvaamaan samaa asiaa samassa kokonaisuudessa (esim. raportissa), vaikka se johtaisi joissain kohdin suositellusta käyttöjärjestyksestä poikkeamiseen.
Valmiit laadulliset paletit
Kaikkien palettien väriarvot voi kopioida tämän osion alkuun linkitetystä Excel-taulukosta.
1. Tunnusvärit
- Vaakuna
- Kesä
- Spåra
- Sumu
- Kulta
2. Viileä
- Vaakuna
- Sumu
- Spåra
- Kulta 60%
- Engel
3. Kylmä
- Bussi
- Sumu
- Spåra
- Engel
- Spåra 40 %
4. Lämmin
- Metro
- Kesä
- Vaakuna
- Metro 50 %
- Sumu
5. Kirjava
- Vaakuna
- Engel
- Bussi 30 %
- Metro
- Kupari
6. Pastelli 1
- Sumu
- Engel
- Kulta 60%
- Hopea
7. Pastelli 2
- Bussi 30 %
- Engel
- Metro 50 %
- Hopea
8. Liikennevalot
Tässä paletissa on edellä kuvatuista laadullisista paleteista poiketen vain kolme väriä. Paletti on tarkoitettu kuvaamaan joko dikotomista muuttujaa kuten kyllä/ei tai hyvä/huono (jolloin käytetään vain kahta reunimmaista väriä) tai kolmiportaista muuttujaa kuten hyvä/keskiverto/huono tai valmis/kesken/myöhässä. Liikennevalopaletista on olemassa myös määrällinen versio.
- Tiili
- Kesä
- Kupari
Määrälliset väripaletit
Sarjallisessa paletissa väriasteikon toisessa päässä on vaalea ja tumma väri. Värit voivat olla saman sävyn eri vaaleusasteita, mutta parempi erottuvuus paletin värien välille saadaan, kun värin tummuuden lisäksi myös värisävy vaihtelee, esim. niin, että asteikon toisessa päässä on tumma sininen ja toisessa vaalea virheä.
Hajaantuvassa paletissa keskimmäinen sävy on valkoinen tai vaalean harmaa ja asteikon päissä on erisävyiset tummat värit, esim. oranssi ja sininen. Hajaantuvan paletin värit erottuvat toisistaan yleensä hieman paremmin kuin sarjallisessa paletissa. On kuitenkin syytä huomioida, että keskimmäinen sävy vaikuttaa sisällöllisesti merkitykselliseltä ja se on syytä sijoittaa numeroasteikolla loogiseen kohtaan. Jos aineistossa on positiivisia ja negatiivisia arvoja, keskisävy sijoitetaan yleensä nollan kohdalle. Muussa tapauksessa keskikohtana voidaan käyttää esimerkiksi aineiston keskiarvoa tai mediaania.
Puuttuvan tiedon merkitseminen
Silloin kun tieto puuttuu, käytetään sen merkkinä sarjallisissa paleteissa harmaan sävyä #DEDFE1 tai raidoitettua täyttöä. Hajaantuvissa paleteissa puuttuva tieto merkitään aina raidoitetulla täytöllä, sillä niissä keskimmäisen luokan värinä käytetty harmaa väri saatetaan muutoin tulkita virheellisesti puuttuvan tiedon merkiksi. Kaikkien palettien väriarvot voi kopioida tämän osion alkuun linkitetystä Excel-taulukosta.
Valmiit määrälliset paletit
Sarjallinen paletti 1. Sinertävä
Sarjallinen paletti 2. Punertava
Hajaantuva paletti 1. Metro–Vaakuna
Hajaantuva paletti 2. Spåra–Vaakuna
Hajaantuva paletti 3. Spåra–Kulta
Hajaantuva paletti 4. Liikennevalot
Tämä paletti on tarkoitettu kuvaamaan sellaista muuttujaa, joka voidaan sijoittaa kiistattomasti hyvä–huono-akselille. Liikennevalopaletista on olemassa myös laadullinen versio.
