Useammalla verkkopalvelusi käyttäjällä on värisokeus kuin IE11

Tiesitkö, että jopa 8 % kaikista miehistä on värisokeita? Ainakin minun mielestäni luku oli yllättävän korkea. Kyse on hyvin sukupuolisidonnaisesta tilasta, sillä naisista värisokeita on vain 0,5 %. Jos tarkkoja ollaan, termi värisokea on hieman harhaanjohtava. Täydellistä kyvyttömyyttä nähdä värejä esiintyy melko harvalla ihmisellä. Täysin värisokeat näkevät kaiken mustavalkoisena. Lisäksi heillä on usein muitakin näköön liittyviä ongelmia.

Puhekielessä värisokeudella tarkoitetaan usein värinäön heikkoutta. Tämä voi tarkoittaa esimerkiksi sitä, että henkilö näkee vihreän ja punaisen sävyt eri tavalla kuin terveen näön omaava ihminen. Yleisin värisokeuden muoto on vähentynyt herkkyys vihreälle valolle. Sitä esiintyy noin viidellä prosentilla miehistä.

Miksi värisokeus sitten pitäisi ottaa huomioon suunnittelussa? Otetaan esimerkiksi vaikka Lontoon metrokartta. Kuvan oikealla puolella näet miten heikon vihernäön omaavat sen näkevät. Metrolinjat on selkeästi vaikeampi erottaa toisistaan.

Älä esitä informaatiota pelkästään värin avulla

Verkkopalvelun suunnittelussa väreillä ilmaistaan usein esimerkiksi erilaisten ilmoitusten ja viestien tyyppiä. Onnistuneen tallennuksen jälkeen voidaan käyttäjälle näyttää vihreällä taustalla oleva viesti. Kun taas virheen sattuessa viestin tausta on punainen. Värisokeille pelkkä väri ei tuo lisäinformaatiota, ja siksi viestilaatikkoon tulisikin lisätä myös esimerkiksi kuvake kuvaamaan toiminnan onnistumista tai epäonnistumista.

Ohessa Bootstrap css-framworkin viestejä nähtynä vihersokean silmin. Värin tuoma lisäinformaatio katoaa, ja käyttäjä joutuu luottamaan pelkästään tekstiin.

Ikonin lisääminen helpottaa selkeästi viestin tyypin havainnointia.

Monesti olen törmännyt myös verkkokaupoissa tuotteiden myymäläsaatavuuden esitystapaan, jossa saatavuutta ilmaistaan vihreällä, keltaisella tai punaisella pallolla. Tämä ei ole saavutettava tapa ilmaista informaatiota.

Vihersokeiden on lähes mahdoton tietää tästä taulukosta, mistä myymälästä tuote on loppu ja mistä sitä voisi lähteä ostamaan.

Miten informaatiota sitten pitäisi esittää, jotta se palvelisi kaikkia käyttäjiä? Saavutettava värisuunnittelu ottaa huomioon eri värisokeuden muodot ja ilmaisee informaatiota myös muuhun kuin pelkkään väriin nojaten. Otetaan esimerkiksi ne aiemmin mainitsemani metrokartat. Lontoon metrokartasta löytyy versio, jossa linjoihin on lisätty värin lisäksi muotoja erottamaan linjat toisistaan. Tokion metrokartan suunnittelijat lisäsivät linjoihin kirjaimet, jolloin sen luettavuus paranee myös värisokeille ihmisille.

Riittävä kontrasti palvelee kaikkia käyttäjiä

Aloitat saavutettavan värisuunnittelun helpoiten kiinnittämällä huomiota tekstin ja taustan väliseen kontrastiin. Itse bongailen eri verkkopalveluista kontrastiongelmia ja huomautan niistä kollegoillekin kesken suunnitteluprosessin. Saatan olla jopa hieman ärsyttävä. Kontrasti on kuitenkin asia, joka vaikuttaa ihan jokaisen ihmisen lukumukavuuteen. Me kaikki joudumme välillä tarkentamaan katseemme puhelimen näytölle kirkkaassa auringonpaisteessa. Näissä tilanteissa liian vaalean harmaa teksti ei erotu valkoisesta pohjasta.

Mikä sitten on riittävä kontrasti? W3C:n verkkosisällön saavutettavuusohje 2.0 luokittelee kolme eri saavutettavuuden tasoa, A, AA ja AAA. Olen pitänyt hyvänä sääntönä, että tekstikappaleissa käytettäisiin AAA-tason vaatimaa kontrastisuhdetta. Tällöin suhdeluku on 7:1. Muissa käyttöliittymäteksteissä tulisi saavuttaa vähintään AA-tason vaatima kontrasti, joka on 4,5:1.

Tekstin ja taustan välistä kontrastia voi testata webistä löytyvien apuohjelmien avulla. Niissä voit syöttää tekstin värin hex-arvon sekä taustan värin hex-arvon. Ohjelma kertoo näiden perusteella, onko kontrasti riittävällä tasolla. Chromen kehittäjätyökaluihin on lisäksi tulossa päivitys, jossa sen värivalitsimesta näkee suoraan tekstin ja taustan kontrastin. Tätä kirjoitettaessa se on saatavilla Chromen Canary versiossa.

Saavutettava värisuunnittelu kuuluu jokaiseen verkkopalveluprojektiin

Usein saavutettavan värisuunnittelun tärkeyttä joutuu perustelemaan tai puolustelemaan. Se tuntuu välillä vähän hullukuriselta, että esimerkiksi IE11-version tukemiseen käytetään enemmän energiaa, vaikka IE11-version käyttäjiä on vähemmän kuin heikosta värinäöstä kärsiviä. (Poikkeuksena ne palvelut, joita käytetään pakollisella IE-selaimella esimerkiksi valtionhallinnon virastoista.) Eikä saavutettava värisuunnittelu ole lähellekään niin työlästä, kuin vanhan selainversion tukeminen.

Heikon värinäön huomiointi tai riittävästä kontrastista huolehtiminen heti verkkopalvelun suunnitteluvaiheessa on huomattavasti helpompaa kuin ongelman korjaaminen jälkikäteen. Lisäksi saavutettava värisuunnittelu, kuten muutkin saavutettavuusasiat hyödyttävät ihan jokaista käyttäjää. Myös sitä lentokapteenia, joka Singaporen välilaskun aikana lukee iPhonen näytöltä kirkkaassa keskipäivän auringossa artikkelia juuri sinun verkkopalvelustasi.

Hyödyllisiä linkkejä:

Sim Daltonism, Macille saatava sovellus, jolla voit simuloida eri värisokeuden muotoja omalta ruudulta: https://itunes.apple.com/us/app/sim-daltonism/id693112260?mt=12

Chromen lisäosa, joka esittää koko sivuston värisokean silmin: https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa?hl=en

Sivusto tekstin kontrastin tarkistukseen: https://webaim.org/resources/contrastchecker/

Verkkosisällön saavutettavuusohjeet (WCAG) 2.0: https://www.w3.org/Translations/WCAG20-fi/

ambientia

Blogi