🌈 🧐 Mielipidetty vĂ€rivalitsin

(20. maaliskuuta 2020)

Suunnittelijat ja insinöörit kehittÀvÀt verkkoympÀristössÀ paremmin saavutettavuutta ajatellen. Wistiassa videotoistimemme viimeisin pÀivitys oli iso askel eteenpÀin, ja siihen tehtiin parannuksia, jotta se olisi nÀytönlukijaystÀvÀllinen, nÀppÀimistöllÀ navigoitava ja tukeva ÀÀnikuvaus.

VĂ€rivalitsin, jonka valintaruutu on valittu ja joka lukee

Mutta niin fantastinen ja yhtÀ lahjakas kuin tÀÀllÀ oleva tiimi onkin, videoiden esteettömyydessÀ on joitain nÀkökohtia, joita emme vain pysty korjaamaan kulissien takana. Videon luojien on edelleen tilattava kuvatekstit, lisÀttÀvÀ kuvaileva alt-teksti pikkukuviinsa ja valittava soittimen vÀri, joka sopii heidÀn tuotemerkkinsÀ. Ja tÀllÀ valinnalla on suuri vaikutus saavutettavuuteen, koska vaalea taustavÀri voi tehdÀ tekstistÀ ja kuvakkeista matalan kontrastin luettavuuteen saakka.

Soittimen ulkoasun ja tuntuman hallinta on yksi ominaisuudet, joita asiakkaamme mainitsevat eniten Wistian valinnan syynÀ, mutta se on myös valinta, joka voi vaikuttaa vakavasti pÀÀsyyn ymmÀrtÀmÀttÀ, mitÀ kyseessÀ on.

Ratkaistaksemme tÀmÀn ongelman lÀhdimme suunnitella vÀrivalitsin, joka helpottaa esteettömyyden valintaa.

Numeron lisÀÀminen tarkoittaa tietoisen valinnan tekemistĂ€ mahdollisimman muutamalla napsautuksella. EtsimĂ€llĂ€ helppoa, pienikitkaista kĂ€yttöliittymÀÀ vĂ€rien valitsemiseen, kartoitimme miljoonaa (?) Erilaista tapaa tehdĂ€ vĂ€rivalinta. Miksi kaikki nĂ€mĂ€ ovat erilaisia? Miksi ei ole vĂ€rivalitsimen standardia? Ja mitĂ€ eroa on ”Kirkkaus” ja ”Kirkkaus” vĂ€lillĂ€?

Paljon erilaisia ​​vĂ€rinvalitsimia, jotka nĂ€yttĂ€vĂ€t erilaisia ​​vĂ€riavaruuden asetteluja ja rakenteita

Vastaus on kolmiulotteisessa vÀriavaruudessa. Eli, jotta voit kuvata kaikki mahdolliset vÀrit tarkasti, tarvitset kolmiulotteisen muodon. Malli, joka kartoittaa suorimmalla vaistoinstinktimme, on HSV: Hue (sateenkaaren piste), Saturation (vÀrisÀvyn puhtaus verrattuna sen harmaantumiseen syntyvÀÀn mutaan), Value (sÀvyn vaaleus verrattuna valkoiseen sekoittumiseen) tai musta). Jokainen nÀistÀ kolmesta muuttujasta on vÀlttÀmÀtön ulottuvuus nÀytöllÀ nÀkyvÀn vÀrin mÀÀrittÀmiseksi.

Kolmiulotteiset muodot, jotka edustavat vÀriavaruutta: a sarake, kartio, kuutio ja pallo
Hauska tosiasia: vÀrien heksadesimaaliarvot eivÀt liity HSV: hen, vaan (vÀhemmÀn intuitiiviseen) RGB: hen. Kukin kolmesta merkkiparista edustaa punaista, sinistÀ tai vihreÀÀ vÀrikanavaa heksadesimaaliluvussa (base-16), joten #FF FF FF on valkoinen, koska kaikki kolme on maksimoitu kuten kuution kuvan dle keskiosa, taas #FF 00 00 on punainen, koska vain R-kanava on maksimoitu. Joten kyseisen kuution vasen puoli on kaikki vÀrit, jotka saatat saada, jos vaihdat vain R-kanavaa ja heksakoodisi neljÀ viimeistÀ merkkiÀ ovat FF FF.

Niin siistiĂ€ kuin se olisi, kun kĂ€yttĂ€jĂ€t valitsisivat vĂ€rinsĂ€ siirtymĂ€llĂ€ kolmiulotteisessa maailmassa (x, y, z) -koordinaattiin, joka parhaiten vastaa heidĂ€n tuotemerkkiÀÀn, se ei johda muutamiin napsautuksiin ja nopeisiin, hyviin valintoihin. SyynĂ€ siihen, ettĂ€ vĂ€rejĂ€ on niin paljon, on se, ettĂ€ se vaatii jonkin verran abstraktiota ottamaan kyseisen kolmiulotteisen vĂ€riavaruuden ja vĂ€hentĂ€mÀÀn sen kaksiulotteiseksi kĂ€yttöliittymĂ€ksi . Siksi kaikilla vĂ€rinvalitsijilla on vĂ€hintÀÀn kaksi (joskus kolme) akselia – kĂ€yttĂ€jĂ€n on valittava x, y ja z; niiden sĂ€vy, kyllĂ€isyys ja arvo. Ja suunnittelutiimillemme nĂ€mĂ€ valinnat merkitsevĂ€t ylimÀÀrĂ€isiĂ€ napsautuksia. Napsautusten minimoimiseksi kysyimme itseltĂ€mme, mitkĂ€ olivat tĂ€rkeimmĂ€t ja vĂ€hiten tĂ€rkeĂ€t.

SÀvyn valitseminen on tÀrkein napsautus; kyllÀisyyden valitseminen on vÀhiten tÀrkeÀ napsautus.

SÀvy on ensimmÀinen asia, jonka ajattelemme ajatellessamme vÀrin valitsemista. Ja kun videosoitin sovitetaan tuotemerkin vÀreihin, kyllÀisyys on viimeinen asia, jonka ajattelemme. TÀmÀ johtuu siitÀ, ettÀ useimmat tuotemerkin vÀrit ovat tÀysikyllÀisyyttÀ, ja vaikka olisitkin, luultavasti silti ajattelet niitÀ tÀllÀ tavalla. TÀmÀ tarkoittaa, ettÀ monet kÀyttÀjÀt eivÀt koskaan halua kyllÀisyyden olevan muuta kuin 100, ja jos se on hÀnen oma napsautuksensa, se on napsautus, jonka voimme vÀlttÀÀ. TÀmÀ jÀttÀÀ vain sÀvyn ja arvon valittavaksi, jotka voivat olla 2-ulotteisen kentÀn akselit ja valittavissa yhdellÀ napsautuksella.

VÀrivalitsin, joka nÀyttÀÀ kaksi osaa, joista ensimmÀinen on sÀvyn ja vaaleuden matriisi, toinen kyllÀisyydellÀ merkitty spektri
YhdellÀ napsautuksella kÀyttÀjÀ valitsee sÀvyn ja vaaleuden. Toista napsautusta, kyllÀisyyden vÀhentÀmiseksi, ei usein tarvita.

Katso! A vÀrivalinta yhdellÀ napsautuksella. Mutta entÀ esteettömyys? Voimme lisÀtÀ auttajatekstin, joka selittÀÀ miksi kontrasti on tÀrkeÀ (teemme niin) ja nÀyttÀÀ lasketun kontrastisuhteen ja tÀyttÀÀkö se standardin (teemme myös sen), mutta tehtÀvÀ työ on silti valinta . KÀyttÀjiemme on ymmÀrrettÀvÀ, mistÀ heidÀn on valittava, menettÀmÀttÀ kontekstia kaikilla vaihtoehdoilla. Loppujen lopuksi vÀrinvalitsimet ovat riittÀvÀn monimutkaisia, ja pÀÀ kiertÀminen tapahtumien ympÀrille on helpompaa animaatiolla, joka nÀyttÀÀ vietÀvÀn.

Animoi gif vÀrivalitsimesta, joka siirtyy tÀydestÀ spektristÀ rajoitetun spektrin vain suurikontrastisiin vÀreihin

Ratkaisumme lisÀÀ napsautuksen, mutta vain yksi. Kun napsautat valintaruutua, valitsin peittÀÀ kaikki arvot, jotka eivÀt luo riittÀvÀn suurta kontrastia valkoisen soittimen sÀÀtimiin nÀhden, jotta niitÀ voidaan pitÀÀ kÀytettÀvissÀ. Jos edellinen asetuksesi ei kuulu hyvÀksyttÀvÀlle alueelle, sÀvy pysyy samana ja vaaleus laskee korkeimmalle hyvÀksyttÀvÀlle tasolle.

Laskelma perustuu verkkosisÀllön esteettömyyskillan tarjoamaan matematiikkaan. , jonka AA-standardin perusteella perustamme esteettömyystyömme. SieltÀ sisÀllytÀmme uuden kevyystekijÀn Wistia-soittimen 80\%: n opasiteetin huomioon ottamiseksi. TÀmÀ tarkoittaa, ettÀ pienimmÀn kontrastin skenaario, kun soitin on pÀÀllekkÀin puhtaalla valkoisella, johtaa silti riittÀvÀÀn kontrastiin.

TÀmÀ vÀrivalitsin on vain pieni osa esteettömyystyökaluistamme, joka sisÀltÀÀ tarkistuslistan jokaiselle video ja hyödylliset työkaluvihjeet koko rÀÀtÀlöintiprosessin aikana selittÀen, kuinka erilaiset valinnat vaikuttavat esteettömyyteen. Suuri osa työstÀ on tehty Wistian kulissien takana, mutta opastamalla kÀyttÀjiÀ heidÀn mukautettavissa olevissa asetuksissaan pyrimme tekemÀÀn esteettömyydestÀ helpon valinnan.

Vastaa

SÀhköpostiosoitettasi ei julkaista. Pakolliset kentÀt on merkitty *