Älä käytä pelkkää väriä tiedon esittämiseen Värin havaitseminen ei saa olla ainoa tapa, jonka avulla käyttäjä voi saada tarvitsemansa tiedon. Esimerkiksi ilmoitus jonkin kentän täytön epäonnistumisesta ei voi perustua vain siihen, että kenttä muuttuu punaiseksi. Käyttäjälle pitäisi antaa virheilmoitus myös tekstinä tai selkeänä symbolina. Värejä saa tietysti käyttää verkkosisällöissä ja värien avulla voi usein helpottaa asioiden erottumista. Jos esimerkiksi otsikoiden väri on erilainen kuin leipätekstin väri, otsikoiden muu ulkonäkö (esimerkiksi suurempi fontti ja lihavointi) kertoo värin lisäksi siitä, että kyseessä ei ole leipäteksti. Erityisen tarkkana värien käytössä pitää olla numeerista tietoa visualisoivissa kuvissa. Tiedon havaitseminen voi helposti riippua siitä, havaitseeko värit. Kuvaajien selittävät tekstit kannattaa sijoittaa järkevästi ja tarvittaessa käyttää erilaisia muotoja tai pintoja värien lisäksi. Esimerkki 1: Pylväsdiagrammi, jossa pylväiden värien selitys on vieressä Jos pylväsdiagrammia tarkasteleva henkilö ei erota värejä, esimerkiksi punaista ja vihreää, toisistaan, värien selitys ei auta. Esimerkissä 1 WCAG-kriteeri värien käytöstä ei täyty. Esimerkki 2: Pylväsdiagrammi, jossa pylvään selitys on näkyvissä pylvään alla Esimerkissä 2 ei ole väliä sillä erottaako esimerkiksi punaisen ja vihreän, koska pylväiden selitykset, vuosiluvut, ovat kunkin pylvään alla. Voit tarkistaa helposti, onko jonkin tiedon ymmärtäminen riippuvainen vain väristä. Muuta verkkosivu tai verkossa oleva asiakirja harmaasävyiseksi ja kokeile, saatko sisällöstä selvää. Kun värien välillä on riittävä tummuuskontrasti (vähintään 3:1), värien käyttöä koskevaa kriteeriä ei rikota ja tiedot erottuvat harmaasävyisestikin. Esimerkissä 3 on punainen, tummansininen ja vaaleanvihreä pylväs. Punaisen (#FA0000) ja tummansinisen (#000080) pylvään välillä on suhde 3,86:1 ja punaisen ja vaaleanvihreän (#00FF00) välillä suhde on 3,02:1. Tummansinisen ja vaaleanvihreän suhde on 11.66. Esimerkki 3. Pylväsdiagrammi, jossa eriväristen pylväiden välillä on selkeät tummuuserot. Lisää tietoa: WCAG 2.1 kriteeri 1.4.1 Värien käyttö Tekstin ja taustan välinen tummuuskontrasti Verkkosisällössä tekstin ja taustan välillä tulee olla riittävä tummuusero eli kontrasti. Riittävä kontrasti on tärkeä, jotta kaikki voivat saada selvää tekstistä. Kontrastista on hyötyä esimerkiksi kirkkaassa auringonpaisteessa. Verkkosisällön saavutettavuusohjeissa (WCAG) annetaan kriteerit tekstin ja taustan väliseen kontrastiin. Tekstin värin ja taustan värin välisen kontrastisuhteen pitää olla vähintään 4,5:1. Jos teksti on suurikokoista (vähintään 18 pistettä tai lihavoitu teksti vähintään 14 pistettä), kontrastin pitää olla vähintään 3:1. (Lisää tietoa tekstikoon määrittelystä englanniksi.) Kontrastit 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ä. Laske kontrastisuhde WCAG:n kontrastikriteerejä on arvosteltu sen vuoksi, että laskennallinen arvo ei aina tunnu vastaavan kokemusta, joka verkkosisällön käyttäjällä on. Jokin väriyhdistelmä voi vaikuttaa selkeältä, mutta kontrastisuhde on liian pieni. Kontrastin laskukaava ei ota huomioon sitä, onko tausta tumma ja teksti vaalea tai toisinpäin vaikka havaintokokemuksessa on eroa sillä kummin päin värit ovat. Jotta verkkosisällön saavutettavuusvaatimukset täyttyisivät, on kuitenkin käytettävä WCAG 2.1 -kriteeristön laskentamallia. Suurin mahdollinen kontrasti on mustan (HEX: #000000) ja valkoisen (#FFFFFF) välillä 21:1. Esimerkkejä muista kontrastisuhteista: Tämän vihreän tekstin ja valkoisen taustan välinen kontrasti on 2,8:1. (Vihreä #43B02A) Tämän tumman vihreän tekstin ja valkoisen taustan välinen kontrasti on 5,42:1. (Vihreä #007864) Tässä mustan tekstin ja vihreän taustan välinen kontrasti on 7,48:1. (Vihreä #43B02A) Tässäkin vihreän tekstin ja mustan taustan välinen kontrasti on 7,48:1. (Vihreä #43B02A) Voit itse laskea kontrastisuhteen WebAIM.org-sivuston Contrast Checker -laskurin avulla. Laskemiseen tarvitset värien HEX-, RGB- tai HSL-arvot. Jos verkkosisällössä linkkitekstejä ei ole alleviivattu, pitää kontrastin leipätekstin ja linkkitekstien välillä olla vähintään 3:1. WebAIM.orgin sivuilla on erillinen laskuri tätä varten: Link Contrast Checker. Huomaa, että kontrastivaatimus ei koske logoja, mutta muissa tekstiä esittävissä kuvissa kontrastivaatimus pitää ottaa huomioon. Muista siis varmistaa tekstin ja taustan välinen kontrasti, kun tuotat tai käytät infografiikkaa ja erilaisia kaavioita. Myös verkkosivujen painikkeiden teksteissä ja taustaväreissä on tärkeää varmistaa riittävä kontrasti. WCAG-kriteeri 1.4.3 Kontrasti (minimi) Graafisten osien väliset kontrastit WCAG 2.1 sisältää kontrastivaatimuksia myös 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. Vaatimus koskee myös kaavioita tai kuvaajia, joiden havaitseminen on sisällön ymmärtämisen kannalta tärkeää. WCAG-kriteeri 1.4.11 Ei-tekstimuotoisen sisällön kontrasti koskee kaavioiden vierekkäisiä värejä, esimerkiksi ympyrädiagrammin vierekkäisiä lohkoja. WCAG-kriteeri 1.4.11 Ei-tekstimuotoisen sisällön kontrasti Esimerkkejä värejä koskevia vaatimusten huomioon ottamisesta Jos diagrammin värien havaitseminen on tärkeää diagrammin ymmärtämiseksi, kahden vierekkäisen värin välinen kontrastisuhde pitäisi olla 3:1. Esimerkki 4: Ympyrädiagrammi, jossa lohkoilla ei ole eriväristä reunusta Esimerkissä 4 pitää laskea kontrastisuhde vierekkäisten lohkojen värien välillä sekä jokaisen lohkon suhde taustan valkoiseen väriin. Esimerkiksi sinisen (#3757C6) ja vihreän (#5CB946) välinen kontrasti on vain 2,53:1 ja vihreän suhde valkoiseen taustaan on 2,47:1. Diagrammi ei siis täytä WCAG-kriteeriä 1.4.11. Esimerkki 5: Ympyrädiagrammi, joissa lohkoilla on musta reunaviiva Koska esimerkissä 5 jokaisen ympyrädiagrammin lohkojen ympärillä on musta kehys, pitää laskea kontrasti vain lohkojen värin ja mustan välillä. Tummemmatkin lohkot sininen (#3757C6) ja ruskea (#7A653E) täyttävät kontrastivaatimuksen (sinisen ja mustan suhde on 3,34:1, ruskean ja mustan suhde on 3,75:1). Tämä diagrammi täyttää WCAG-kriteerin 1.4.11. Huomaa, että prosenttilukujen näyttäminen auttaa sellaisia lukijoita, joilla voi olla vaikea erottaa toisistaan tummia sinistä ja ruskeaa lohkoa. Musta reunuksen käyttäminen diagrammin osien välillä on usein hyvä keino varmistaa riittävä kontrasti. Esimerkissä 6 on pylväsdiagrammin pylväiden ympärillä musta reuna. Pylväiden yllä on myös annettu pylvään edustama arvo. Pylväiden selitys ei mahtuisi vaakasuorana tekstinä pylvään kohdalle, joten selityksessä on käytetty apuna kirjaimia. Huomaa, että tämä ratkaisu toimii vaikka värejä ei erottaisi toisistaan. Esimerkki 6: Pylväsdiagrammi, jossa pylväiden ympärillä on musta reuna. Tietoa esittävissä kuvissa on siis otettava huomioon kriteeri värien käytöstä (WCAG 1.4.1), tekstin ja taustan välinen kontrastivaatimus (WCAG 1.4.3) ja ei-tekstimuotoisen sisällön kontrastivaatimus kuvioissa (WCAG 1.4.11). Näiden kriteerien lisäksi pitää vielä varmistaa kuvien vaihtoehtoisia tekstejä koskevan kriteerin (WCAG 1.1.1) täyttyminen. Tämä sivu on päivitetty viimeksi 6.5.2025.