1. Etusivu
  2.  » 
  3. Ajankohtaista
  4.  » Näin parannat verkkopalvelun visuaalista ilmettä saavutettavasti – 3 ohjetta

Näin parannat verkkopalvelun visuaalista ilmettä saavutettavasti – 3 ohjetta

Suomessa arviolta yli miljoonalla ihmisellä on vaikeuksia verkkopalveluiden käyttämisessä. Yksi keskeinen syy on verkkopalvelun epäsaavutettava ilme. Verkkopalveluiden visuaalinen ilme on kuitenkin parannettavissa muutamilla käytännöllisillä ja melko yksinkertaisilla keinoilla, kirjoittaa Avaavan saavutettavuusasiantuntija Reetta Eiskonen.

Tarvetta saavutettaville verkkopalveluille on runsaasti ja kasvavissa määrin. Esimerkiksi alati vanheneva väestörakenne tuo mukanaan lisääntyvissä määrin muun muassa ikääntymisestä johtuvia sairauksia ja vammoja, kuten näön ongelmia. WCAG 2.1 Verkkosisällön saavutettavuusohjeet antavat kattavan joukon ohjeita, joita noudattamalla verkkopalveluista saadaan käytettävämmät ja saavutettavammat mahdollisimman laajalle joukolle ihmisiä.

“Suomessa arviolta yli miljoonalla ihmisellä on vaikeuksia verkkopalveluiden käyttämisessä.”

Saavutettavuusohjeet tuovat kuitenkin joitain rajoitteita verkkopalveluiden ulkonäölle. Verkkosisällön värimaailma tulee toteuttaa niin, että teksti ja käyttöliittymäelementit erottuvat riittävästi taustastaan. Lisäksi muun muassa linkeille ja toiminnallisille elementeille on kattava joukko ohjeita.

Ensiajatus saattaakin olla, että saavutettavuusohjeet vaikuttavat negatiivisesti verkkopalveluiden visuaaliseen ulkonäköön. Mutta tämä ajatus saattaa usein osoittautua virheelliseksi, sillä tutkimusten mukaan (mm. Reber, Schwarz & Winkielman, 2004) kontrasteja ja selkeyttä pidetään yleensä esteettisesti miellyttävinä.

Omassa pro gradu -tutkimuksessani (Reetta Eiskonen, 2022, linkki tutkimukseen) vertailin visuaalisesti saavutettavien ja ei-saavutettavien verkkosivujen visuaalista miellyttävyyttä. Tutkimuksessa havaittiin, että saavutettavuusvaatimusten mukaan toteutetut kuvat verkkosivuilta koettiin aivan yhtä esteettisesti miellyttävinä kuin niiden verrokkiversiot, joissa oli useita visuaalisia saavutettavuuspuutteita.

“Kontrasteja ja selkeyttä pidetään yleensä esteettisesti miellyttävinä.”

Verkkopalvelun visuaaliseen saavutettavuuteen siis pitää ja ehdottomasti myös kannattaa kiinnittää huomiota. Seuraavassa kolme ohjetta, kuinka verkkopalvelun visuaalista ilmettä voi kohentaa saavutettavasti.

Kolme ohjetta visuaalisen ilmeen saavutettavuuteen

OHJE 1: Tekstin ja taustan kontrastit

Visuaaliseen ilmeeseen vaikuttanee eniten WCAG 2.1 kriteeri 1.4.3 Kontrastit. Se edellyttää, että tekstien tulee erottua riittävästi taustastaan. Kriteerin mukaan normaalikokoisen tekstin ja sen taustan kontrastisuhde tulee olla vähintään 4,5:1 ja isokokoisen tekstin (vähintään 14 pt =18.5 px lihavoituna) vähintään 3:1.

Toisinaan voi olla tarvetta korjailla niin taustan kuin tekstienkin sävyjä, jotta vaadittuihin tasoihin pääsee, mutta usein tämä on toteutettavissa melko pienillä muutoksilla.

Kannattaa myös muistaa, että selkeämpi erottuvuus ja havaittavuus mielletään yleensä myös visuaalisesti miellyttävänä!

KUVA 1: Vasemmanpuoleisessa kuvassa v erkkosivulla on beigen, vaaleansinisen ja hiekan sävyjä, joiden keskinäinen kontrastitaso on puutteellinen. Oikeanpuoleiseen versioon kontrastit on korjattu vastaamaan vähintään AA-tason vaatimuksia.

Usein myös yrityksen brändivärit saattavat tuottaa päänvaivaa. Kontrastivaatimukset eivät koske logoja, mutta teemavärillä muotoillut tekstit, painikkeet, kuvakkeet ja linkit tulisi kuitenkin saada sovitettua saavutettavuusvaatimusten mukaisiksi.

Seuraavan esimerkikkitapauksen oranssi-valkoinen väri on paljon käytetty, mutta samalla kovinkin haastava väriyhdistelmä. Kuvassa on kirkkaan oranssi painike, jolla on valkoinen normaalikokoinen (14 px) teksti. Kontrasti on 3:1, eli riittämätön normaalikokoiselle tekstille (oikea on 4,5:1).

Kuva 2: Painike, jonka oranssin värisen (#E47702) taustan ja valkoisen (#FFFFFF) tekstin välinen kontrastisuhde on 3:1, kun sen pitäisi olla normaalikokoisella tekstillä vähintään 4,5:1.

Jotta painike saadaan vastaamaan kontrastivaatimuksia, ja jotta se pysyisi silti teemavärin mukaisena, on olemassa muutamia eri korjausvaihtoehtoja:

Ensimmäisenä tulee mieleen etsiä mahdollisimman lähellä oleva oranssin sävy, jonka kontrastisuhde on vähintään 4,5:1. Kuten mainittu, oranssi-valkoinen on haastava väripari, eikä tällä kombinaatiolla aivan lähellä olevaa väriä tahdo löytyä. Seuraavassa esimerkkikuvassa kuitenkin kontrastivaatimus täyttyy ja teksti on helpommin luettavissa.

Kuva 3: Vasemmalla puolella on saavutettavammaksi muokattu painike, jonka oranssin taustan väriksi on valittu tummempi oranssi sävy (#C15807). Oikealla puolella on alkuperäinen painike.

Toinen mahdollisuus on pelata tekstin reunuksien kanssa. Seuraavassa esimerkkitapauksessa on säilytetty edelleen sama oranssi väri ja reunustettu valkoinen teksti tummeman oranssillä värillä. Näin valkoisen tekstin ympäröi tummempi sävy. Vaikka ratkaisu kuulostaa jokseenkin purkkaviritysratkaisulta, on teksti silti huomattavasti erottuvampi ja täten myös oikeasti saavutettavampi.

Kuva 4: Valkoinen teksti on reunustettu 1px levyisellä tummemman oranssilla (#C15807) värillä. Oikealla puolella on alkuperäinen painike.

Kolmas vaihtoehto on suurentaa tekstin kokoa. WCAG-kriteerin 1.4.3 mukaan normaalikokoinen teksti tulee olla vähintään 4,5:1 kontrastitasoiltaan ja isokokoinen tekstin (vähintään 14 pt =18.5 px lihavoituna) vähintään 3:1. Eli jos painikkeen tekstin kokoa suurennetaan ja lihavoidaan, olemassa oleva kontrastitaso katsotaan riittäväksi.

Kuva 5: Valkoinen teksti on suurennettu 18.5 px kokoon. Se oli jo lähtöjään lihavoitu. Nyt kontrastitaso on riittävä; 3:1. Oikealla puolella on alkuperäinen painike.

OHJE 2: Ei tekstejä rauhattomien päälle

Jotta tekstien kontrastitasot ovat riittävät ja teksti olisi selkeää ja helppolukuista, tulee kiinnittää huomiota tekstin taustaan. Tekstejä ei kannata lisätä kuvien päälle, jotta kontrastitasot ovat kaikkialla teksteissä riittävät.

Jos teksti välttämättä kuitenkin halutaan sijoittaa kuvan päälle, kannattaa tekstin alle lisätä suodatin, joka luo yksivärisemmän ja kontrasteiltaan riittävän pohjan tekstille. Tällöin tulee myös huomioida, että suodattimen tulee mukautua tekstin koon mukaisesti, jotta kontrastitaso säilyy myös erikokoisilla näytöillä ja palvelua zoomatessa.

Kuva 6: Vasemmanpuoleisessa esimerkkikuvassa teksti ja painike on sijoitettu rauhattoman kuvan päälle. Kontrastitasot eivät vastaa WCAG vaatimuksia. Oikeanpuoleisessa esimerkissä tekstiä on siirretty hieman alemmas kuvan päätapahtuman päältä pois. Tekstin taustalle on myös lisätty tumma, osin läpinäkyvä suodatin, joka tuo tasaisemman taustan valkoiselle tekstille. Kontrastitasot säilyvät joka kohdassa riittävinä ja tekstiä on huomattavasti helpompi lukea.

OHJE 3: Kiinnitä huomiota interaktiivisten elementtien erottuvuuteen ja nimilappuihin

Tekstin ja taustan kontrastivaatimusten lisäksi toiminnallisiin elementteihin liittyy erilaisia saavutettavuusvaatimuksia. Toiminnallisia elementtejä ovat esimerkiksi linkit, painikkeet ja lomakekentät. Näiden elementtien ulkonäköön vaikuttavat jo aiemmin mainittu kriteeri 1.4.3, joka vaikuttaa tekstin ja sen taustan kontrastitasoihin.

Toiminnallisia elementtejä koskevat myös kriteerit 1.4.1 Värien käyttö ja 1.4.11 Ei-tekstimuotoisen sisällön kontrasti. Lisäksi kriteeri 3.3.2 Nimilaput ja ohjeet edellyttää, että lomakekentillä ja muilla syötettä vaativilla elementeillä, kuten valikoilla, valintanapeilla ja yhdistelmäruuduilla tulee olla myös näkyvät nimilaput. Ei siis riitä, että lomakentässä on vain hailakka placeholder kertomassa mitä siihen tulisi kirjoittaa.

Tämä tarkoittaa, että esimerkiksi linkkien ja painikkeiden tekstien tulee täyttää sama kontrastivaatimus 4,5:1, tai 3:1 suurikokoisella tekstillä. Lisäksi kriteeri 1.4.1 värien käyttö edellyttää, että väri ei saa olla ainut informaatiota välittävä keino. Saman kriteerin mukaan tekstin seassa olevat linkit tulisi siis pystyä erottamaan ympäröivästä tekstistä, vaikka henkilö olisi värisokea. Linkin ja ympäröivän tekstin kontrastiero tulee olla joko riittävän suuri (vähintään 3:1), tai linkin tulee erottua muulla tavoin, kuten alleviivauksella tai lihavoinnilla.

Alla olevassa kuvassa vasemmalla puolella on sininen linkki tekstipätkän seassa. Harmaa teksti tummalla pohjalla on jo itsessään heikko kontrastitasoiltaan. Lisäksi sinisen linkin kontrasti suhteessa tummaan taustaan on riittämätön ja linkin ja leipätekstin välinen kontrastikin on riittämätön. Oikeanpuoleisessa kuvassa on sama teksti muutettu värittömäksi. Linkkiä on nyt hyvin vaikea erottaa muusta tekstistä. 

Kuva 7: Vasemmanpuoleisessa kuvassa on tummanharmaalla taustalla vaaleanharmaa leipäteksti, jonka seassa on sininen linkkiteksti, ilman muuta erityistä muotoilua. Oikealla on sama kuva mustavalkoisena versiona. Linkkiä on hyvin vaikea erottaa muusta tekstistä.

Seuraavassa esimerkkikuvassa leipäteksi ja linkki erottuvat taustastaan riittävästi ja linkki erottuu muusta tekstistä myös alleviivauksen avulla. Oikeanpuoleisessa musta-valkoisessa versiossa linkki on edelleen hyvin erottuva.

Kuva 8: Vasemmanpuoleisessa kuvassa on sama teksti kuin aiemmassakin esimerkissä. Tausta on edelleen sama tummanharmaa, jonka päällä oleva leipäteksti on muutettu vaaleammaksi, jolloin tekstin ja taustan kontrastitasot ovat yli 4,5:1. Tekstin seassa oleva sininen linkkiteksti on myös muutettu hieman vaaleamman siniseksi, jotta se erottuu myös riittävästi taustastaan. Lisäksi se on alleviivattu. Oikealla on sama kuva mustavalkoisena versiona. Linkki erottuu nyt muusta tekstistä paljon selkeämmin.

Seuraava esimerkki liittyy ei-tekstuaalisen sisällön saavutettavuuteen. Käyttöliittymäelementtien ja graafisten objektien tulee erottua taustastaan vähintään 3:1 kontrastierolla. Tämä tarkoittaa sitä, että Kuvakkeelliset painikkeet, lomakekentät, valintanapit ja valintakytkimet tulee olla riittävän erottuvia.

Kuvaesimerkin lomakekenttien värikontrastien tulisi siis olla vierestä taustaa vasten vähintään 3:1, tai ne tulisi reunustaa. Lisäksi Ohjepainike erottuu heikosti ja tekstikentiltä puuttuu näkyvät nimilaput.

Kuva 9: Valkoisten tekstikenttien kontrastisuhde harmaata taustaa nähden on riittämätön; vain 1,4:1.

Kuvaesimerkin lomakekenttien värikontrastien tulisi siis olla vierestä taustaa vasten vähintään 3:1, tai ne tulisi reunustaa. Lisäksi Ohjepainike erottuu heikosti ja tekstikentiltä puuttuu näkyvät nimilaput.

Kuva 10: Nyt lomakekenttä on jo huomattavasti saavutettavampi. Valkoisten lomakekenttien ympärille on lisätty tummanharmaat reunat ja Ohjepainikkeen väriä on myös tummennettu. Tekstikenttien yläpuolelle on myös lisätty nimilaput, jolloin ohje tekstikenttien täyttämisestä ei perustu vain placeholdereihin, jotka häviävät, kun kenttää aletaan täyttämään. Lähetä-painikkeessa ei tarvitse saavutettavuuskriteerien mukaan olla reunoja, tai väriltään taustaan nähden erityisen erottuva, jos painikkeessa oleva teksti, tai graafinen objekti erottuvat painikkeen taustaväriin nähden riittävästi. Painikkeen reunustaminen tai korostaminen lisäävät kuitenkin selkeästi erottuvuutta, ja ymmärrettävyyttä, joten painikkeen korostaminen on erittäin suositeltavaa.

Kysy lisää Reetalta!

Pian julkaistava WCAG 2.2 tuonee mukanaan uusia kriteereitä, jotka myös vaikuttavat visualiseen muotoiluun liittyviin vaatimuksiin. Se onkin sitten toinen juttu, johon on hyvä palata myöhemmin, kun uudet kriteerit on viimein julkistettu.

Ole minuun suoraan yhteydessä ja kysy lisää saavutettavuuden vaikutuksista verkkopalveluiden visuaaliseen ilmeeseen. Autan mielelläni!

Reetta Eiskonen, FM, saavutettavuusasiantuntija

Puhelin 050 371 7722

Sähköposti reetta.eiskonen@avaava.fi


Lähteet:

Eiskonen, R. (2022). Saavutettavuuden vaikutus verkkopalveluiden esteettiseen miellyttävyyteen. [pro gradu -tutkielma, Jyväskylän yliopisto]. JYX-julkaisuarkisto. https://jyx.jyu.fi/handle/123456789/81460

Reber, R., Schwarz, N. & Winkielman, P. (2004). Processing fluency and aesthetic pleasure: Is beauty in the perceiver’s processing experience? Personality and social psychology review, 8(4), 364-382. https://doi.org/10.1207/s15327957pspr0804_3 .

Blogiarkisto