# Värisokeusystävällinen paletti ja suunnitelmien testaus

[Canonical HTML page](https://gradiently.design/fi/guide/color-blindness-design)

Värinäön poikkeama ei yleensä tarkoita harmaana näkemistä. Tietyt väriparit vain sulautuvat samaksi. Valitse vaaleudeltaan erilaiset värit, niin voit huomioida tämän suunnittelussa.

## The short version

- Värisokeusystävällinen paletti käyttää selvästi eri vaaleuksia pelkkien sävyerojen sijaan, jotta värit erottuvat myös osan sävyistä näyttäessä samalta.
- Punaisen ja vihreän sekoittuminen on ylivoimaisesti tavallisin värinäön poikkeama; sinisen ja keltaisen sekoittuminen on harvinaisempaa ja täydellinen värisokeus vielä harvinaisempaa.
- Okaben ja Iton kahdeksan värin paletti on suunniteltu erottumaan yleisissä värisokeuden muodoissa, ja sitä saa käyttää vapaasti.
- Älä anna värin kantaa merkitystä yksin: lisää myös teksti, kuvake, kuvio tai sijainti.
- Chromen ja Edgen kehittäjätyökalut simuloivat useita värisokeuden muotoja millä tahansa sivulla, ja harmaasävytarkistus paljastaa useimmat ongelmat sekunneissa.

**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](https://webaim.org/articles/visual/colorblind) käsittelee biologiaa; suunnittelussa olennaista on tämä taulukko.

| Tyyppi | Vaikutuksen kohteena | Sekoittuvat värit | Yleisyys |
| --- | --- | --- | --- |
| Deuteranomalia ja deuteranopia | Vihreät tappisolut (keskipitkät) | Punainen ja vihreä, vihreä ja ruskea, sininen ja purppura | Yleisimmät |
| Protanomalia ja protanopia | Punaiset tappisolut (pitkät) | Punainen ja vihreä sekä musta, punaiset näyttävät tummemmilta | Yleiset |
| Tritanomalia ja tritanopia | Siniset tappisolut (lyhyet) | Sininen ja vihreä, keltainen ja vaaleanpunainen tai harmaa | Harvinaiset |
| Akromatopsia | Kaikki | Kaikki näkyy harmaan sävyissä | Hyvin harvinainen |

Punavihreät muodot periytyvät X-kromosomissa, minkä vuoksi ne ovat paljon yleisempiä miehillä kuin naisilla.

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ä.

- Musta #000000: #000000
- Oranssi #e69f00: #e69f00
- Taivaansininen #56b4e9: #56b4e9
- Sinivihreä #009e73: #009e73
- Keltainen #f0e442: #f0e442
- Sininen #0072b2: #0072b2
- Sinooperi #d55e00: #d55e00
- Punertava purppura #cc79a7: #cc79a7

Okaben ja Iton paletti. Käytä vain tarvitsemasi värit; neljä tai viisi on kaikille helpompi kuin kahdeksan.

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ältä: punaisesta vihreään: `linear-gradient(90deg, #d7263d, #f5f5f5, #2e9e44)`
- Turvallinen: sinisestä oranssiin: `linear-gradient(90deg, #0072b2, #f5f5f5, #e69f00)`
- Turvallinen: purppurasta keltaiseen: `linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725)`

Viimeinen asteikko seuraa laajalti käytettyjä viridis-värejä: vaaleus kasvaa tasaisesti, joten se kestää myös harmaasävypainatuksen.

## 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](https://gradiently.design/fi/guide/oklch-explained). Deuteranopiassa niiden erottamiselle jää vähän perusteita.

### Vältä rinnakkain

- Punainen ja vihreä samassa vaaleudessa
- Vihreä ja ruskea
- Sininen ja purppura
- Vaalea vihreä ja keltainen
- Vaaleanpunainen ja harmaa tai keltainen ja vaalea harmaa

### Käytä mieluummin

- Sininen ja oranssi
- Tumma sininen ja vaalea keltainen
- Tumma purppura ja vaalea vihreä
- Yksi sävy selvästi eri vaaleusasteissa
- Mikä tahansa pari tekstin tai kuvakkeen kanssa

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](https://gradiently.design/fi/guide/how-to-choose-brand-colors).

## Ä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](https://gradiently.design/fi/guide/color-contrast-accessibility).

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ä](https://gradiently.design/fi/guide/text-on-gradient) käsittelee tätä tarkasti.

Työpajailmoitus, jossa otsikko on liukuvärin levottomalla alueella ja vaaleuskontrasti on heikko

Kun tekstin ja taustan vaaleus on lähellä toisiaan, sävy tekee kaiken työn. Juuri sen osa lukijoista menettää.

Sama työpajailmoitus rauhallisemmalla ja tummemmalla otsikkotaustalla, jolloin teksti erottuu selvästi

Rauhallinen syvempi alue sanojen takana tuottaa vaaleuskontrastin, jonka jokainen lukija voi nähdä.

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. **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. **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. **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. **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](https://gradiently.design/fi/guide/infographic-design), ja [väriharmonia](https://gradiently.design/fi/guide/color-harmony) auttaa rakentamaan turvallisen, harkitun paletin.

## FAQ

### Mitkä värit sopivat parhaiten värisokeille?

Sininen ja oranssi ovat turvallisin pari, sitten sininen ja keltainen. Valitse ennen kaikkea selvästi eri vaaleudet, jotta värit erottuvat sävyjen näyttäessä samoilta.

### Mikä on Okabe Ito -paletti?

Kahdeksan värin valikoima: musta, oranssi, taivaansininen, sinivihreä, keltainen, sininen, sinooperi ja punertava purppura. Se on suunniteltu erottumaan yleisissä värisokeuden muodoissa.

### Mitä värejä kannattaa välttää yhdessä?

Punaista ja vihreää, vihreää ja ruskeaa, sinistä ja purppuraa sekä vaaleaa vihreää ja keltaista, etenkin samassa vaaleudessa.

### Miten näen suunnitelman värisokean tavoin?

Avaa Chromen tai Edgen kehittäjätyökalujen Rendering-paneeli ja valitse Emulate vision deficiencies -asetuksesta vaihtoehto. Nopea harmaasävykuvakaappaus paljastaa myös pelkkään sävyyn perustuvat erot.

### Pitääkö punaiset ja vihreät brändivärit vaihtaa?

Ei. Tee toisesta selvästi tummempi ja lisää tekstit tai kuvakkeet kaikkiin merkitystä kantaviin väreihin.