SAAVUTETTAVUUS VISUAALISESSA SUUNNITTELUSSA – VÄRIEN KONTRASTIT JA VÄRISOKEUS

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 kontrastin tarkastustoiminto. 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

Tutustu muihin artikkeleihimme

MITEN KASVATTAA MYYNTIÄ VIDEOILLA

Mikään ei aja pitkän aikavälin kasvua yhtä tehokkaasti kuin vahva brändi, ja mikään ei ole niin hyvä brändin vahvistaja kuin videot.

TEETKÖ MARKKINOINTIA KUIN ELÄMÄNMUUTOSTA? EHKÄ KANNATTAISI

Elämäntaparemonteissa tai markkinoinnissa ei aina kannata lähteä muuttamaan kaikkea kerralla. Kannattaa mieluummin satsata jatkuvaan kehittämiseen.

7 SYYTÄ, MIKSI DIGIMARKKINOINTI TEKEE YRITYKSESTÄNNE VOITTAJAN

Kokonaisvaltaisuus on digikampanjoissa avain onneen. Se tarkoittaa strategiaa, jossa brändi tarjoaa saumattoman kokemuksen kaikissa kanavissaan.