Näin muokkaat visuaalisen ilmeen saavutettavaksi – ilman täydellistä uudistusta

Useimmilla yrityksillä ja järjestöillä on oma visuaalinen ilme määriteltynä. Entä jos huomaat, ettei ilme täytä saavutettavuusvaatimuksia, jotka digipalvelulaki asettaa useimmille järjestöille ja verkkokaupoille? Pitäisikö kaikki suunnitella uusiksi? Hyvä uutinen on: ei tarvitse. Olemme auttaneet lukuisia järjestöjä ja yrityksiä huomaamaan, että usein visuaalista ilmettä voidaan päivittää saavutettavaksi pienillä muutoksilla – ilman että tyyli, brändi tai tunnistettavuus kärsii.

Tässä artikkelissa käydään läpi, miten voit muokata olemassa olevaa visuaalista ilmettä saavutettavammaksi vaihe vaiheelta. Käymme läpi konkreettiset vaiheet, joilla yrityksen tai järjestön brändi, värimaailma, typografia ja grafiikka voidaan tehdä saavutettavammiksi kaikille käyttäjille.

Artikkelissa keskitymme erityisesti visuaalisen saavutettavuuden kehittämiseen osana kokonaisvaltaista brändi-ilmettä. Jos etsit tietoa verkkosivujen sisällön saavutettavuudesta tai yksittäisten dokumenttien saavutettavuudesta, löydät niistä erilliset ohjeet aiemmista artikkeleistamme. Lähtökohtana käytämme WCAG-standardia (Vieraile ulkoisella sivustolla. Linkki avautuu uuteen välilehteen.) (WCAG 2.2 AA-taso), joka määrittää verkkosisällön saavutettavuudelle kansainväliset kriteerit.

Miksi visuaalinen ilme pitäisi suunnitella saavutettavaksi?

Saavutettavuusvaatimukset (Vieraile ulkoisella sivustolla. Linkki avautuu uuteen välilehteen.) eivät kohdistu suoraan visuaaliseen ilmeeseen, vaan tuotettuihin digitaalisiin materiaaleihin, kuten verkkosivuihin sekä verkkosivuilla oleviin raportteihin ja esitteisiin. Koska kaikkien materiaalien ilme kuitenkin pohjautuu brändi-ilmeen graafiseen ohjeistukseen, on tärkeää, että ilmeen värit, typografia ja muut elementit ovat saavutettavia jo lähtökohtaisesti. Näin vältytään muutoksilta yksittäisissä materiaaleissa, jotka voisivat rikkoa ilmeen yhtenäisyyttä, ja viestintä pysyy sekä saavutettavana että johdonmukaisena. Vaikka painettuja esitteitä ei lailla vaadita saavutettaviksi, on kaikkien etu, että myös ne ovat helposti luettavia ja ymmärrettäviä.

Saavutettavuus ei ole vain tekninen vaatimus, vaan se on suoraan linjassa monen järjestön perustehtävän kanssa. Kun viestintä on saavutettavaa, varmistatte, että viestinne tavoittaa kaikki jäsenet, sidosryhmät ja avun tarvitsijat yhdenvertaisesti. Selkeä ja saavutettava viestintä rakentaa luottamusta ja ammattimaista kuvaa myös rahoittajien ja yhteistyökumppaneiden suuntaan.

1. Koskeeko saavutettavuusvaatimukset logoa?

Ei koske. Pitkä vastaus on, että digipalvelulain ja WCAG-standardin mukaiset saavutettavuusvaatimukset eivät pääsääntöisesti koske logoja tai muita bränditunnuksia. Laki keskittyy palvelun sisältöön ja toiminnallisuuksiin. On kuitenkin hyvän käytännön mukaista varmistaa, että logossa mahdollisesti oleva teksti on selkeästi luettavissa. Kun me Muuksilla teemme logosuunnittelua, varmistamme aina että logo on suunniteltu saavutettavaksi.

2. Väripaletti: Miten löytää saavutettavat sävyt brändiä rikkomatta?

Värien havaitseminen on aina suhteellista. Siihen vaikuttavat esimerkiksi ikä, terveydentila ja kulttuurinen tausta. Myös ympäristö ja olosuhteet muuttavat kokemusta: näytön kirkkaus, valaistus ja ympäröivät värit voivat saada saman värin näyttämään erilaiselta.

Väripalettiin tulee sisällyttää värejä, jotka toimivat saavutettavasti esimerkiksi tekstissä ja interaktiivisissa elementeissä, kuten verkkosivujen painikkeissa. Näin tekstit ja toiminnot pysyvät selkeinä ja helposti luettavina. Kaikkien paletin värien ei kuitenkaan tarvitse olla saavutettavia – muita sävyjä voi hyödyntää esimerkiksi graafisissa elementeissä ja taustoissa.

Asiakastarina: Kontrastit kuntoon ja brändi kirkkaaksi. Erään järjestön kanssa kohtasimme haasteen: heidän perinteinen, sininen päävärinsä ei toiminut saavutettavasti verkkosivuilla. Täyden uudistuksen sijaan loimme heidän olemassa olevaan palettiinsa kaksi uutta, saavutettavaa tehosteväriä, jotka täyttivät WCAG-kontrastivaatimukset. Nämä värit otettiin käyttöön verkkosivujen painikkeissa, linkeissä ja leipätekstissä. Lopputulos: brändi-ilme säilyi tunnistettavana, mutta digitaalinen läsnäolo muuttui hetkessä saavutettavammaksi ja raikkaammaksi.

Tarkista nämä:

• Tarkista teksteissä ja painikkeissa käytettävien värien välinen kontrasti. Leipätekstin vähimmäiskontrasti on 4,5:1, ja isojen tekstien, kuten otsikoiden, vähimmäisvaatimus on 3:1. Isoksi tekstiksi määritellään vähintään 18 pt (24 px) normaali teksti tai 14 pt (18,5 px) lihavoitu teksti. Kontrastin laskemiseen voit käyttää esimerkiksi WebAIM Contrast Checker -työkalua (Vieraile ulkoisella sivustolla. Linkki avautuu uuteen välilehteen.), joka arvioi kontrastin värien HEX-koodeista. Muista myös varmistaa, että teksti on saavutettavaa juuri sen taustan kanssa, jonka päällä sitä käytät.
• Huomioi väriyhdistelmät esimerkiksi graafeissa. Vältä sellaisia yhdistelmiä, joita värisokeat eivät erota toisistaan.

3. Miten typografian saavutettavuus arvioidaan?

Fontti voi näyttää hyvältä, mutta voi olla vaikeasti luettava etenkin pienillä näytöillä.

Tarkista nämä:

• Käytä fontteja, jotka ovat helposti luettavia ja selkeitä. Luettava fontti on esimerkiksi sellainen, jossa numero ”1”, kirjain ”l” (pieni L) ja kirjain ”I” (iso i) eivät ole liian samanlaisia. Käyttöjärjestelmäfontit kuten Aptos tai Arial mielletään usein selkeiksi. Älä kuitenkaan käytä käyttöjärjestelmäfonttia brändi-fonttina. Koska ne ovat niin yleisesti käytössä, ei niillä saa luotua persoonallista visuaalista ilmettä.
• Fonttien määrä. Käytä ilmeessä korkeintaan 2–3 erilaista fonttia, jotta kokonaisuus pysyy selkeänä. Määrittele graafisessa ohjeistuksessa, missä kutakin fonttia käytetään.
• Versaalien käyttö. Käytetäänkö ilmeessä tekstejä joita kirjoitetaan isoilla kirjaimilla (VERSAALIT)? Pitkät, isoilla kirjaimilla kirjoitetut tekstit ovat vaikeasti ymmärrettäviä esimerkiksi lukihäiriöisille.
• Lihavoinnit ja kursiivit: Käytä lihavointeja ja kursiivia harkiten – liiallinen käyttö vaikeuttaa tekstin lukemista.

4. Tarkastele graafisia elementtejä ja käytettyjä ikoneita

Graafiset muodot ja ikonit ovat olennainen osa ilmettä – mutta niidenkin tulisi tukea saavutettavuutta.

Tarkista nämä:

• Miten graafisia elementtejä käytetään? Varmista, etteivät graafiset elementit häiritse tekstin luettavuutta.
• Ikonit ja symbolit: Käytä selkeitä ja yksinkertaisia ikoneita. Vältä liian monimutkaisia symboleja, jotka ovat vaikea tulkita.

5. Muista kokonaisuus

Nyt kun yksittäiset ilme-elementit ovat kunnossa, muista, että myös kokonaisuudella on suuri merkitys. Hierarkia, tyhjän tilan käyttö, tekstin koko ja graafisten elementtien sijoittelu vaikuttavat siihen, kuinka selkeästi viesti välittyy.

6. Viimeinen silaus: Jalkauta saavutettavuus koko organisaatioon

Lopuksi – muista päivittää muutokset graafiseen ohjeistukseen. Päivitä myös mahdolliset Word-, PowerPoint- tai InDesign-pohjat niin, että ne ovat myös teknisesti saavutettavia. Näin varmistatte, että koko tiimi ja vapaaehtoiset voivat tuottaa vaivattomasti saavutettavia materiaaleja aina jäsenkirjeistä vuosikertomuksiin.

Usein kysytyt kysymykset visuaalisen ilmeen saavutettavuudesta

Mitä visuaalinen saavutettavuus tarkoittaa?

Visuaalinen saavutettavuus tarkoittaa brändi-ilmeen elementtien, kuten värien, fonttien ja grafiikoiden, suunnittelua siten, että ne ovat ymmärrettäviä mahdollisimman monille ihmisille, mukaan lukien henkilöille, joilla on näkövamma tai lukivaikeus.

Mikä on riittävä värikontrasti WCAG-standardin mukaan?

WCAG 2.2 AA-tason mukaan leipätekstin ja sen taustan välisen kontrastisuhteen on oltava vähintään 4.5:1. Suurille teksteille (esim. otsikot) riittävä kontrasti on 3:1.

Etkö ole varma, mistä aloittaa? Me autamme.

Jos graafinen ohjeistuksenne kaipaa sparrausta tai ette ole varmoja, täyttävätkö visuaalinen ilmeenne saavutettavuusvaatimukset, ota yhteyttä.

Voit esimerkiksi varata 30 minuutin ilmaisen tapaamisen kanssani (Vieraile ulkoisella sivustolla. Linkki avautuu uuteen välilehteen.). Käydään yhdessä läpi ilmeenne haasteita ja pyrin antamaan konkreettisia vinkkejä, jolla pääsette eteenpäin.