Värisokeus ja verkkosuunnittelu: mitä tulee tietää

Yleisempää kuin useimmat suunnittelijat luulevat

Värinäön puutos — jota kutsutaan yleisesti värisokeudeksi — koskettaa noin 8:aa prosenttia miehistä ja 0,5:tä prosenttia naisista. Se on noin yksi 12 miehestä ja yksi 200 naisesta, mikä tekee siitä yleisemmän kuin useimmat muut vammat, joita verkon saavutettavuusstandardit käsittelevät.

Silti se ohitetaan suunnittelussa rutiininomaisesti. Tiimit testaavat ruudunlukijoilla ja näppäimistönavigoinnilla, suorittavat automaattisen WCAG-skannauksen ja pitävät saavutettavuustyötä valmiina — tarkistamatta koskaan, onko heidän väripalettinsa luettavissa värisokeille käyttäjille.

Värisokeuden ymmärtäminen ja se, mitä se todella tekee suunnittelemillesi verkkokäyttöliittymille, on ensimmäinen askel sen korjaamiseksi.

Tyypit ja mitä ne tekevät

Värinäön puutosta on useaa muotoa, eivätkä ne kaikki tuota samaa kokemusta.

Puna-vihervikaisuudet (yleisimmät)

Protanopia — punaisten tappisolujen täydellinen puuttuminen. Punainen näyttää tummalta tai mustalta. Puna-viheräerot katoavat.

Protanomalia — heikentynyt herkkyys punaiselle. Punainen, oranssi ja keltainen siirtyvät kohti vihreää, ja kokemus on kokonaisuudessaan haaleampi, ikään kuin punainen kanava olisi käännetty alas.

Deuteranopia — vihreiden tappisolujen täydellinen puuttuminen. Yleisin värisokeuden muoto. Vihreä ja punainen sekoittuvat; maailma näyttää kuin se olisi suodatettu kellanruskean linssin läpi.

Deuteranomalia — heikentynyt herkkyys vihreälle. Samankaltainen kuin deuteranopia mutta lievempi. Kaikkein yleisin tyyppi, joka koskettaa noin 5:tä prosenttia miehistä.

Kelta-sinivikaisuudet (harvinaisemmat)

Tritanopia — sinisten tappisolujen puuttuminen. Sininen näyttää vihreältä ja keltainen näyttää haalealta tai näkymättömältä. Harvinainen.

Tritanomalia — heikentynyt herkkyys siniselle. Sinivihreä ja punavioletti sekoittuvat.

Monokromasia (erittäin harvinainen)

Achromatopsia — kaikkien väritappisolujen puuttuminen. Vain kirkkaus havaitaan; maailma näyttää harmaan eri sävyinä. Usein siihen liittyy valoherkkyyttä ja heikentynyttä näöntarkkuutta.

Miten värisokeus rikkoo yleisiä verkkomalleja

Tyyppien tunteminen abstraktilla tasolla on vähemmän hyödyllistä kuin sen tietäminen, mitkä tietyt suunnitteluratkaisut aiheuttavat ongelmia. Nämä ovat yleisimmät.

Vain punaisella osoitetut virhetilat

Lomakekentän reunuksen muuttaminen punaiseksi validointivirheen osoittamiseksi on yksi verkkosuunnittelun laajimmalle levinneistä malleista. Puna-vihervikaisuudesta kärsiville käyttäjille punainen valkoisella tai punainen harmaalla voi olla lähes näkymätöntä tai erottamatonta tavallisesta kohdistamattomasta tilasta.

Tämä kuuluu suoraan WCAG 2.2:n 1.4.1 Värien käyttö (taso A) alaisuuteen: väri ei saa olla ainoa keino välittää tietoa, osoittaa toimintoa, kehottaa vastaukseen tai erottaa visuaalista elementtiä.

Korjaus on yksinkertainen: yhdistä väri toiseen visuaaliseen osoittimeen — kuvakkeeseen, tekstiselitteeseen, reunuksen paksuuden muutokseen tai mihin tahansa muuhun ei-väriin perustuvaan signaaliin.

<!-- Nojaa pelkkään väriin: ei läpäise kohtaa 1.4.1 -->
<input type="email" class="field--error">

<!-- Väri plus kuvake plus teksti: läpäisee -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Anna kelvollinen sähköpostiosoite.
  </p>
</div>

Riittämätön kontrasti

Matala kontrasti on värisokeudesta erillinen ongelma, mutta ne risteävät. Monet väripaletit, jotka näyttävät luettavilta tyypilliselle värinäölle, muuttuvat entistä vaikeammin luettaviksi värinäön puutoksen kanssa, koska havaittu ero etualan ja taustan välillä kutistuu entisestään.

WCAG 1.4.3 vaatii vähintään 4,5:1 kontrastisuhteen normaalille tekstille ja 3:1 suurelle tekstille. Kontrastin testaaminen työkalulla, kuten selaimen DevToolsin värivalitsimella tai omistetulla tarkistimella, ei ole neuvoteltavissa — älä luota visuaaliseen tarkasteluun.

Datavisualisointi, joka koodaa vain väriin

Piirakkakaavio, jonka kuudessa segmentissä on eroteltu vain värillä. Kartta, jossa on puna-vihergradientti. Viivakaavio, jossa neljä datajoukkoa erotetaan pelkän värisävyn perusteella.

Deuteranopiaa sairastaville käyttäjille punainen ja vihreä muuttuvat erottamattomiksi. Kaavion merkitys romahtaa täysin. Lisätietoja tästä on oppaassamme saavutettavasta datavisualisoinnista.

Linkit, jotka nojaavat vain väriin erottuakseen leipätekstistä

Selaimet alleviivaavat oletusarvoisesti linkit. Monet suunnittelijat poistavat tämän alleviivauksen ja nojaavat pelkkään väriin erottaakseen linkit ympäröivästä tekstistä. Käyttäjät, joilla on värinäön puutos — ja erityisesti matalakontrastisia teemoja käyttävät — voivat epäonnistua linkkien tunnistamisessa kokonaan.

WCAG 1.4.1 pätee myös tähän. Jos linkin väri on ainoa visuaalinen osoitin (ei alleviivausta, ei lihavointia, ei muuta erottelijaa), linkki ei ole saavutettava värisokeille käyttäjille.

Yksinkertaisin korjaus: palauta alleviivaus. Vaihtoehtoisesti varmista, että linkin värillä on riittävä kontrasti sekä leipätekstin väriä että taustaa vasten.

Suunnittelu värisokeus mielessä

Käytä toisteista koodausta

Lisää toinen visuaalinen kanava värin rinnalle. Kaavioissa: lisää kuvioita, tekstuureja tai dataselitteitä. Tilaosoittimissa: lisää kuvakkeita. Lomaketiloissa: lisää tekstiä. Tavoitteena on, että joku, joka riisuu värin suunnittelusta kokonaan, ymmärtää silti kaiken.

Testaa simulointityökaluilla

Chrome DevToolsissa on sisäänrakennettu värisokeuden simulointi. Avaa DevTools > Rendering-paneeli > “Emulate vision deficiencies.” Voit simuloida protanopiaa, deuteranopiaa, tritanopiaa ja achromatopsiaa.

Figmassa ja muissa suunnittelutyökaluissa on samankaltaisia lisäosia. Simuloinnin suorittaminen vie sekunteja ja paljastaa usein ongelmia, jotka eivät näkyneet vakioesikatselussa.

Tarkista palettisi kokonaisuutena

Älä testaa vain yksittäisiä elementtipareja. Katso koko palettia yhdessä: ensisijaiset, toissijaiset, virhe-, onnistumis-, varoitus- ja informatiiviset värit. Erottuvatko virheen punainen ja onnistumisen vihreä toisistaan deuteranopiasimuloinnissa? Jos näyttävät samanlaisilta, sinulla on ongelma riippumatta siitä, läpäisevätkö kontrastisuhteesi teknisesti.

Vältä ongelmallisia yhdistelmiä

Erityisen epäluotettavia värinäön puutokselle:

Punainen ja vihreä
Vihreä ja ruskea
Sininen ja violetti
Vihreä ja harmaa
Vihreä ja musta

Kun näiden parien on esiinnyttävä samassa kontekstissa, erottele ne vaaleuden tai kuvion avulla värisävyn sijaan.

Mitä WCAG kattaa ja mitä ei

WCAG kattaa värikontrastin (1.4.3, 1.4.11) ja kiellon käyttää väriä ainoana keinona tiedon välittämiseen (1.4.1). Se ei määrittele, mitä värejä voit tai et voi käyttää, eikä vaadi, että koko palettisi olisi havaittavissa jokaisen värinäön puutostyypin kanssa.

Se vaatii, ettei mitään merkitystä katoa, kun väri poistetaan. Se on käytännön testi. Poista väri suunnittelustasi. Pysyykö jokainen tieto saavutettavana muiden keinojen kautta?

Jos vastaus on kyllä, olet täyttänyt vaatimuksen. Jos virhetilat katoavat, jos kaavion data muuttuu epäselväksi, jos linkit muuttuvat näkymättömiksi — sinulla on työtä edessä.

Saavutettavuusauditointimme sisältävät värien saavutettavuuden vakio-osana tarkastelua. Jos haluat tietää, missä nykyinen suunnittelusi on, suorita ilmainen automaattinen skannaus havaitaksesi automatisoitavissa olevat ongelmat lähtökohtana.