Siirry sisältöön

Värit ja kontrastit

Ohjeen sisältö

Tiivistelmä väreistä ja kontrasteista verkkopalvelun saavutettavuudessa:

  1. Varmista, että sivustolla ei käytetä pelkästään värejä tiedon tai toiminnallisuuksien esittämiseen. Tarkoitus on, että värisokeat ja heikkonäköiset käyttäjät saavat tiedon ja ymmärtävät sivun toimintalogiikan vaikka eivät näkisi värejä.
  2. Varmista, että tekstin ja taustan kontrasti on riittävä. Normaalikokoisen tekstin osalta kontrastin pitää olla vähintään 4,5:1 ja ison tekstin osalta vähintään 3:1. Hyödynnä tarkistustyökaluja, esim. Webaimin kontrastityökalua.
  3. Muista, että myös lomakkeiden ja painikkeiden tekstin ja taustan täytyy noudattaa standardia. Varmista, että kontrastit ovat riittävät kaikissa tilanteissa, esimerkiksi silloinkin, kun jokin linkki on valittu aktiiviseksi.
  4. Keskustele graafikon tai AD:n kanssa, tarvitaanko graafiseen ohjeistoon muutoksia värimääritysten tai käytettyjen väriyhdistelmien osalta.
  5. Varmista, että tarvittavat muutokset viedään verkkopalvelun tyylimäärityksiin.
  6. Kontrastivaatimukset koskevat tekstin ja taustan välistä tummuuseroa, eli tekstiä sisältämättömien kuvien osalta ei ainakaan WCAG-kriteeristön versiossa 2.0 ole erityisiä kontrastivaatimuksia. Jos kuvassa on oleellista informaatiota tekstinä (esimerkiksi infograafeissa), kontrasti tulisi ottaa huomioon. Vaihtoehtoisesti kuvan tekstisisällön voi kertoa esimerkiksi verkkosivun leipätekstissä.
  7. Logon ei tarvitse noudattaa standardia, vaikka logossa olisi tekstiä.
  8. Tuotetaanko organisaatiossa paljon visuaalista materiaalia tai tilataanko esim. infografiikkaa ulkopuolelta? Olisiko esim. Exceliin syytä tehdä yhteneväiset kuvaajapohjat, joissa on otettu huomioon värien ja kontrastien saavutettavuus? Sama pätee infografiikkaan: varmista, että tuottaja osaa ottaa saavutettavuusvaatimukset tekstin ja taustan tummuuskontrastin osalta huomioon.

Värien käyttö verkkopalvelussa

Värien järkevä käyttö ja riittävien kontrastien varmistaminen parantavat verkkopalvelun saavutettavuutta. Myös WCAG 2.0 -ohjeistus sisältää joitakin kriteerejä tekstiä sisältävien elementtien tummuuskontrasteista ja värien käytöstä yleensä.

Älä käytä pelkkää väriä toiminnallisuuksien tai tiedon esittämiseen

WCAG-kriteeristö toteaa, että väri ei saa olla ainoa tapa, jonka avulla käyttäjä voi saada tarvitsemansa tiedon. Esimerkiksi ilmoitus lomakkeen täytön epäonnistumisesta ei voi perustua vain punaiseen väriin, vaan käyttäjälle pitäisi antaa ilmoitus myös tekstinä tai symbolina.

Jos siis verkkosivulla on väriin perustuvaa tietoa tai toiminnallisuuksia, niille pitää olla myös vaihtoehto, joka ei vaadi värin havaitsemista.

Värien käyttö sinänsä verkkosivuilla on erittäin sallittua ja usein myös hyödyllistä. WCAG-kriteeristö ei siis kiellä värikästäkään ulkoasua.

Tärkeintä on huomioida, että esimerkiksi heikkonäköinen tai värisokea käyttäjä saa tarvitsemansa tiedon tai ymmärtää toimintaohjeet, vaikka ei erottaisikaan käytettyjä värejä. Suomessa on arviolta kymmeniätuhansia heikkonäköisiä ihmisiä, ja eri tavoin värisokeiden osuus väestöstä on jopa 6-7 prosenttia.

Tekstin ja taustan välinen tummuuskontrasti

Verkkosivun tekstin ja taustan välillä tulee olla riittävä tummuusero eli kontrasti. Riittävä kontrasti on tärkeä, jotta heikkonäköiset henkilöt voivat saada selvää tekstistä. Kontrastista on hyötyä myös muille käyttäjille esimerkiksi kirkkaassa auringonpaisteessa.

Riittävästä kontrastista on säädetty selkeät kriteerit WCAG 2.0 -ohjeistuksessa. WCAG:n kriteeri 1.4.3 sanoo, että tekstin ja taustan välisen kontrastisuhteen pitää olla vähintään 4,5:1. Tällöin kontrasti täyttää kriteerin tason AA. Jos teksti on suurta kokoa (vähintään 18 pt tai lihavoitu teksti vähintään 14 pt), hieman pienempi kontrasti eli 3:1 riittää. Lisää tietoa tekstikoon määrittelystä englanniksi

Värikontrastit pitää huomioida myös silloin, kun jokin kohta valitaan aktiiviseksi tai sen tila muuten muuttuu. Esimerkiksi jos linkin tekstin tai taustan väri muuttuu, kun hiiri/osoitin viedään sen päälle, riittävän kontrastieron on säilyttävä.

Lyhyesti kontrastiarvoista

Mitä tummuuskontrasti sitten käytännössä tarkoittaa? Numeroarvot eivät kerro muille kuin graafisen alan ammattilaisille varmastikaan juuri mitään, mutta niitä ei ole syytä pelästyä.

Tummuuskontrasti tarkoittaa sitä, kuinka moninkertaisesti valoisampi kahden verrattavan värin vaaleampi osapuoli on suhteessa tummempaan väriin. Esimerkiksi mustan ja valkoisen välinen tummuuskontrasti on 21:1 ja melko vaalean harmaan ja valkoisen välinen tummuuskontrasti 3:1.

Lomakkeiden ja painikkeiden kontrastit

Melko usein verkkosivujen perusteksti ja tausta on suunniteltu kontrastiltaan riittäväksi ilman että saavutettavuusnäkökulmaa on edes erityisesti ajateltu. Kannattaa muistaa, että kontrastivaatimus koskee myös verkkolomakkeita.

Jos verkkolomakkeissa on ohjaavia tekstejä, myös niiden täytyy täyttää kontrastivaatimukset. Usein näkee lomakkeita, joissa täytettävän kohdan vihjeteksti on vaalean harmaalla. Tämä voi olla ongelma kontrastin kannalta. Kannattaakin miettiä, olisiko järkevää esimerkiksi määritellä vihjetekstin tyyliksi kursiivi, jolloin kontrasti säilyisi riittävänä mutta tyylikeino erottaisi vihjetekstin tavallisesta sisältötekstistä.

Verkkosivujen painikkeiden täytyy myös noudattaa kontrastivaatimuksia. Varmista siis, että esimerkiksi Lähetä- ja Tilaa-painikkeissa tekstin ja taustan tummuuskontrasti on riittävä.

Kuvakaappaus Wave-työkalun analysoimasta sivusta, jossa on kaksi tummuuskontrastivirhettä. Kuva havainnollistaa esimerkinomaisesti edellä selostettua tekstiä.

 

Kuvassa Celian verkkosivu on analysoitu Wave-työkalun avulla. Työkalu näyttää kaksi virhettä kontrastien osalta. Oikean laidan kirjautumisikkunan vihjeteksti (”Käyttäjätunnus” ja ”Salasana”) on liian vaaleaa harmaata valkoista taustaa vasten. Myös chat-ikkunan ylälaidan otsikon ja vihreän taustan värinen tummuuskontrasti on liian pieni.

Koskevatko kontrastivaatimukset logoja?

WCAG-standardissa todetaan yksiselitteisesti, että kontrastivaatimus ei koske logoja edes silloin kun nämä sisältävät tekstiä. Kannattaa kuitenkin miettiä visuaalisen ilmeen yhtenäisyyttä ja varmistaa graafikon kanssa, että logo sopii edelleen kokonaisuuteen sellaisenaan, jos verkkopalvelun värimaailmaa joudutaan säätämään standardin mukaiseksi. Logon alt-tekstin avulla varmistetaan, että heikkonäköisetkin saavat tiedon logon tekstistä.

Miten kontrastin voi tarkistaa?

Tummuuskontrastia ei onneksi tarvitse osata laskea itse. Kontrastin riittävyyden voi tarkistaa helposti verkkotyökalujen avulla. Tässä on listattu muutamia vaihtoehtoja (sivut ovat englanninkielisiä):

Muita työkaluja värien testaukseen

Käytännössä verkkosivun värejä kannattaa kokeilla myös esimerkiksi Funkify-simulaattorin avulla. Miltä verkkosivunne näyttävät esim. puna-vihersokean silmin? Paljastuuko elementtejä, joiden tarkoitus on vaikea tai mahdoton hahmottaa, jos osaa tai kaikkia värejä ei näe?

Toinen varsin hyvä simulaattori on NoCoffee vision simulator, jossa voi myös valita erilaisia värisokeuden simulointeja. NoCoffee on saatavilla Chrome- ja Firefox-selaimiin.

Hyvä keino varmistaa, että värinäön ongelmista kärsivät henkilöt voivat käyttää verkkopalvelua helposti, on testata ulkoasua harmaasävyisenä. Esimerkiksi Funkify-simulaattorilla voi kokeilla sitä vaivatta. Myös graafisilla ohjelmilla tehtyjä kuvituksia kannattaa testata harmaasävyisenä jo tekovaiheessa.

Adoben Photoshop-ohjelmaan voi asentaa maksuttoman lisäosan, jonka avulla voi testata värikontrastien riittävyyttä jo suunnitteluvaiheessa.

Värimaailman suunnittelu saavutettavaksi

Saavutettavuus kannattaa ottaa yhdeksi lähtökohdaksi jo visuaalisen ilmeen suunnittelun aluksi. Kun perusoletuksena on riittävät kontrastit ja järkevät, mahdollisimman hyvin esim. värisokeat ja heikkonäköiset käyttäjät huomioivat väriyhdistelmät, vältytään monelta murheelta käytännön toteutuksissa.

Organisaation ilmeen ja verkkosivujen värimaailman suunnittelusta vastaa yleensä viime kädessä graafikko tai AD. Hyvä graafinen suunnittelija ottaa siis saavutettavuusvaatimukset huomioon jo suunnittelun alkuvaiheessa.

Jos vastaat verkkopalvelun ilmeestä tai ylipäänsä brändiväreistä, varmista siis, että graafisella suunnittelijalla on riittävästi ymmärrystä ja osaamista saavutettavuusvaatimuksista.

Lisää tietoa WCAG 2.0 -ohjeistuksen kontrastikriteereistä englanniksi

Tuoko WCAG-ohjeistuksen uusi versio muutosta kontrastivaatimuksiin?

WCAG-saavutettavuusstandardin uusi 2.1-versio on nyt kommentointi- ja arviointikierroksella. Uudessa versiossa on kriteeri, joka ottaa kantaa enemmän myös kuvien kontrastivaatimuksiin.

Jos keskeistä tietoa esitetään visuaalisesti, kuvan tulisi olla siltä osin kontrastivaatimusten mukainen. Lisäksi kriteerin mukaan esimerkiksi navigaatio-osan ja taustan tulisi noudattaa vähintään kontrastia 3:1.

Kriteeriä ei ole vielä vahvistettu, joten ei ole varmaa, toteutuuko standardin uudistus tältä osin.