ūüĆą ūüßź En opfattet farvev√¶lger

(20. marts 2020)

P√• nettet bliver designere og ingeni√łrer bedre til at bygge med tilg√¶ngelighed i tankerne. Hos Wistia var den seneste opdatering til vores videoafspiller et stort skridt fremad med forbedringer for at g√łre den sk√¶rml√¶servenlig, tastaturvenlig og i stand til at underst√łtte lydbeskrivelser.

En farvevælger med et afkrydsningsfelt valgt, der læser

Men s√• fantastisk og s√• talentfuldt som holdet her er, er der nogle aspekter af videotilg√¶ngelighed, som vi bare ikke kan l√łse bag kulisserne. Det er stadig op til videoskabere at bestille billedtekster, tilf√łje beskrivende alt-tekst til deres miniaturebilleder og v√¶lge den farve p√• deres afspiller, der passer til deres brand. Og dette valg har stor indflydelse p√• tilg√¶ngeligheden, da en lys baggrundsfarve kan g√łre tekst og ikoner lav kontrast, indtil det er ul√¶seligt.

Kontrol over afspillerens udseende og f√łlelse er en af funktioner, som vores kunder n√¶vner mest som grunden til at v√¶lge Wistia, men det er ogs√• et valg, der kan p√•virke adgangen alvorligt, uden at de er klar over, hvad der st√•r p√• spil.

For at l√łse dette problem, satte vi os ud at designe en farvev√¶lger, der g√łr tilg√¶ngeligheden let at v√¶lge.

At s√¶tte et nummer p√• det betyder at tr√¶ffe et informeret valg med s√• f√• klik som muligt. P√• udkig efter en nem brugergr√¶nseflade med lav friktion til farveplukning gjorde vi status over de millioner (?) Forskellige m√•der at foretage et farvevalg p√•. Hvorfor er alle disse forskellige? Hvorfor er der ingen farvev√¶lgerstandard? Og hvad er forskellen mellem “lysstyrke” og “lysstyrke”?

Masser af forskellige farvevælgere, der viser forskellige layout og strukturer i farverummet

Svaret ligger i et tredimensionelt farverum. Det vil sige at du har brug for en tredimensionel form for n√łjagtigt at skildre alle mulige farver. Den model, der kortl√¶gges mest direkte efter vores instinkter om farve, er HSV: Farvetone (stedet p√• regnbuen), M√¶tning (renhed af den nuance kontra mudderet ved at blive gr√•), V√¶rdi (lysstyrken af ‚Äč‚Äčden nuance kontra den blander sig i hvid eller sort). Hver af disse tre variabler er en n√łdvendig dimension til at definere en farve, der vises p√• en sk√¶rm.

Tredimensionelle former, der repræsenterer farverum: a kolonne, kegle, terning og kugle
Sjov kendsgerning: de hex-v√¶rdier af farver kortl√¶gges ikke til HSV, men (den mindre intuitive) RGB. Hvert af de tre par tegn repr√¶senterer en r√łd, bl√• eller gr√łn farvekanal i hexadecimal (base-16), s√• #FF FF FF er hvid, fordi alle tre er maksimeret som midten af ‚Äč‚Äčbilledet af den terning, hvorimod #FF 00 00 er r√łd, fordi kun R-kanalen maksimeres. S√• venstre kub er alle de farver, du kan f√•, hvis du kun √¶ndrede R-kanalen, og de sidste fire tegn i din hex-kode blev FF FF.

Så pænt som det ville være at få brugerne til at vælge deres farve ved at navigere i en tredimensionel verden til (x, y, z) koordinaten, der bedst matcher deres brand, det ville ikke resultere i få klik og hurtige, gode valg. Årsagen til, at der er så mange farvevælgere, er at det kræver en grad af abstraktion at tage det tredimensionelle farveområde og reducere det til et todimensionalt brugergrænseflade . Derfor har alle farvevælgerne mindst to (undertiden tre) valgakser Рbrugeren skal vælge deres x, y og z; deres nuance, mætning og værdi. Og for vores designteam betyder disse valg ekstra klik. For at minimere disse klik spurgte vi os, hvilke der var vigtigst og mindst vigtige.

At vælge en nuance er det vigtigste klik; at vælge mætning er det mindst vigtige klik.

Nuance er den f√łrste ting, vi t√¶nker p√•, n√•r vi t√¶nker p√• at v√¶lge en farve. Og i sammenh√¶ng med at matche en videoafspiller til en brandfarve er m√¶tning den sidste ting, vi t√¶nker p√•. Det er fordi de fleste m√¶rkefarver er fuldm√¶tning, og selv n√•r de ikke er det, t√¶nker du sandsynligvis stadig p√• dem p√• den m√•de. Det betyder, at mange brugere aldrig vil have, at m√¶tningen skal v√¶re andet end 100, og hvis det er dets eget klik, er det et klik, vi potentielt kan undg√•. Det efterlader kun nuance og v√¶rdi at v√¶lge, hvilket kan v√¶re akserne i et todimensionelt felt og kan v√¶lges med et enkelt klik.

En farvev√¶lger, der viser to sektioner, den f√łrste en matrix af Hue og Lightness, den anden et spektrum m√¶rket Saturation
I et enkelt klik v√¶lger brugeren nuance og lysstyrke. Det andet klik for at skrue ned for m√¶tning er ofte ikke n√łdvendigt.

Se! A farvevalg med et enkelt klik. Men hvad med tilg√¶ngelighed? Vi kan tilf√łje hj√¶lpertekst, der forklarer, hvorfor kontrast er vigtig (vi g√łr det) og viser det beregnede kontrastforhold, og om det opfylder standarden (det g√łr vi ogs√•), men det arbejde, der skal udf√łres, er stadig valget . Vores brugere er n√łdt til at forst√•, hvad de har at v√¶lge imellem, uden at miste sammenh√¶ngen med hele spektret af muligheder. Farvev√¶lgerne er trods alt komplicerede nok, og det er lettere at pakke dit hoved rundt om, hvad der sker, med en animation, der viser, hvad der bliver taget v√¶k.

En animeret gif af farvev√¶lgeren, der overg√•r fra det fulde spektrum til et begr√¶nset spektrum af kun farver med h√łj kontrast

Vores l√łsning tilf√łjer et klik, men bare en. N√•r du klikker p√• afkrydsningsfeltet, maskerer plukkeren alle v√¶rdier, der ikke skaber h√łj nok kontrast mod de hvide afspillerkontroller for at blive betragtet som tilg√¶ngelige. Hvis din tidligere indstilling ikke falder inden for det acceptabelt interval, forbliver nuancen den samme, og lysstyrken falder ned til det h√łjst acceptable niveau.

Beregningen er baseret p√• den matematik, der leveres af Web Content Accessibility Guild. , hvis AA-standard vi baserer vores tilg√¶ngelighedsarbejde p√•. Derfra inkorporerer vi en yderligere lysfaktor for at tage h√łjde for Wistia-afspillerens 80\% opacitet. Det betyder, at scenariet med den laveste kontrast, n√•r afspilleren er overlagt over ren hvid, stadig resulterer i en tilstr√¶kkelig kontrast.

Denne farvev√¶lger er kun en lille del af vores tilg√¶ngelighedsv√¶rkt√łj, som inkluderer en tjekliste til alle video og nyttige v√¶rkt√łjstip gennem hele tilpasningsprocessen, der forklarer, hvordan forskellige valg p√•virker tilg√¶ngelighed. Meget af dette arbejde udf√łres af Wistia bag kulisserne, men det at guide brugere gennem de indstillinger, de skal justere, er, hvordan vi arbejder p√• at g√łre tilg√¶ngelighed til et let valg at foretage.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *