Opas värien saatavuuteen tuotesuunnittelussa

Saatavilla olevasta suunnittelusta puhutaan paljon, mutta oletko koskaan ajatellut värien saavutettavuutta?

Äskettäin asiakas toi esiin projektin, jolla saavutettavan värijärjestelmän erityiset ja monimutkaiset toteutukset toteutettiin. Tämä avasi silmäni paitsi tämän aiheen tärkeyden lisäksi myös sen, kuinka paljon on opittavaa.

Tämän tarinan on kirjoittanut Justin Reyna

Oppitaan kuinka päästä väreihin helposti jo tunnettujen suunnitteluperiaatteiden avulla.

Miksi saavutettavuus on niin tärkeää?

Digitaalisen tuotesuunnittelun saavutettavuus on kokemusten muotoilu kaikille ihmisille, myös niille, joilla on näkö-, puhe-, kuulo-, fyysinen tai kognitiivinen vamma. Suunnittelijoina, kehittäjinä ja yleisen teknologian ihmisinä meillä on valta luoda verkko, josta olemme kaikki ylpeitä: osallistava web, joka on kaikkien ihmisten luoma ja kuluttama.

Saatavilla olevien tuotteiden luominen on myös vain töykeää, joten älä ole töykeä.

Värien saavutettavuus antaa näkövammaisille tai värinäköpuutteellisille ihmisille mahdollisuuden olla vuorovaikutuksessa digitaalisen kokemuksen kanssa samalla tavalla kuin heidän näkövammaistensa kanssa. Vuonna 2017 Maailman terveysjärjestö arvioi, että noin 217 miljoonalla ihmisellä on jonkinlainen kohtalainen tai vaikea näkövamma. Pelkästään tämä tilasto on riittävän syy saavutettavuuden suunnitteluun.

"Esteettömien tuotteiden luominen on vain töykeää, joten älä ole töykeä."

Sen lisäksi, että saavutettavuus on eettinen paras käytäntö, saatavuuteen liittyvien säännösten noudattamatta jättämisellä on myös potentiaalisia oikeudellisia vaikutuksia. Vuonna 2017 kantajat nostivat ainakin 814 liittovaltion oikeudenkäyntiä väitetysti pääsyttömille verkkosivustoille, mukaan lukien joukko ryhmäkanteita. Eri organisaatiot ovat pyrkineet luomaan saavutettavuusstandardeja, etenkin Yhdysvaltain pääsylautakunta (jakso 508) ja World Wide Web Consortium (W3C). Tässä on yleiskatsaus näihin standardeihin:

  • 508 §: 508 §: n noudattaminen viittaa vuoden 1973 kuntoutuslain 508 §: ään. Voit lukea perusteellisen määräyksen täältä, mutta yhteenvetona sanoen, että 508 § edellyttää, että sivustosi on oltava käytettävissä, jos olet liittovaltion virasto tai luot sivustoja liittovaltion viraston puolesta (kuten urakoitsijat).
  • W3C: World Wide Web Consortium (W3C) on kansainvälinen vapaaehtoinen yhteisö, joka perustettiin vuonna 1994 ja joka kehittää avoimia standardeja webille. W3C hahmottelee heidän suuntaviivojaan verkkosivujen saavutettavuudelle WCAG 2.1: ssä, joka on pohjimmiltaan web-esteettömyyden parhaiden käytäntöjen kultastandardi.

Varmista, että tuotteesi on saatavissa väreille

Esteettömyyden huomioon ottaminen tuotteen elinkaaren varhaisessa vaiheessa on parasta - se vähentää aikaa ja rahaa, jota kulutat käyttämään tuotteidesi saatavuutta takautuvasti. Värien saavutettavuus vaatii vähän etukäteen työtä tuotteen värivalikoiman valinnassa, mutta värien saatavuuden varmistaminen maksaa osinkoa tieltä.

Tässä on muutamia nopeita vinkkejä, joilla varmistetaan, että luot värejä käyttäviä tuotteita.

Lisää tarpeeksi kontrastia

W3C: n AA-vähimmäisluokituksen saavuttamiseksi taustan ja tekstin kontrastisuhteen tulisi olla vähintään 4,5: 1. Joten suunnitellessasi esimerkiksi painikkeita, kortteja tai navigointielementtejä, muista tarkistaa väriyhdistelmien kontrastisuhde.

On paljon työkaluja, joiden avulla voit testata väriyhdistelmien saavutettavuutta, mutta mielestäni eniten hyödyllisiä ovat Colorable ja Colorsafe. Pidän Colorable: sta, koska siinä on liukusäätimiä, joiden avulla voit säätää sävyä, kylläisyyttä ja kirkkautta reaaliajassa nähdäksesi miten se vaikuttaa tietyn väriyhdistelmän saavutettavuusluokkaan.

Älä luota pelkästään väriin

Voit myös varmistaa saatavuuden varmistamalla, että et luota väreihin tärkeiden järjestelmätietojen välittämisessä. Joten esimerkiksi virhetiloihin, menestystiloihin tai järjestelmävaroituksiin, muista sisällyttää viestit tai ikonografia, joka selkeästi ilmaisee mitä tapahtuu.

Kun näytät esimerkiksi kuvaajia tai kaavioita, antamalla käyttäjille mahdollisuuden lisätä tekstuuria tai kuvioita, varmistetaan, että värisävyt voivat erottaa ne toisistaan ​​tarvitsematta huolehtia väristä, joka vaikuttaa heidän tietokokemukseensa. Trello tekee tästä hienoa työtä värisävyystävällisellä tilassa.

Tarkennustilan kontrasti

Tarkennustilat auttavat ihmisiä navigoimaan sivustollasi näppäimistöllä antamalla heille visuaalisen ilmaisimen elementtien ympärillä. Ne ovat hyödyllisiä näkövammaisille, liikuntarajoitteisille ja ihmisille, jotka haluavat vain navigoida näppäimistön avulla.

Kaikilla selaimilla on oletusarvoinen tarkennustilan väri, mutta jos aiot ohittaa tämän tuotteesi sisällä, on tärkeää varmistaa, että tuotat tarpeeksi värikontrastia. Tämä varmistaa, että näkövammaiset tai värivajavat voivat navigoida tarkennustilojen kanssa.

Dokumentoi ja seurustele värijärjestelmää

Viimeiseksi tärkein näkökohta saavutettavan värijärjestelmän luomisessa on antaa joukkueellesi mahdollisuus viitata siihen tarvittaessa, jotta kaikki ovat selviä oikeasta käytöstä. Tämä ei vain vähennä sekaannusta ja vaivaa, mutta myös varmistaa, että saavutettavuus on aina tiimisi ensisijainen tavoite. Kokemukseni mukaan tietyn väriyhdistelmän käyttökelpoisuuden nimenomainen kutsuminen UI-pakkauksessa tai suunnittelujärjestelmässä on tehokkainta, etenkin kun seurustellaan koko työkalulla (kuten InVision Craft tai InVision DSM). Tässä on esimerkki siitä, miten dokumentoidaan tausta teksti -yhdistelmille ja kunkin yhdistelmän saavutettavuusluokitukselle.

Päästään pääsyyn

Nämä ovat vain muutamia vinkkejä tuotteesi saatavuuden parantamiseksi, mutta muista, että ne liittyvät vain värien saatavuuteen. Jotta ymmärrämme saavutettavuusohjeet yksityiskohtaisesti, suosittelen perehtymistä WCAG 2.1: ään. Vaikka nämä ohjeet voivat olla vähän pelottavia, on olemassa paljon resursseja, jotka auttavat sinua matkan varrella, ja epävarmasti ota yhteyttä alueesi suunnittelijoihin (tai Internetin kautta) saadaksesi apua.

Piditkö tästä viestistä? Lue lisää siitä InVision: n uudessa blogissa Inside Design.

Alun perin julkaistu osoitteessa invisionapp.com.