Värisokeusystävällinen paletti ja suunnitelmien testaus

Värisokeusystävällinen paletti säilyttää värit erillisinä ihmisille, joilla tietyt sävyt, yleensä punaiset ja vihreät, sekoittuvat. Erottele värit sekä vaaleuden että sävyn mukaan, äläkä käytä väriä ainoana vihjeenä. Tumma sininen ja vaalea oranssi pysyvät erilaisina lähes kaikille; keskisävyinen punainen ja vihreä samassa vaaleudessa voivat näyttää samalta mutaiselta ruskealta. Alla ovat kopioitavat paletit, vältettävät parit ja kolme ilmaista testitapaa.

Värisokeuden muodot lyhyesti

Värinäkö perustuu silmän kolmeen tappisolutyyppiin, jotka reagoivat karkeasti pitkiin, keskipitkiin ja lyhyisiin aallonpituuksiin. Kun yksi tyyppi puuttuu tai sen herkkyys siirtyy, useimmille erilaiset värit alkavat näyttää samanlaisilta. WebAIMin värisokeusartikkeli käsittelee biologiaa; suunnittelussa olennaista on tämä taulukko.

Yhteinen tekijä: sävy muuttuu epäluotettavaksi, mutta vaaleuserot säilyvät. Deuteranopiaa omaava näkee yhä selvästi, että yksi väri on toista tummempi. Tämä yksi asia ohjaa kaikkia alla olevia sääntöjä.

Kopioitava värisokeusystävällinen paletti

Tunnetuin turvallinen valikoima on Masataka Okaben ja Kei Iton tieteellisiin kuviin ehdottama paletti. Kahdeksan väriä valittiin erottumaan yleisissä värisokeuden muodoissa. Se toimii yhtä hyvin kaavioissa, kartoissa, merkinnöissä ja tuotteen tilaväreissä.

Brändityössä kahdeksan väriä on yleensä liikaa. Turvallisin yksittäinen pari on sininen ja oranssi: ne sijoittuvat punavihreän sekoittumislinjan eri puolille ja eroavat vaaleudeltaan, joten lähes kaikki erottavat ne. Myös sininen ja keltainen sekä tumma purppura ja vaalea vihreä toimivat hyvin.

Liukuvärit ja asteikot datalle

Käytä lämpökartoissa ja vaihteluväliä näyttävissä kaavioissa asteikkoa, jonka vaaleus muuttuu tasaisesti päästä toiseen. Punavihreä asteikko epäonnistuu kahdesti: päät sekoittuvat värisokealle lukijalle ja ovat myös vaaleudeltaan samanlaiset. Sinisestä oranssiin tai yhden sävyn tummasta vaaleaan toimivat lähes kaikille.

Vältettävät parit ja korvaavat vaihtoehdot

Tietyt yhdistelmät aiheuttavat ongelmia toistuvasti. Yllä olevat punainen #d7263d ja vihreä #2e9e44 näyttävät useimmille selvästi erilaisilta, mutta niiden havaittu vaaleus on lähes sama, noin 57 % ja 62 % OKLCH:ssa. Deuteranopiassa niiden erottamiselle jää vähän perusteita.

Jos brändivärisi ovat punainen ja vihreä, niitä ei tarvitse vaihtaa. Tee toisesta selvästi tummempi äläkä koskaan käytä niitä ainoana erona esimerkiksi voiton ja tappion välillä. Nuoli tai plus- ja miinusmerkki ratkaisee asian kaikille. Värien alkuperäinen valinta käsitellään artikkelissa brändivärien valinta.

Älä luota pelkkään väriin

Tämä on tärkein sääntö, ja se kuuluu myös verkkosisällön saavutettavuusohjeisiin. Jos kaavion selite, lomakevirhe, varastomerkki tai kartta eroaa vain värillä, osa lukijoista menettää merkityksen. Lisää toinen vihje:

• Tekstimerkinnät suoraan kaavion viivoihin ja pylväisiin väriselitteen sijaan.
• Kuvakkeet tiloille: oikeinmerkki onnistumiselle, rasti tai varoitus virheelle.
• Kuviot tai viivatyylit, kuten katkoviiva ja yhtenäinen viiva, kaavioihin.
• Sijainti ja järjestys, jotta ensimmäinen kohta tarkoittaa aina samaa.
• Tekstin kontrasti, joka riittää itsessään, tarkistettuna kontrastityökalulla.

Somekuvat vaativat saman huolenpidon. ”Vihreä tarkoittaa vapaata” punavihreän kalenterin päällä menettää osan lukijoista. Sanat kantavat merkityksen paremmin, ja niidenkin pitää erottua taustasta, varsinkin liukuväreissä, joissa kontrasti vaihtelee kuvan alueella. Teksti liukuvärillä käsittelee tätä tarkasti.

Oikeanpuoleinen versio on sitä, mitä Gradientlyn Mark tekee itsestään: se siirtää rauhallisimman ja parhaan kontrastin tarjoavan alueensa tekstin taakse. Automaattinen muste valitsee vaalean tai tumman tekstin joka riville, joten erottuminen perustuu vaaleuteen sävyn sijaan.

Suunnitelman testaaminen värisokeuden kannalta

1. 1

   Tee harmaasävytarkistus

   Vie suunnitelma tai ota kuvakaappaus ja muuta se harmaasävyiseksi. Jos eri asioita tarkoittavat värit muuttuvat samaksi harmaaksi, muuta toisen vaaleutta.

2. 2

   Simuloi selaimessa

   Avaa Chromen tai Edgen kehittäjätyökalut, avaa komentovalikko, kirjoita Rendering ja käytä Emulate vision deficiencies -valintaa nähdäksesi sivun protanopian, deuteranopian, tritanopian tai akromatopsian kautta.

3. 3

   Tarkista koko näyttö harmaana

   Macissa ja Windowsissa on harmaasävysuodatin saavutettavuusasetuksissa. Kytke se päälle ja tarkista myös sovellukset, suunnittelutiedostot ja viennit verkkosivujen lisäksi.

4. 4

   Poista väri ja lue uudelleen

   Toimivatko kaikki kaaviot, merkit ja tilat edelleen pelkillä teksteillä ja kuvakkeilla? Jos toimivat, väri on koristelua, kuten sen kuuluukin olla.

Simulaatiot ovat arvioita, ja värinäkö vaihtelee ihmisestä toiseen. Jos saavutettavuus on tuotteellesi tärkeää, pyydä tuntemiasi värisokeita katsomaan oikeaa toteutusta. Kaavioiden merkinnöistä ja asettelusta kertoo infografiikan suunnittelu, ja väriharmonia auttaa rakentamaan turvallisen, harkitun paletin.