Värit

Yleistä

Digitaaliseen ympäristöön määriteltyjen värien sävyskaala on laajempi kuin esimerkiksi printtimateriaaleihin tarkoitetuissa väreissä. Tiheämmän porrastuksen ansiosta värit soveltuvat paremmin digitaalisen ympäristön vaatimuksiin ja erityispiirteisiin.

Verkkovärien valikoima on suunniteltu saavutettavuuden ja käytettävyyden ehdoilla. Jokaisesta väristä on johdettu kymmenen sävyn muodostama skaala. Tummia ja vaaleita sävyjä yhdistelemällä voidaan muodostaa kattavasti erilaisia yhdistelmiä, jotka vastaavat WCAG 2.1 -ohjeiston asettamia AA-tason kontrastivaatimuksia.

Ohjeessa käytetyt termit

Väri
Väripaletin väri, joka muodostaa kymmenen värisävyn asteikon. Esimerkiksi Kelan brändisininen ”kela-blue” sisältää kymmenen yksittäistä sävyä.

Värisävy tai sävy
Yksittäinen värisävy, jolla on yksilöity nimi ja hex-värikoodi, esimerkiksi kela-blue-80, #003580.

Sävyasteikko
Sävyasteikko viittaa värisävyn sijaintiin tummuusasteikolla. Samaa asteikkonumeroa noudattavat sävyt (esimerkiksi kela-blue-50 ja lime-green-50) muodostavat samankaltaisen kontrastin tummaan leipätekstiin yhdistettynä.

KDS:in värijärjestelmä perustuu kolmeen väripalettiin:

1. Päävärit – käyttöliittymien ulkoasu ja usein toistuvat peruselementit
2. Tilavärit – toiminnalliset elementit ja järjestelmän tilasta viestiminen
3. Lisävärit – kuvittavat elementit, informaatiografiikka yms.

Värien rooli ja merkitys

Värit viestivät organisaation arvoista ja ohjaavat käyttäjää kohti tavoiteltua mielikuvaa. Väreillä on lisäksi keskeinen rooli käyttäjän opastamisessa, tiedon jäsentämisessä ja esteettisesti miellyttävän ulkoasun rakentamisessa.

Hyvän asiakaskokemuksen, käytettävyyden ja saavutettavuuden varmistamiseksi värien valinnalle tulee olla sisällölliset perusteet. Värien avulla voidaan luoda erilaisia hierarkioita ja rakenteita, opastaa ja ohjata käyttäjää, välittää mielikuvia sekä havainnollistaa ja luokitella tietoa.

Esteettinen ja brändiä rakentava rooli

Värit ilmentävät organisaation yksilöllistä identiteettiä ja toimivat tunnistettavan visuaalisen tyylin perustana. Tasapainoinen värien ja kuvaelementtien kokonaisuus luo esteettisesti miellyttävän vaikutelman ja luontevan visuaalisen rytmin.

Värit muodostavat kiinteän yhteyden brändiin ja siihen liitettyyn tavoitemielikuvaan.

Kelan verkkoilmeen pääasialliset brändivärit, sininen ja keltainen, ilmentävät vaikutelmaa ihmisläheisestä ja luotettavasta asiantuntijaorganisaatiosta.

• Tumma sininen henkii varmuutta, vakautta, arvokkuutta ja rauhallisuutta.
• Keltainen puolestaan toimii tehokkaana huomion herättäjänä ja kuvastaa lämpöä, toivoa, iloa ja positiivisuutta.

Kannan verkkoilmeen pääväreinä sovelletaan Kanta-brändikirjasta johdettuja värejä, jotka heijastavat Kannalle keskeisiä arvoja: uskottavuutta, luotettavuutta, terveyttä, hyvinvointia ja ihmisläheisyyttä.

• Ensisijaisena brändivärinä käytetään Kanta-brändikirjan kahdesta eri väristä johdettua petroolia.
• Kirkasta vihreää sovelletaan dekoratiivisissa yksityiskohdissa ja muissa brändiä tukevissa visuaalisissa elementeissä.

Toiminnallinen ja tietoa välittävä rooli

Värit toimivat apuna sisällön järjestämisessä ja luokittelussa. Esimerkiksi sävypintojen avulla voidaan parantaa sisällön selkeyttä sekä muodostaa lukemista helpottava rytmi ja rakenne.

Käyttöliittymien ja digitaalisten palvelujen suunnittelussa väreillä on myös tärkeä toiminnallinen funktio: ne voivat varoittaa, viestiä virhetilanteesta tai ilmoittaa toiminnon onnistumisesta.

Värit liittyvät myös tiedon jäsentämiseen ja havainnollistamiseen. Värisävyt ovat visuaalisia muuttujia, jotka voivat itsessään sisältää tietoa. Esimerkiksi datan tai tiedon visualisoinneissa värejä voidaan käyttää tunnisteena tai tiettyä kategoriaa symboloivassa roolissa.

Tekninen tausta

Kela Design Systemin väripaletti on muodostettu HSLuv-väriavaruuden avulla(Avautuu uuteen välilehteen), jossa on pyritty huomioimaan ihmisen värinäön ominaisuuksia.

HSLuv-väri koostuu kolmesta muuttujasta:

1. Hue (H) eli väri (0-360)
2. Saturation (S) eli värikylläisyys (0-100)
3. Lightness (L) eli valoisuus (0-100)

Kaikki Kela Design Systemin väripaletin värit noudattavat samoja HSLuv-väriavaruuden L-arvoja. Värin valoisuus (L-arvo) määrää HSLuv-väriavaruudessa värin kontrastin riippumatta väristä (H) tai sen värikylläisyydestä (S). Verkkoilmeessä sovellettavat väripaletit on rakennettu tämän ominaisuuden avulla.