Ä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 muun ulkonäön (suurempi fontti ja lihavointi) perusteella saa tiedon siitä, että kyseessä ei ole leipäteksti.
Erityisen tarkkana värien käytössä pitää olla numeerista tietoa visualisoivissa kuvissa. Kuvaajien selittävät tekstit kannattaa sijoittaa järkevästi ja tarvittaessa käyttää erilaisia muotoja tai pintoja värien lisäksi.
Jos pylväsdiagrammia tarkasteleva henkilö ei erota värejä, esimerkiksi punaista ja vihreää, toisistaan, värien selitys ei auta. Tässä esimerkissä WCAG-kriteeri värien käytöstä ei täyty.
Tässä esimerkissä 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ää. Voit hyödyntää erilaisia simulaattoreja.
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.)
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ä.
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ärikontrastit
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 kontrastisuhte pitäisi olla 3:1.
Tässä esimerkissä 3 pitäisi 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.
Koska esimerkissä 4 jokaisen ympyrädiagrammin lohkojen ympärillä on musta kehys, pitää laskea kontrasti vain lohkojen ja mustan värin välillä. Tummemmatkin lohkot sininen (#3757C6) ja ruskea (#7A653E) täyttävät kontrastivaatimuksen (sinisen ja mustan suhde on 3,34:1 ja ruskean ja mustan suhde on 3,75:1). Tämä diagrammi täyttää WCAG-kriteerin 1.4.11.
Musta reunuksen käyttäminen diagrammin osien välillä on usein hyvä keino varmistaa riittävä kontrasti.
Esimerkissä 5 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.
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 pitää vielä varmistaa kuvien vaihtoehtoisia tekstejä koskevan kriteerin (WCAG 1.1.1) täyttyminen.
Tämä sivu on päivitetty viimeksi 16.2.2024.