Yrityksen väripaletti ei ole luettelo mielikuvista, vaan käyttöjärjestelmä: sen pitää ohjata huomiota, erottaa sisällön tasot, kertoa toimintojen tilasta ja säilyttää luettavuus eri laitteilla. Tässä ohjeessa rakennetaan värit roolien, kontrastin ja todellisten käyttötilanteiden kautta.
Aloita värien tehtävistä, älä väripsykologian listoista
Sininen ei automaattisesti tee yrityksestä luotettavaa eikä punainen takaa energiaa. Väriin liitetty merkitys riippuu kulttuurista, toimialasta, tekstistä, kuvista ja käyttötilanteesta. Parempi lähtökohta on määritellä, mitä käyttäjän pitää erottaa: tausta, teksti, linkki, ensisijainen toiminto, toissijainen toiminto, onnistuminen, varoitus ja virhe.
Brändin pääväri voi rakentaa tunnistettavuutta, mutta sen ei tarvitse toimia kaikissa rooleissa. Jos pääväri ei täytä tekstin tai painikkeen kontrastivaatimusta, käyttöliittymään valitaan tummempi tai vaaleampi toiminnallinen sävy. Näin brändi-ilme ja käytettävyys eivät joudu turhaan vastakkain.
Rakenna pieni paletti ja nimeä värit roolin mukaan
Toimiva peruspaletti sisältää yleensä neutraalit tausta- ja tekstisävyt, yhden tunnistettavan brändivärin, toimintovärin sekä tarvittavat palautevärit. 60–30–10-ajattelua voi käyttää sommittelun luonnosteluun, mutta se ei ole verkkosivun vaatimus eikä ratkaise hierarkiaa itsestään.
Dokumentoi värit käyttötarkoituksen mukaan, esimerkiksi teksti-ensisijainen, tausta-korostettu ja toiminto-ensisijainen, pelkkien nimien kuten sininen-500 sijaan. Roolit helpottavat paletin muuttamista ja vähentävät tilanteita, joissa uusi sävy lisätään vain yhden näkymän tarpeeseen.
- taustat ja pintatasot
- ensisijainen ja toissijainen teksti
- linkit, painikkeet ja näkyvä kohdistus
- onnistuminen, varoitus ja virhe
- rajat, ikonit ja datavisualisoinnin sävyt
Kontrasti mitataan väriyhdistelmästä
WCAG 2.2:n AA-tasolla normaalin tekstin ja taustan kontrastisuhteen pitää olla vähintään 4,5:1. Suurelle tekstille raja on 3:1. Käyttöliittymän olennaisten osien ja tilaa ilmaisevien graafisten elementtien kontrastitavoite viereiseen väriin on vähintään 3:1. Raja-arvot ovat minimejä, eivät tavoite esteettisesti mahdollisimman haalealle ilmeelle.
Kontrasti tarkistetaan jokaiselle oikeasti käytetylle parille: teksti taustaa vasten, painikkeen teksti painiketta vasten sekä kentän, ikonin tai kohdistusrenkaan suhde viereiseen väriin. Logotyypit on rajattu tekstikontrastivaatimuksen ulkopuolelle, mutta sama väri ei saa automaattisesti vapautusta, kun sitä käytetään käyttöliittymässä.
| Kohde | WCAG 2.2 AA -minimi | Tarkista käytännössä |
|---|---|---|
| Normaali teksti | 4,5:1 | Kaikki teksti–tausta-parit ja eri tilat |
| Suuri teksti | 3:1 | Koko ja lihavuus täyttävät suuren tekstin määritelmän |
| Olennaiset käyttöliittymäosat | 3:1 | Rajaus, ikoni, valittu tila ja kohdistus erottuvat |
| Logotyyppi | Ei minimisummaa | Poikkeus ei koske muuta tekstiä tai käyttöliittymää |
Väri ei saa olla ainoa viesti
Punainen virherajaus ei yksin kerro, mikä kentässä on vialla. Lisää tekstimuotoinen virheilmoitus ja tarvittaessa ikoni tai muu muoto. Sama periaate koskee kaavioita, valittuja välilehtiä, saatavuustietoa ja onnistumisen tilaa: merkityksen pitää välittyä myös käyttäjälle, joka ei erota sävyjä odotetulla tavalla.
Linkit leipätekstissä kannattaa erottaa muutenkin kuin pelkällä sävyllä, esimerkiksi alleviivauksella. Hover-tila ei auta kosketusnäytöllä eikä näppäimistöllä liikkuvaa käyttäjää, joten myös oletus- ja kohdistustilojen on oltava selkeitä.
Testaa kokonaiset näkymät ja kaikki tilat
Palettikuva ei paljasta, miten värit toimivat oikeassa näkymässä. Tee esimerkit vähintään etusivusta, lomakkeesta, taulukosta tai korttilistasta sekä virhe- ja onnistumistiloista. Tarkista vaalea ja tumma teema erikseen, jos molemmat ovat käytössä; yhden teeman hyväksytty väriyhdistelmä ei takaa toisen toimivuutta.
Automaattinen kontrastitarkistin löytää numeerisia puutteita, mutta se ei arvioi visuaalista hierarkiaa, ymmärrettävyyttä tai sitä, välittyykö tieto ilman väriä. Siksi katselmoi toteutus myös suurennettuna, harmaasävynä, näppäimistöllä ja oikeilla sisällöillä.
- oletus-, hover-, aktiivinen-, kohdistus- ja disabled-tilat
- pitkät otsikot ja todelliset virheviestit
- kuvien tai gradienttien päällä oleva teksti
- mobiilin kirkkaat ja heijastavat käyttöolosuhteet
Väriohje tekee paletista ylläpidettävän
Kirjaa hyväksytyt väriarvot, roolit, kontrastiparit ja esimerkit kielletystä käytöstä yhteen paikkaan. Toteutuksessa samat roolit muutetaan design-tokeneiksi tai CSS-muuttujiksi, jotta värit eivät hajaannu yksittäisiin komponentteihin.
Palettia arvioidaan uudelleen, kun uusia komponentteja, teemoja tai kanavia lisätään. Hyvä värijärjestelmä ei tarkoita mahdollisimman montaa valmista sävyä, vaan riittävän pientä joukkoa päätöksiä, joilla uusi näkymä voidaan rakentaa johdonmukaisesti.
Digitari auttaa rakentamaan yritykselle tunnistettavan ja käytännössä toimivan visuaalisen kokonaisuuden. Tutustu graafiseen suunnitteluun.
Lähteet ja lisätiedot
Kontrastia ja värin käyttöä koskevat luvut perustuvat W3C:n WCAG 2.2 -ohjeistukseen. Suunnittelusäännöt on esitetty käytännön lähtökohtina, ei universaaleina vaatimuksina.
