Värit ja kontrastit

Etusivu / Kuva ja ääni / Värit ja kontrastit

Tiivistelmä väreistä ja kontrasteista verkkopalvelun saavutettavuudessa:

  • 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ä.
  • 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.
  • 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.
  • Logon ei tarvitse noudattaa kontrastivaatimuksia, vaikka logossa olisi tekstiä.
  • Keskustele graafikon tai AD:n kanssa, tarvitaanko graafiseen ohjeistoon muutoksia värimääritysten tai käytettyjen väriyhdistelmien osalta.
  • Varmista, että tarvittavat muutokset viedään verkkopalvelun tyylimäärityksiin.
  • Kontrastivaatimukset koskevat tekstin ja taustan välistä tummuuseroa sekä myös sellaisia grafiikan osia, joita vaaditaan sisällön ymmärtämiseksi. Ota tämä huomioon esimerkiksi kuvaajissa ja infografiikassa.
  • 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. WCAG 2.1 -ohjeistus sisältää kriteerejä värien kontrasteista 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.

Muuta verkkosivu tai verkossa oleva asiakirja harmaasävyiseksi ja kokeile, saatko sisällöstä selvää. Tämä on hyvä keino selvittää, onko jonkin tiedon ymmärtäminen riippuvainen vain väristä. Voit hyödyntää erilaisia simulaattoreja.

WCAG 2.1 kriteeri 1.4.1 Värien käyttö

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.1 -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ä värikontrasti 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ä.

Värikontrasti 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.

Huomaa, että värikontrasti lasketaan ja numeerisia arvoja on noudatettava. Kontrasti saattaa vaikuttaa itselle miellyttävältä ja riittävältä, mutta WCAG-kriteeri ei kuitenkaan täyty. Tarvittaessa siis omia brändivärejä pitää tarvittaessa tummentaa tai vaalentaa.

Esimerkkejä kontrastisuhteista:

  • Tämän vihreän tekstin ja valkoisen taustan välinen kontrasti on 2,8:1.
  • Tämän tumman vihreän tekstin ja valkoisen taustan välinen kontrasti on 5,42:1.
  • Tässä mustan tekstin ja vihreän taustan välinen kontrasti on 7,48: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 Saavutettavuuskirjasto 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?

Värikontrastia 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.

Graafisten osien värikontrastit

WCAG-kriteerien tuorein version 2.1 sisältää myös vaatimuksia ei-tekstimuotoiselle sisällölle. Tämä tarkoittaa esimerkiksi painikkeiden ja niiden taustan välistä eroa tai vaikkapa tähtiä tai muita symboleja, joiden avulla käyttäjä voi antaa arvosanoja jollekin asialle. On tärkeää huomata, että vaatimus koskee myös kuvia, joiden havaitseminen on sisällön ymmärtämisen kannalta tärkeää.

Verkkosisällöissä olevissa kuvaajissa ja diagrammeissa pitäisi siis käyttää värejä, jotka erottuvat riittävästi viereisestä väristä ja taustasta. Esimerkkejä on W3C:n englanninkielisellä sivustolla Understanding non-text contrast.

WCAG-kriteeri 1.4.11 Ei-tekstimuotoisen sisällön kontrasti

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.