Karhulla on asiaa

Värillä on väliä – etenkin saa­vu­tet­ta­vuu­den kannalta

Emilia Kaartinen 12

Oletko koskaan miettinyt, miksi valkoista seinämaalia on enemmän kuin yhtä sävyä? Tai huomannut, että kaupassa siniseksi luulemasi valaisin näyttää kotona sittenkin vihreältä? Ehkä muistat joitain vuosia sitten internetiä kiertäneen kuvan mekosta, jonka värityksestä kiisteltiin. Osa näki mekon sini-mustana, kun taas toiset pitivät sitä kulta-valkoisena. Mekon todellinen väri oli sini-musta, mutta tapaus osoitti, kuinka eri tavalla värit voidaan havaita.

Mitä väri on?

Väri on se osa näkyvästä valon spektristä, joka heijastuu takaisin pinnalta. Valon määrä, jonka pinta heijastaa tai absorboi, määrittää sen värin. Värihavaintoon vaikuttavat monet eri tekijät kuten havaitsija (esim. ikä, puutteet värien näkemisessä), ympäristö (ympäröivän valon määrä ja väri, vieressä olevat muut kohteet), havainnoitavan kohteen ominaisuudet (materiaali, lämpö, tekniset ominaisuudet). Väri ei siis ole pysyvä ominaisuus, vaan pikemminkin useasta tekijästä riippuva subjektiivinen aistimus. 

Vaikuttavat värit

Värillä todella on väliä. Netistä löytyy helposti kymmeniä eri sivustoja, joissa kerrotaan värien psykologisesta vaikutuksesta meihin ja miten ne vaikuttavat vaikkapa ostokäyttäymiseemme. Mielenkiintoisessa pienessä tutkimuksessa pyydettiin ihmisiä piirtämään muistista tunnettujen kansainvälisten brändien yritystunnuksia. Vaikka itse tunnus meni usein sinne päin, värit muistettiin oikein yllättävän hyvin. Ei siis ole yhdentekevää, mikä väri valitaan brändin pääväriksi tai tuotteen pakkaukseen. Mieti vaikka Fazerin sinistä. Tai Ikeaa. 

Saavutettavat värit: käyttökelpoisia palveluita kaikille

Kaikki eivät kuitenkaan näe värejä samalla tavalla kuin suurin osa maapallon väestöstä. Värit puutteellisesti näkeviä ihmisiä on arviolta 300 miljoonaa. Miehistä 8 % ja naisista 0,5 % ovat värisokeita. Ei siis mikään ihan pieni joukko. Jos siihen lisätään myös heikkonäköiset, on värien toisistaan erottamisen kanssa haasteita vielä useammalla.

Jotta mahdollisimman moni pystyisi käyttämään esimerkiksi digipalveluja rajoitteistaan huolimatta, tulisi palvelujen olla saavutettavia. Saavutettavuuteen liittyy paljon kriteereitä, joista osa koskee värien käyttöä. Saavutettavat värit ovat väriyhdistelmiä, joissa kahden vierekkäisen värin kontrasti on riittävän suuri, jotta ne erottuvat toisistaan. Kriteereissä on kolme eri tasoa:

A – perustaso: Väriyhdistelmät, joiden kontrastisuhde on alle 4,5:1 normaalille tekstille. Tämä ei kuitenkaan ole riittävä taso, jos ei näe kunnolla. 

AA – hyvä saavutettavuustaso: Väriparit, joiden suhde on vähintään 4,5:1 tai enemmän, ovat tarpeeksi kontrastisia käytettäväksi normaalissa tekstissä. 3:1 suhde riittää suurelle tekstille (14 pt lihavoitu tai yli 18 pt) ja grafiikoille. Suomessa digipalvelulain piirissä olevien sivustojen tulee täyttää vähintään tämä taso. 

AAA – Erinomainen saavutettavuustaso: Väriyhdistelmät 7:1 suhteella normaalille tekstille ja 4,5:1 suurelle tekstille ja grafiikoille parantavat käytettävyyttä. 

Kahden värin kontrastin pitää olla riittävän suuri, jotta ne erottuvat toisistaan hyvin. Kuvassa on esimerkkejä saavutettavista väripareista vasemmalla. Keskimmäiset ja oikeanpuolimmaiset väriparit eivät täytä AAA-tason saavutettavuusvaatimuksia.

Saavutettavat väriyhdistelmät eivät pelkästään varmista lainmukaisuutta, vaan ne parantavat luettavuutta ja käytettävyyttä ihan kaikille. Erilaisten ryhmien huomioiminen saavutettavuuden kautta osoittaa välittämistä ja inklusiivisuutta, vaikkei palvelu kuuluisikaan saavutettavuusdirektiivin piiriin. Laajemman yleisön palveleminen saattaa hyödyttää myös taloudellisesti. 

Värisokea näkee värit eri tavalla

Värisokeus ei tarkoita, etteikö värejä näkisi, ne vain nähdään eri tavalla kuin ei-värisokeat. Yleisin värinäön poikkeama on punavihersokeus, jossa vihreää ja punaista on vaikea erottaa toisistaan. Se kattaa 99 % värisokeuden muodoista ja on yleisempi miehillä kuin naisilla. Muita muotoja ovat tritanopia eli sinisokeus (vaikea erottaa toisistaan sinisen ja vihreän sävyjä) sekä monokromaattisen värisokeuden eri muodot.

Netistä löytyy generaattoreita, joilla voi simuloida erilaisia värinäön poikkeamia. Punavihersokeus (keskellä) vaikeuttaa punaisten värien näkemistä ja sinisokeus (oikealla) taas sinisten värien. Vasemmalla on filtteröimätön kuva.

Värisokeus aiheuttaa ongelmia tilanteissa, joissa tietoa välitetään värien avulla. Sen vuoksi interaktiivisten komponenttien erottaminen toisistaan, tai järjestelmävaroitusten sekä onnistumis- tai virhetilojen ilmoittaminen pitää viestiä värin lisäksi muilla tavoilla. Jos lomakkeessa olevien kenttien virhetilat osoitetaan vain punaisella ääriviivalla, ei värisokea välttämättä hahmota, missä virhe on. Virhe on hyvä ilmoittaa esimerkiksi sanallisesti niin, että virheilmoituksen tekstityyppi eroaa visuaalisesti muusta lähellä olevasta tekstisisällöstä. Värien erottuvuutta voi myös parantaa kuvioinnilla tai erottamalla matalakontrastinen elementti tummalla tai vaalealla ääriviivalla taustasta.

Kuviointi auttaa erottamaan värialueita toisistaan. Jos vierekkäisillä väreillä ei ole kontrastia riittävästi, voi ne erottaa vaalealla tai tummalla marginaalilla toisistaan.

Jos olet suunnittelemassa jotain, jonka tulisi olla saavutettava, kannattaa tutustua esimerkiksi näihin työkaluihin. 

https://webaim.org/resources/contrastchecker/

https://colourcontrast.cc/

https://venngage.com/tools/accessible-color-palette-generator

http://colorsafe.co/

https://color.adobe.com/create/color-accessibility

Ps. Pantone valitsee joka vuosi vuoden värin. Tänä vuonna se on räväkkä Viva Magenta 18-1750.

Lue myös muut digitaalista saavutettavuutta käsittelevät artikkelimme

Tykkäsitkö tästä jutusta?

8
3
1
0
Kenttä on validointitarkoituksiin ja tulee jättää koskemattomaksi.
Jaa juttu somessa
Tällä viikolla näitä luettiin eniten
  1. Matomo-analytiikka – eniten käytetyt raportit
  2. HTTP-virhekoodit – eli mitä näet silloin, jos nettisivu ei toimi kuten odotit
  3. Miljoonasakot Meta-pikselin käytöstä verkkokaupoille Ruotsissa
Viime aikoina eniten reaktioita herättivät
Ota yhteyttä
Tilaa uutiskirje