Saavutettavuuteen törmää yhä enemmän ja enemmän. Osa hyvää suunnittelua on ottaa kaikki huomioon ja varmistaa, ettei mitään mene keneltäkään ohi.
Visuaalisessa suunnittelussa olennaista on keskittyä värien riittävään kontrastiin ja siihen, että myös värisokeat näkevät asiat oikein. Visuaalinen suunnittelijamme Tom Båssar avaa tässä artikkelissa hieman tarkemmin sitä, miten suunnittelija voi huomioida saavutettavuutta omassa työssään.
Saavutettavuus on laaja käsite, mutta keskityn tässä artikkelissa vain yhteen sen osa-alueeseen. Saavutettavuus on myös tilannekohtaista: kuvittele esimerkiksi tilanne, jossa aurinko paistaa ja yrität lukea kännykästä tekstiä mustalta pohjalta – heikko kontrasti tai liian pieni teksti aiheuttavat sen, että teksti on vaikeasti luettavissa.
Adoben ohjelmat ovat suunnittelijoille tuttuja ja niihin on tullut uusina ominaisuuksina hyviä työkaluja, jotka auttavat huomioimaan paremmin saavutettavuuteen liittyvät asiat. Käyn tässä läpi niitä ominaisuuksia, joita itse käytän suunnittelun tukena etenkin luodessani uusia visuaalisia ilmeitä. Ajan myötä silmä harjaantuu ja hyvät kontrastisuhteet voi erottaa heti. Silloin työkaluja tarvitsee lähinnä asioiden vahvistamiseen tai todentamiseen asiakkaalle.
Helppokäyttöisyys
Avaan Adobe Colorissa Kind Companyn väripaletin ja valitsen kohdan Helppokäyttöisyys, josta avautuu helppotyökalut. Työkaluista löytyvät toiminnot värisokeussuojattu ja kontrastintarkastustoiminto. Valitsen näistä ensin kontrastin tarkastuksen.
Kuva 1. Kind Companyn väriteema avattuna Adobe Colorissa. Oikealla on valikko, josta voi valita kohdan ”Helppokäyttöisyys”.
Kontrastin tarkastus
Otan tässä esimerkissä Kindin väripaletista tekstiväriksi mustan ja taustaksi keltaisen, koska tiedän, että ne toimivat varmasti. Työkalu ilmoittaa kontrastisuhteen (12,45:1), joka on näillä väreillä sekä pienellä että suurella tekstillä AAA, eli paras mahdollinen (WCAG 2.1-taso kertoo, onko kontrastisuhde riittävä). Jos kontrastisuhde on liian heikko, antaa ohjelma suosituksia sopivista kontrastisuhteista.
Kuva 2. Musta ja keltainen on useasti käytetty yhdistelmä erinomaisen kontrastin vuoksi.
Värisokeussuojattu
Värit on hyvä tarkastaa myös värisokeuden kannalta, sillä noin 3–8 % maailman väestöstä kärsii jonkin asteisesta värisokeudesta. Pahimmillaan jokin olennainen teksti tai grafiikka voi jäädä osalta ihmisiltä kokonaan näkemättä. Valitsen nyt työkalupakista kohdan Värisokeussuojattu, josta avautuu väripaletti ja värisokeussimulaattori.
Työkalu ilmoittaa heti, että ristiriitoja ei löydy ja värimallit ovat värisokeussuojattuja. Jos väreissä olisi korjattavaa, työkalu auttaa hienosäätämään värit kohdilleen. Tehtävä on mahdoton, jos haluaa saada kaikki näkemään samat värit samalla tavalla, mutta tärkeintä on saada värit erottumaan toisistaan niin, että katsoja näkee selkeästi viisi eri väriä.
Kuva 3. Kind Companyn väripaletti läpäisee tämän testin hyvin, sillä värit toimivat kaikilla eri värisokeustyypeillä.
Valmista tuli
Kun olen tarkistanut kontrastit ja värisokeuden, voin hyvillä mielin tallentaa väripaletin. Testattu väripaletti on merkitty merkillä, joka kertoo, että se on luotu Adobe Color -helppokäyttötyökalulla. Näin tiedän, että kyseisessä väripaletissa ei esiinny ristiriitoja.
Kuva 4. Kind Companyn väripaletti on värisokeussuojattu teema. Merkki kertoo, mitkä teemat on testattu ja mitkä ei, mikäli käytössä on useampia eri väripaletteja.
Ota värisokeus huomioon jo suunnitteluvaiheessa
Adoben muissakin työkaluissa on ominaisuuksia, jotka ovat tässä asiassa hyödyksi, esimerkiksi kuvitusta tehdessä. Alla esimerkkikuvassa Adobe Illustratorissa näkyy vasemmalla normaalinäkymä ja oikealla punavihersokean näkymä. Kun tsekkaa välillä, miltä kuvitus näyttää eri rajoitteilla, voi varmistua siitä, ettei mitään olennaista jää kuvituksesta piiloon.
Teksti: Tom Båssar
