🌈 🧐 En Opinionated Color Picker

(20. mars 2020)

Over hele nettet blir designere og ingeniører bedre til å bygge med tilgjengelighet i tankene. Hos Wistia var den siste oppdateringen av videospilleren vår et stort skritt fremover, med forbedringer for å gjøre den skjermleservennlig, tastaturnavigerbar og i stand til å støtte lydbeskrivelser.

En fargevelger med en avkrysningsrute som lyder

Men så fantastisk og så talentfullt som teamet her er, er det noen aspekter av videotilgjengelighet som vi bare ikke kan fikse bak kulissene. Det er fortsatt opp til videoskapere å bestille bildetekster, legge til beskrivende alt-tekst i miniatyrbildene og velge fargen på spilleren som passer for deres merke. Og det valget har stor innvirkning på tilgjengeligheten, siden en lys bakgrunnsfarge kan gjøre tekst og ikoner lav kontrast, til det punktet er uleselig.

Kontroll over utseendet og følelsen til spilleren er en av funksjonene kundene våre nevner mest som årsaken til at de valgte Wistia, men det er også et valg som kan ha alvorlig innvirkning på tilgangen uten at de er klar over hva som står på spill.

For å løse dette problemet, satte vi ut å utforme en fargevelger som gjør det lett å velge tilgjengelighet.

Å sette et nummer på det betyr at du tar et informert valg med så få klikk som mulig. På utkikk etter et enkelt brukergrensesnitt med lav friksjon for fargeplukking, tok vi oversikt over de millioner (?) Forskjellige måtene å ta et fargevalg. Hvorfor er alle disse forskjellige? Hvorfor er det ingen standard for fargevalg? Og hva er forskjellen mellom «Lyshet» og «Lysstyrke»?

Mange forskjellige fargevelgere, som viser forskjellige oppsett og strukturer i fargerommet

Svaret ligger i et tredimensjonalt fargerom. Det vil si at for å kunne skildre alle mulige farger nøyaktig, trenger du en tredimensjonal form. Modellen som kartlegger mest direkte til våre instinkter om farge er HSV: Fargetone (flekken på regnbuen), Metning (renheten til den fargetone kontra sølet av den blir grå), Verdi (lysstyrken på den fargetone kontra den blander seg i hvitt eller svart). Hver av disse tre variablene er en nødvendig dimensjon for å definere en farge som vises på en skjerm.

Tredimensjonale former som representerer fargerom: a kolonne, kjegle, terning og kule
Morsomt faktum: Hexverdiene til farger tilordner ikke HSV, men (den mindre intuitive) RGB. Hvert av de tre par tegnene representerer en rød, blå eller grønn fargekanal i heksadesimal (base-16), så #FF FF FF er hvit, fordi alle tre er maksimert som 👆midlet av bildet av den kuben, mens #FF 00 00 er rødt, fordi bare R-kanalen er maks. Så venstre side av kuben er alle fargene du kan få hvis du bare endret R-kanalen og de fire siste tegnene i heksekoden din ble FF FF.

Så pent som det ville være å få brukerne til å velge farge ved å navigere i en tredimensjonal verden til (x, y, z) -koordinaten som passer best med deres merke, det ville ikke føre til få klikk og raske, gode valg. Årsaken til at det er så mange fargevelgere er at det krever en grad av abstraksjon å ta det tredimensjonale fargerommet og redusere det til et todimensjonalt brukergrensesnitt . Derfor har alle fargeplukkere minst to (noen ganger tre) valgakser – brukeren må velge x, y og z; deres fargetone, metning og verdi. Og for designteamet vårt betyr disse valgene ekstra klikk. For å minimere disse klikkene spurte vi oss selv om hva som var viktigst og minst viktig.

Å velge en nyanse er det viktigste klikket; å velge metning er det minst viktige klikket.

Fargetone er det første vi tenker på når vi tenker på å velge en farge. Og i sammenheng med å matche en videospiller til en merkefarge, er metning den siste tingen vi tenker på. Det er fordi de fleste merkefargene er fullmetning, og selv når de ikke er det, tenker du sannsynligvis fortsatt på den måten. Det betyr at mange brukere aldri vil at metningen skal være noe annet enn 100, og hvis det er sitt eget klikk, er det et klikk vi potensielt kan unngå. Det etterlater bare fargetone og verdi å velge, som kan være aksene til et todimensjonalt felt, og som kan velges med ett enkelt klikk.

En fargevelger som viser to seksjoner, den første en matrise av fargetone og lyshet, den andre et spektrum merket metning
Med et enkelt klikk velger brukeren fargetone og lyshet. Det andre klikket, for å skru ned metningen, er ofte ikke nødvendig.

Se! A fargevalg med et enkelt klikk. Men hva med tilgjengelighet? Vi kan legge til hjelpertekst som forklarer hvorfor kontrast er viktig (vi gjør det) og viser det beregnede kontrastforholdet og om det oppfyller standarden (vi gjør det også), men arbeidet som skal gjøres er fortsatt valget . Våre brukere må forstå hva de har å velge mellom, uten å miste konteksten for hele spekteret av alternativer. Fargevalg er tross alt komplisert nok, og det er lettere å pakke hodet rundt det som skjer, med en animasjon som viser hva som blir tatt bort.

Et animert gif av fargevelgeren som går fra hele spekteret til et begrenset spekter av bare høykontrastfarger

Vår løsning legger til et klikk, men bare en. Når du klikker i avkrysningsboksen, maskerer velgeren verdier som ikke skaper høy nok kontrast mot de hvite spillerens kontroller for å bli ansett tilgjengelige. Hvis den forrige innstillingen ikke faller innenfor akseptabelt område, forblir fargetonen den samme og lysheten faller ned til det høyeste akseptable nivået.

Beregningen er basert på matematikken som leveres av Web Content Accessibility Guild. , hvis AA-standard vi baserer tilgjengelighetsarbeidet vårt på. Derfra bruker vi en ekstra lysfaktor for å ta høyde for 80\% opasiteten til Wistia-spilleren. Det betyr at scenariet med lavest kontrast, når spilleren er overlappet over ren hvit, fremdeles resulterer i en tilstrekkelig kontrast.

Denne fargevelgeren er bare en liten del av vårt tilgjengelighetsverktøy, som inkluderer en sjekkliste for alle video og nyttige verktøytips gjennom tilpasningsprosessen som forklarer hvordan forskjellige valg påvirker tilgjengeligheten. Mye av dette arbeidet gjøres av Wistia bak kulissene, men det å veilede brukere gjennom innstillingene de må justere, er hvordan vi jobber for å gjøre tilgjengelighet til et enkelt valg å gjøre.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *