Pidä saavutettavuus aina ensimmäisenä prioriteettina. Saavutettavuuden huomioiminen viimeisenä aiheuttaa todennäköisesti vaikeuksia.
Monet suunnittelijat sanovat, että sunnittelu kannattaa aloittaa mustavalkoisesta versiosta ja lisätä värit sitten, kun ilme muutoin toimii harmaasävyisenä. Joka tapauksessa on hyvä testata värejä valitessa myös harmaasävyinä. Ja tarkasta värien kontrastit heti valintavaiheessa.
Varmista, että valitsemissasi väreissä on riittävästi kontrastia kaikkialla missä niitä käytetään. Hyödynnä värin testaustyökaluja, näitä työkaluja on runsaasti ja monet niistä ovat hyviä.
On muutamia värien yhdistelmiä, jotka ovat herkästi hankala yhdistelmä. Vältä näitä, tai jos käytät näitä, varmista, että väreissä on riittävästi kontrastia keskenään.
Älä käytä pelkästään väriä ilmaisemaan tietoa, toimintoa tai visuaalista elementtiä. Värin lisäksi on mahdollista käyttää esimerkiksi palloja, kuvioita ja tekstuureita. Kannattaa varmistaa, että sisältö on luettavissa korkeaa kontrastia tai käännettyjä värejä käyttäessä.
WCAG-kriteeristö määrittää kontrastivaatimukset sekä tekstille että graafisille elementeille. Kunkin elementin kohdalta täytyy tarkastaa kontrasti- eli tummuusero sisällön ja taustan välillä.
Tekstin osalta AA-tasolla on minimivaatimukset tavalliselle ja suurelle tekstille erikseen. Suurella tekstillä tarkoitetaan tekstiä, joka on vähintään 24 pikselin kokoista tai 19 pikselin kokoista tekstiä boldattuna.
Tavallisen tekstin värikontrastin on oltava vähintään 4.5:1.
Suuren tekstin osalta värikontrastivaatimus on hieman pienempi, 3:1. Tämä sama vaatimus on myös graafisilla elementeillä, kuten ikoneilla.
Suunnittele riittävän näkyvät kohdennustyylit (focus) mikäli selainten oletustyylit eivät ole riittävän näkyviä (ne usein eivät ole, koska eri selaimissa on hyvin erilaiset oletustyylit). On hyvä huomioida, että selaimen oletustyylit täyttävät WCAG:n vaatimukset. Joten oletustyylien käyttäminen on vaatimusten kannalta turvallinen valinta.
Vältä tekstiä kuvissa. Mikäli suunnittelet ilmettä, jossa muut henkilöt lisäävät kuvia tekstin alle, varmista, että kontrasti ja muut kriteerit ovat ok millä tahansa kuvilla. Tätä kattaa kriteeri 1.4.5 (taso AA). Kriteeri 1.4.9 (taso AAA) määrittää, että kuvaa tekstin päällä saa käyttää ainoastaan täysin koristeellisissa tilanteissa tai jos teksti on oleellinen osa kuvaa, kuten esimerkiksi logot. Vältä myös tekstiä kuvien päällä. Mikäli näitä käytetään, varmista, että kontrasti on tässäkin tapauksessa ok millä tahansa kuvavalinnalla.
Kun käytetään tekstiä kuvan päällä, yleensä kontrastiongelmia pyritään ehkäisemään värillisellä harsolla tekstin ja kuvan välissä. Tämä ei aina kuitenkaan riitä, vaan usein voisi olla parempi laittaa yksivärinen tausta (esimerkiksi laatikkko tekstin ympärille) tekstin taakse. Mikäli et pysty varmistamaan, että kaikkien kuvien kohdalla tekstin taustalla on riittävästi kontrastia, vältä tällaisten elementtien käyttämistä.
Väriä ei saa käyttää ainoana visuaalisena keinona visuaalisen elementin erottamisessa. Ja tämä vaatimus on todella usein ongelmallinen linkkien kanssa. Linkeillä pitäisi olla visuaalisena tyylinä muutakin kuin pelkkä värin muutos. Yhdistä värin käyttö alleviivaukseen tai vaikka fontin paksuuteen, jotta linkit erottuvat selkeämmin. Huomioithan, että linkin visuaaliset vihjeet eivät voi olla vain linkkiä hoveroitaessa, tämä ei riitä kriteerin täyttymiseen. Linkin visuaaliset vihjeet pitää olla linkin oletustilassa.
Käytettävyyden ja saavutettavuuden kannalta yleensä suositellaan lisäämään linkin visuaaliseksi vihjeeksi alleviivaus. Tämä on kaikista tunnetuin visuaalinen vihje, jonka suurin osa käyttäjistä tunnistaa. Mikäli linkillä ei ole alleviivausta, koskee sitä tarkemmat säännöt värin suhteen. Nämä värisäännöt ovat erityisen haastavat, jos pyrkimyksenä on AAA-taso. Mikäli linkki tunnistetaan ensisijaisesti alleviivauksesta, riittää värin säännöksi riittävä erottuminen taustaväristä.
On suositeltavaa kertoa kävijälle mikäli kyseessä on toiselle sivustolle vievä linkki. Tämä ei ole pakollista, mutta lisää käytettävyyttä. Tässä voi hyödyntää esimerkiksi ikonia, joka symbolisoi ulkoisia linkkejä.
Mikäli linkillä ei ole alleviivausta, tulee linkillä olla vähintään 3:1 kontrasti sitä ympäröivän tekstin kanssa. Linkillä täytyy tällöin olla jokin muu indikaattori hoveroidessa tai kohdennettaessa kuin pelkkä väri. Lisäksi sekä linkillä että sisältötekstillä tulee olla vähintään 4.5:1 kontrasti taustavärin kanssa (3:1 suurta tekstiä käytettäessä). WebAIM on toteuttanut linkkien kontrastien testaustyökalun, jota kannattaa hyödyntää tällaisia linkkejä suunnitellessa. Link Contrast Checker -työkalu on englanniksi.
Kun suunnittelet kaavioita tai vastaavia, muista käyttää myös muuhun kuin väriin pohjautuvia indikaattoreita:
Käytä näissä väriä vain toissijaisena visuaalisena vihjeenä.
Interaktiivisuss datan visualisoinneissa on monesti mukava ominaisuus. Esimerkiksi käyttäjät voivat katsoa tiettyä graafin elementtiä eristettynä. Näihin on paljon valmiiksi koodattuja kaaviokirjastoja. Kun valitset käyttöösi tällaista työkalua, varmista sen saavutettavuus ja tarkasta minkä verran voit kustomoida esimerkiksi visuaalisia elementtejä. Olen kuullut, että Highcharts olisi yksi saavutettavimmista tällaisista kirjastoista.
Monivaiheisen lomakkeen tai vastaavan suunnittelu kannattaa aloittaa suunnittelemalla kaikki vaiheet (edellinen, seuraava, nykyinen) yhdellä sävyllä, jotta varmistaa toiminnallisuuden ilman väriä. Varmista, että eri vaiheet erottuvat toisistaan selkeästi. Lisää vasta viimeisenä näihin värit. Tällä tavoin varmistat, että väri on aina toissijainen visuaalinen vihje.