Kuvien ulkonäkö vaikuttaa siihen, kuinka helppoa on havaita kuvissa olevat tiedot. Parhaimmillaan kuvat ovat saavutettavia myös niille lukijoille, joiden näkökyky tai värinäkö on heikko. Erityisesti tietoa visualisoivia kuvia tuotettaessa ja valitessa pitäisi ottaa huomioon saavutettavuusvaatimukset.
Tässä osiossa esitellään Verkkosisällön saavutettavuusohjeiden eli WCAG-ohjeiden 2.1-versiossa olevat kuvia koskevat saavutettavuusvaatimukset. Vaatimukset koskevat etenkin tietoa visualisoivia kuvia. Niitä ei voi soveltaa valokuviin. Väreihin liittyviä vaatimuksia ei voi myöskään tarvitse soveltaa sellaisiin kuviin, joissa värien käytöllä on vakiintunut merkitys, kuten esimerkiksi maastokartoissa, lämpökartoissa tai vaakunoiden ja lippujen kuvissa.
Muista, että vaikka kuvissa noudatetaan niitä koskevia vaatimuksia, kuville pitää myös antaa tekstivastine.
Tietoa tekstivastineista on osiossa Kuvien tekstivastineet.
Tekstiä esittävät kuvat
Vältä tekstiä esittäviä kuvia. Älä siis lisää e-kirjaan esimerkiksi taulukkoa kuvana, vaan tee taulukko sopivien taulukkomerkkausten avulla siten, että taulukon rivit ja sarakkeet on määritelty. Jos e-kirjassa on taulukon kuva, kuvalle on annettava tekstivastine. Koska käytännössä taulukon sisältö on kuitenkin annettava tekstinä, on järkevämpää tehdä alusta lähtien taulukko saavutettavana. Lisää tietoa taulukoiden tuottamisesta epub-kirjaan englanniksi Daisy Knowledge Base -sivustolla.
Tekstin esittäminen kuvana on sallittua silloin, kun tekstin esitystapa on olennainen. Tällaisia tapauksia ovat esimerkiksi logot tai tiettyä fonttityyppiä esittävät kuvat.
WCAG-kriteeri 1.4.5 Tekstiä esittävät kuvat
Tekstin erottuvuus kuvissa
Usein kaaviot ja mallit, jotka esittävät prosesseja, aikajanoja tai organisaatioiden rakenteita, sisältävät tekstiä. Myös infografiikassa tekstit ovat olennainen osa kuvaa. Tällaisten tekstiä sisältävien kuvien kohdalla on tärkeää varmistaa se, että teksti erottuu taustastaan hyvin eli tekstin ja taustan välillä on tarpeeksi suuri kontrastiero. WCAG-kriteereissä määritellään pienin sallittu kontrastiero. Suurin mahdollinen kontrastisuhde on mustan ja valkoisen välillä 21:1.
- Normaalin tai pienen tekstin ja sen taustan välillä on oltava kontrastisuhde, joka on vähintään 4,5:1.
- Suuren tekstin eli vähintään 18 pisteen kokoisen tekstin tai lihavoituna 14 pisteen kokoisen tekstin ja taustan välillä on kontrastisuhteen on oltava vähintään 3:1.
Esimerkki 1: Tämän tekstin koko on 14 pistettä ja värin HEX-arvo 9B51E0. Kontrastisuhde valkoiseen taustaan on 4,51:1.
Esimerkki 2: Tämän tekstin koko on 18 pistettä ja värin HEX-arvo on 9445DE ja taustan HEX on 8ED1FC. Kontrastisuhde tekstin ja taustan välillä on 3,04:1.
Kun tekstin taustalla on tasainen väri, tekstin ja taustan välisen kontrastisuhteen voi laskea helposti esimerkiksi WebAIM.orgin Contrast Checkerin avulla. Verkkosivulla olevaan englanninkieliseen työkaluun syötetään tekstin ja taustan värit HEX-, RGB- tai HSL-arvona ja työkalu laskee kontrastisuhteen sekä kertoo, onko suhde vaatimusten mukainen. Jos kontrastisuhde on liian pieni, voi työkalussa säätää värejä tummemmiksi tai vaaleammiksi, kunnes saadaan riittävä kontrastisuhde. Työkalu ilmoittaa uudet värien arvot.
Tekstin ja sen taustan välinen kontrastivaatimus koskee myös kirjan leipätekstiä. Kun epub-kirjan ulkoasu on määritelty hyvin CSS-tyylien avulla, käyttäjä voi vaikuttaa leipätekstin väriin lukuohjelman asetuksia säätämällä. Kuviin ja niissä oleviin teksteihin eivät lukuohjelman säädöt vaikuta, joten e-kirjan kuvien tuottajien on huolehdittava kuvissa olevien tekstien kontrastista.
WCAG-kriteeri 1.4.3 Kontrasti (minimi)
Tiedon esittäminen värien avulla
WCAG-kriteerien mukaan väri ei saa olla ainoa keino välittää tietoa. Tämä on usein helppo testata muuttamalla kuva harmaasävyiseksi. Jos kuvan ymmärtää harmaasävyisenä, värit eivät ole ainoa keino välittää tietoa. Mutta jos esimerkiksi pylväsdiagrammissa eriväristen pylväiden tummuus on lähellä toisiaan, pylväitä ei välttämättä erota toisistaan harmaasävyisenä.
Värien käytössä on hyvä ottaa myös huomioon värisokeus ja välttää tiedon esittämistä luottaen siihen, että lukija erottaa toisistaan etenkin punaisen ja vihreän. On olemassa värisokeuden eri muotoja simuloivia ohjelmia, mutta näiden ohjelmien tuloksiin ei voi täysin luottaa, koska värinäön poikkeukset ovat yksilöllisiä. Paras keino varmistaa se, että väri ei ole ainoa keino välittää tietoa, on hyödyntää värien erilaisia tummuuseroja ja liittää kuvioihin ja kaavioihin erottamista helpottavia symboleita tai kuvioita.
Alla on esimerkki kuviosta, jossa palkkikaavion eriväristen osien avulla kuvataan esiintymisten prosenttiosuuksia eri ajanjaksoilla. Palkkikaavioiden värit selostetaan kuvion alla. Kuvion tulkitseminen edellyttää värien havaitsemista, koska selityskuviot eivät ole yhdessä rivissä samassa järjestyksessä kuin värit palkeissa, vaan kahdessa rivissä. Kuvion alla oleva selitysosio voidaan lukea riveittäin tai sarakkeittain. Jos kirjan lukija ei erota toisistaan oranssia ja vihertävää sävyä, hän ei voi tietää kumpi keskimmäisistä palkin osuuksista esittää esiintymistä ”Kerran, pari kuukaudessa” ja kumpi ”Muutamia kertoja vuodessa”. (Esimerkin kuvio ei täytä saavutettavuusvaatimuksia.)
Lähde: Esa Reunanen & Risto Kunelius, Medioitunut valta ja politiikan paluu. Kyselytutkimus suomalaispäättäjien suhteesta mediaan 2009 ja 2019. Tampere University Press 2021, s. 54. (CC BY-NC-ND 4.0)
Alla on samasta teoksesta toinen esimerkki, jossa värien selostus on samassa järjestyksessä kuin värit palkkien osissa. Tämä on parempi ratkaisu kuin edellä, mutta tässä tulkintaa voi vaikeuttaa se, että kaikissa palkeissa ei ole neljää eri väriä, joten kuvion ymmärtäminen edellyttää, että lukija erottaisi vihreän ja punaisen sävyt.
Lähde: Lähde: Esa Reunanen & Risto Kunelius, Medioitunut valta ja politiikan paluu. Kyselytutkimus suomalaispäättäjien suhteesta mediaan 2009 ja 2019. Tampere University Press 2021, s. 46. (CC BY-NC-ND 4.0)
Kolmas esimerkki on harmaasävyisestä palkkikaavioista, jossa palkkien osat ja osien selitykset erottuvat toisistaan ilman, että tiettyä väriä (esimerkiksi punaista tai vihreää) pitäisi voida havaita. Kaavio olisi saavutettava, jos tummimmassa palkin osassa lukumäärissä olisi mustien numeroiden sijaan käytetty valkoisia numeroita, jolloin tekstin kontrasti suhde taustaan eli palkin väriin olisi riittävä.
Lähde: Kuhanen, J et al. 2023. Kehitysyhteistyön mieli ja mielettömyys: Suomalaiset Apumaassa 1965–2000. Helsinki: Finnish Literature Society. DOI: https://doi.org/10.21435/ht.290. s. 42
Neljännessä esimerkissä kuviossa on käytetty pintakuviointia, joka auttaa havainnoimaan kaavion osia. Näin kuvion osien erottaminen toisistaan eri riipu värisävyn huomaamisesta.
Lähde: Antila, J. 2014. Kansankirkko ristipaineessa: Suomen luterilainen kirkolliskokous 1974-2011. Helsinki: Finnish Literature Society. DOI: https://doi.org/10.21435/skst.1407, s. 123.
Vierekkäisten värien kontrasti
Tietoa esittävissä kuvissa pitää varmistaa myös vierekkäisten värien välinen kontrastisuhde. Tämä tarkoittaa sitä, että esimerkiksi ympyrädiagrammissa vierekkäisten lohkojen värien välillä pitäisi kontrastisuhteen olla vähintään 3:1. Koska kontrastisuhde lasketaan vierekkäisten värien välillä, voidaan esimerkiksi ympyräkaaviossa käyttää lohkojen ympärillä tummaa rajausta, jolloin kontrastisuhde lasketaan lohkon värin ja tumman värin välillä. Tämä antaa mahdollisuuksia käyttää vaaleita värejä vierekkäisissä lohkoissa.
Värejä ja kontrasteja koskevat vaatimukset liittyvät etenkin numeerisen tiedon visualisointiin erilaisten diagrammien ja kuvaajien avulla. Infografiikkaa suunniteltaessa pitää ottaa huomioon monta eri vaatimusta:
- Tekstin ja sen taustan välillä pitää olla riittävä kontrastisuhde
WCAG-kriteeri 1.4.3 Kontrasti (minimi) - Väri ei saa olla ainoa keino välittää tietoa
WCAG-kriteeri 1.4.1 Värien käyttö - Vierekkäisten värien välillä pitää olla riittävä kontrastisuhde sellaisissa graafisissa esityksissä, joiden havaitseminen vaikuttaa esityksen ymmärtämiseen
WCAG-kriteeri 1.4.1 Ei-tekstimuotoisen sisällön kontrasti
Informatiivisia kuvia ja niiden saavutettavuutta on käsitelty hyvin Carie Fisherin englanninkielisessä artikkelissa Accessible Images For When They Matter Most (Smashing Magazine, May 15 2020).
Päivitetty viimeksi 15.3.2024.