• Hyppää pääsisältöön
  • Hyppää alatunnisteeseen

Piirre

Piirre

  • Etusivu
  • Palvelut
    • Painavaa asiaa kevyessä muodossa
    • Niin että mummokin ymmärtää
    • Yrityksesi oma ”unikko”
    • Yritysten kehittämispalvelut
  • Referenssit
  • Yritys
  • Blogi
  • Yhteystiedot

Millaiset kuvat tukevat saavutettavuutta?

5.8.2019

Saavutettavuus on verkkomaailman esteettömyyttä1. Eli sitä, että mahdollisimman moni ihminen voi käyttää verkkopalvelua mahdollisimman helposti. Kuvat tukevat verkkopalvelun saavutettavuutta – kun tieto on esitetty erilaisilla tavoilla, jokainen käyttäjä voi valita itselleen sopivimman tavan hankkia tietoa. Kuvat sopivat esimerkiksi tiedon välittämiseen ihmisille, joilla on lukivaikeuksia, vieraalla kielellä asioivalle ihmiselle tai kiireiselle perheenisälle, jonka täytyy saada hahmotettua tieto nopeasti. Jotta kuvat tukevat saavutettavuutta hyvin, tulee niiden suunnittelussa huomioida muutamia asioita.

Riittävän kontrastin käyttäminen varmistaa, että heikkonäköinenkin näkee kuvan ja että kuvat näkyvät näytöltä myös auringon paisteessa. Verkkopalveluita varten on määritetty omat saavutettavuusvaatimuksensa, jotka koskevat julkishallinnon toimijoita. Näiden saavutettavuusvaatimusten mukaan, kuvien tekstisisällöissä normaalikokoisen tekstin kontrastin suhteessa taustaan pitää olla vähintään 4,5:1 ja ison tekstin osalta vähintään 3:1. Kontrastivaatimukset eivät koske kuvia, joissa ei ole tekstiä. Kontrastit on kuitenkin hyvä silti ottaa huomioon kuvan suunnittelussa, ja teksteille annetut vaatimukset antavat hyvän suunnan myös kuvitusten kontrasteihin.

Kuvien vierekkäisten värien kontrastisuhde on hyvä, kun se on vähintään 3:1.
Kuvituksissa on hyvä tarkistaa, että värien kontrastierot ovat riittävät. Kuvan sisällöllisesti tärkeissä kohdissa vierekkäisten värien kontrastisuhteen kannattaa olla vähintään 3:1. Esimerkkikuvan vasemman puoleisissa väripareissa kontrasti on riittävä.

Tekstien kontrastivaatimukset voi tarkistaa tämän työkalun avulla:

https://webaim.org/resources/contrastchecker/

Myös viivan paksuudet vaikuttavat kuvan selkeyteen. Esimerkiksi heikkonäköisen voi olla vaikea nähdä viivaa, jos se on liian ohut. Liian paksu viiva taas voi tehdä kuvasta epäselvän. Viivan paksuuksiin ei kuitenkaan ole mitään tiettyä yleispätevää ohjelukua, vaan se on tarkistettava tapauskohtaisesti silmämääräisesti.

Sopiva viivan paksuus tekee kuvasta saavutettavan. Kuvassa on sama kuvio esitetty kolmella eri paksuisella viivalla.
Heikkonäköinen ei välttämättä erota liian ohutta ääriviivaa. Liian paksu viiva taas saattaa tehdä kuvasta epäselvän. Kuhunkin tarkoitukseen sopiva viivanpaksuus löytyy kokeilemalla.

Kuvan saavutettavuuteen voi vaikuttaa myös värivalinnoilla ja värimäärää hallitsemalla. Kuvaa suunniteltaessa tulee tarkastella esimerkiksi sitä, millaisella värityksellä kuviot erottuvat parhaiten taustasta. Värejä voi käyttää erottuvuuden lisäksi myös katseen ohjaamiseen. Usein tummimmalla värillä esitetyt kohdat kiinnittävät huomion ensimmäiseksi. Kun kuvaa suunniteltaessa mietitään, miten katse kulkee kuvaa tarkasteltaessa, tulee kuvasta selkeälukuinen.

Värivalinnat vaikuttavat siihen, miten kuva erottuu taustasta. Kuvassa on sama hahmo piirretty kolmella eri värityksellä asian demostroimiseksi.
Värivalinnat vaikuttavat siihen, miten hyvin kuvio erottuu taustasta ja mihin katse kiinnittyy ensimmäisenä.

Kuvien yksityiskohdat vaikuttavat oleellisesti siihen, välittyykö haluttu viesti kuvan avulla. Yksityiskohdat voivat joko tehostaa viestiä tai viedä huomiota pois siitä. Yksityiskohtien määrään vaikuttaa erityisesti haluttu tunnelma, sillä yksityiskohdat luovat tunnelmaa. Isot määrät pieniä yksityiskohtia voivat tehdä kuvasta kuitenkin vilisevän, mikä ei sovellu kaikille kuvan käyttäjille. Yksityiskohtien käytössä kannattaa siis huomioida, että kuvaan tulee vastapainoksi riittävästi myös tasaisia alueita.

Esimerkkinä on piirretty sama hahmo kahdella eri tavalla. Toisessa on vähän yksityiskohtia ja toisessa paljon. Kuva esittää niiden viestinnällisen eron.
Kuvien suunnittelussa tulee huomioida millaiset yksityiskohdat tehostavat toivottua viestiä, ja mitkä yksityiskohdat taas vievät huomiota siltä.

Huomioimalla saavutettavuuden verkkosivujen ja kuva-aineistojen suunnittelussa, rakennamme yhdenvertaista yhteiskuntaa. Saavutettavuuden avulla tuemme siis sitä, että palvelut tulevat tasavertaisesti kaikkien saataville ja helpoksi käyttää. Kun tarvitset apua saavutettavien kuva-aineistojen suunnittelussa, ota yhteyttä tiimiimme: https://www.piirre.com/yhteystiedot/

 

Mirva

 

Huom. Tämän blogikirjoituksen kuvitusten pohjana on käytetty Aluehallintoviraston saavutettavuusvaatimukset.fi -verkkosivustolle suunnittelemiamme ohjeistuksia ja kuvituksia.

 

Lähteet:

  1. Saavutettavuus. Aluehallintovirasto. https://www.saavutettavuusvaatimukset.fi/saavutettavuus/

Footer

Soita meille

Kuopio
Jenni Kääriäinen
+358(0) 44 976 2869

Tampere
Venla Malkki
+358 (0) 44 239 7746

 

  • Facebook
  • Instagram
  • YouTube

Tietosuojaseloste

Tule käymään

Kuopion toimisto

Maaherrankatu 27, 3 krs
70100 Kuopio

 

Huom!

Ilmoitathan etukäteen, kun olet tulossa käymään, niin laitamme kahvin tippumaan.

Tilaa uutiskirje