Share on facebook
Share on twitter
Share on linkedin

Lounashetki: Värit ja saavutettavuus

Tässä artikkelissa Wunder:illa UX/UI suunnittelijana ja saavutettavuusasiantuntijana toimiva Hanna Kulmala kertoo käyttöliittymässä käytettävien värien saavutettavuudesta ja esittelee muutamia ilmaisia työkaluja värien kanssa työskentelyyn. Hanna alusti keskustelua #mimmitkoodaa ohjelman lounashetkessä.

Mistä puhutaan, kun puhutaan saavutettavuudesta?

Saavutettavuus on yksi tämän hetken kuumista trendeistä ja hyvä niin. Itselleni saavutettavuudessa on ennen kaikkea kyse reiluudesta: siitä, että kaikilla on mahdollisuus käyttää verkkopalveluita erilaisista lähtökohdista riippumatta. Arvioiden mukaan jopa miljoona suomalaista tarvitsee saavutettavia verkkopalveluita, ja todennäköisesti tunnemmekin kaikki jonkun tähän ryhmään kuuluvan. 

Saavutettavia verkkopalveluita tarvitsevat esimerkiksi käyttäjät, joilla on värisokeus tai lukihäiriö. Saavutettavuus ei kuitenkaan koske vain erikoisryhmiä, vaan eri tilanteissa hyödymme kaikki saavutettavista palveluista. Värien kohdalla hyvä esimerkki on tarpeeksi korkea kontrastisuhde, jota värisokeat tai alentuneesta näkökyvystä kärsivät käyttäjät tarvitsevat hahmottaakseen käyttöliittymän. Aurinkoisena päivänä kuka tahansa ulkona mobiililaitetta käyttävä voi kuitenkin tilapäisesti kärsiä vaikeuksista hahmottaa käyttöliittymän värejä ilman riittävää kontrastia. 

Miten sitten tuotetaan saavutettavia verkkopalveluita? Saavutettavan verkkosisällön kansainvälinen ohjenuora on WCAG 2.1 eli Web Content Accessibility Guidelines. Tähän ohjeistoon kuuluu vaatimuksia sekä verkkosivustojen suunnittelulle että tekniselle toteutukselle. Seuraavassa kappaleessa tutustutaan ohjeiston värejä koskeviin vaatimuksiin.

Onko väreillekin saavutettavuusvaatimuksia?

Kyllä. Silti oma kokemukseni saavutettavuusauditoinneista on, että useilla sivustoilla värien käyttöön liittyvät vaatimukset on toistaiseksi huomioitu melko huonosti. Värien saavutettavuus olisikin hyvä ottaa huomioon mahdollisimman aikaisessa vaiheessa sivuston suunnittelussa.

Värien käytölle ja niiden kontrasteille on omat saavutettavuusvaatimuksensa WCAG:n kohdassa 1.4 Erottuva, joka löytyy periaatteen 1. Havaittava alta. Havaittavuusperiaate velvoittaa tuottamaan verkkosisältöä sellaisessa muodossa, jonka käyttäjä voi havaita. Periaatteeseen kuuluu paljon muutakin kuin värien käytön vaatimukset. Esimerkiksi se, miten verkkosisältö tehdään havaittavaksi käyttäjille, jotka eivät näe käyttöliittymää tai joiden näkökyky on rajoittunut. Keskitytään tässä artikkelissa kuitenkin nimenomaan värien käyttöä koskeviin vaatimuksiin.

Ensimmäinen vaatimus edellyttää, että toimintoja tai tärkeää tietoa ei ilmaista pelkästään värin avulla. Tarkemmin sanottuna: 

“Väriä ei käytetä ainoana visuaalisena keinona informaation välittämisessä, toiminnon esittämisessä, vastauksen pyytämisessä tai visuaalisen elementin erottamisessa.”

  • 1.4.1 Värien käyttö

Käytännössä tämä tarkoittaa sitä, että esimerkiksi linkkejä ei saa erottaa leipätekstistä pelkästään värin muutoksen avulla, vaan sen lisäksi on käytettävä myös jotain muuta visuaalista keinoa kuten alleviivausta. 

Toinen vaatimus koskee käytettyjen värien kontrasteja. Niihin liittyen on WCAG:ssa määritelty kaksi tasoa: minimitaso AA sekä parannettu AAA-taso. Näistä kahden A:n taso, jota Suomen kansallinen saavutettavuuslakikin vaatii, on varmasti hyvä lähtökohta monelle sivustolle. AA-taso edellyttää, että tekstin ja tekstiä esittävien kuvien visuaalisen esitystavan kontrastisuhde on vähintään 4,5:1. Poikkeuksena vaatimukselle ovat isokokoiset tekstit, eli käytännössä otsikot, joille kontrastivaatimus on 3:1, sekä oheissisältö, kuten kuvituskuvat, ja logoon tai brändin nimeen liittyvä teksti, joille ei ole kontrastivaatimuksia. 

Kontrastisuhteen laskukaavaa ei onneksi tarvitse opetella ulkoa, jotta voisi suunnitella saavutettavia käyttöliittymäelementtejä. Värien ja värikontrastien kanssa työskentelyyn on olemassa monia työkaluja, joista muutamia esitellään seuraavassa kappaleessa.

Työkaluja ja ohjeita värien kanssa työskentelyyn

Color Contrast Accessibility Validator

Kätevä työkalu nopeaan kontrastisuhteiden tarkistukseen. Työkaluun syötetään tarkistettavan sivun url, minkä jälkeen se laskee sivulta löytyvien väriyhdistelmien kontrastisuhteet. Löytyneet väriyhdistelmät listataan sen mukaan, läpäisevätkö ne WCAG:n vaatimukset vai eivät.

https://color.a11y.com/Contrast/

WebAIM Contrast Checker

Toinen värikontrastien tarkistukseen sopiva työkalu, johon voidaan syöttää yksittäisiä värejä. Etualalla olevan värin heksakoodi syötetään työkalun Foreground color -kenttään ja taustaväri Background color -kenttään. Työkalu laskee värien kontrastisuhteen ja ilmoittaa, läpäiseekö väriyhdistelmä WCAG:n AA- tai AAA-tason eri käyttöliittymäelementtien kohdalla. 

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

ColorZilla

Chrome- tai Firefox-selaimeen asennettava pipettityökalu, jolla värejä voi poimia suoraan verkkosivulta. Toimii hyvin värien poimimiseen Contrast Checker:iä varten. 

https://www.colorzilla.com/

Funkify

Chrome-selaimen lisäosa, joka simuloi erilaisia häiriöitä värisokeudesta lukihäiriöön. Työkalun avulla voi tarkastella verkkosisältöjä sellaisina, kuin ne näyttäytyvät erilaisista häiriöistä, kuten värisokeudesta kärsiville ihmisille. Funkify:n perusversio on ilmainen, mutta saatavilla on myös maksullinen versio, johon kuuluu enemmän simulaattoreita.

https://www.funkify.org/

Saavutettavuusvaatimukset.fi

Aluevalvontaviraston ylläpitämä sivusto, jolta löytyy runsaasti tietoa saavutettavuudesta, Suomen kansallisesta saavutettavuuslaista sekä WCAG:n vaatimuksista.

https://www.saavutettavuusvaatimukset.fi/

Helsingin kaupungin saavutettavuusopas

Helsingin kaupungin toimittama, suomenkielinen saavutettavuusopas. Sisältää tietoa saavutettavuudesta sekä ohjeita saavutettavan sisällön tuottamiseen. Näköaistiin ja värien käyttöön liittyvät ohjeet alkavat sivulta 10.

https://www.hel.fi/static/hki4all/ohjeet/saavutettavuus-opas.pdf

Jaa juttu somessa:

Share on facebook
Share on twitter
Share on linkedin

Viimeaikaiset blogaukset

Seuraa Facebookissa

Tilaa #mimmitkoodaa uutiskirje!

Tilaamalla uutiskirjeen hyväksyt käyttöehdot.