🌈 🧐 En yttrande fĂ€rgvĂ€ljare

(20 mars 2020)

PÄ nÀtet blir designers och ingenjörer bÀttre pÄ att bygga med tillgÀnglighet i Ätanke. PÄ Wistia var den senaste uppdateringen av vÄr videospelare ett stort steg framÄt, med förbÀttringar för att göra det skÀrmlÀsarvÀnligt, tangentbordet navigerbart och kunna stödja ljudbeskrivningar.

En fÀrgvÀljare med en kryssruta som markerar

Men sÄ fantastiskt och sÄ begÄvat som laget hÀr Àr, det finns nÄgra aspekter av videotillgÀnglighet som vi bara inte kan fixa bakom kulisserna. Det Àr fortfarande upp till videoskapare att bestÀlla bildtexter, lÀgga till beskrivande alt-text i miniatyrbilderna och vÀlja den fÀrg pÄ spelaren som passar deras varumÀrke. Och det valet har stor inverkan pÄ tillgÀngligheten, eftersom en ljus bakgrundsfÀrg kan göra text och ikoner lÄg kontraster, sÄ att de Àr olÀsliga.

Kontroll över spelarens utseende och kÀnsla Àr en av funktioner som vÄra kunder nÀmner mest som anledningen till att de vÀljer Wistia, men det Àr ocksÄ ett val som kan pÄverka Ätkomst allvarligt utan att de förstÄr vad som stÄr pÄ spel.

För att lösa detta problem satte vi oss att utforma en fÀrgvÀljare som gör det lÀtt att vÀlja tillgÀnglighet.

Att sĂ€tta ett nummer pĂ„ det innebĂ€r att göra ett informerat val med sĂ„ fĂ„ klick som möjligt. Letar du efter ett enkelt anvĂ€ndargrĂ€nssnitt med lĂ„g friktion för fĂ€rgplockning, gjorde vi en lista över de miljoner (?) Olika sĂ€tten att göra ett fĂ€rgval. Varför Ă€r alla dessa olika? Varför finns det ingen standard för fĂ€rgvĂ€ljare? Och vad Ă€r skillnaden mellan ”Ljushet” och ”Ljusstyrka”?

Massor av olika fÀrgvÀljare, som visar olika layouter och strukturer i fÀrgrymden

Svaret ligger i tredimensionellt fÀrgutrymme. Det vill sÀga, för att korrekt kunna skildra alla möjliga fÀrger behöver du en tredimensionell form. Modellen som kartlÀgger mest direkt till vÄra instinkter om fÀrg Àr HSV: Nyans (flÀcken pÄ regnbÄgen), MÀttnad (den nyans renhet kontra att den blir lerig i grÄ), VÀrde (ljusstyrkan hos den nyansen kontra att den smÀlter in i vit eller svart). Var och en av dessa tre variabler Àr en nödvÀndig dimension för att definiera en fÀrg som visas pÄ en skÀrm.

Tredimensionella former som representerar fÀrgrymd: a kolumn, kon, kub och sfÀr
Roligt faktum: HexvĂ€rdena för fĂ€rgerna kartlĂ€ggs inte till HSV utan (den mindre intuitiva) RGB. Var och en av de tre paren tecken representerar en röd, blĂ„ eller grön fĂ€rgkanal i hexadecimal (bas-16), sĂ„ #FF FF FF Ă€r vit, eftersom alla tre Ă€r maximerade som 👆mitten av bilden pĂ„ den kuben, medan #FF 00 00 Ă€r rött, eftersom endast R-kanalen Ă€r max. SĂ„ kubens vĂ€nstra sida Ă€r alla fĂ€rger som du kan fĂ„ om du bara Ă€ndrade R-kanalen och de fyra sista tecknen i din hexkod förblev FF FF.

SĂ„ snyggt som det skulle vara att anvĂ€ndare vĂ€ljer sin fĂ€rg genom att navigera i en tredimensionell vĂ€rld till (x, y, z) -koordinaten som bĂ€st matchar deras varumĂ€rke, det skulle inte resultera i fĂ„ klick och snabba, bra val. Anledningen till att det finns sĂ„ mĂ„nga fĂ€rgplockare Ă€r att det krĂ€ver en viss abstraktion för att ta det tredimensionella fĂ€rgutrymmet och reducera det till ett tvĂ„dimensionellt grĂ€nssnitt . Det Ă€r dĂ€rför som alla fĂ€rgvĂ€ljare har minst tvĂ„ (ibland tre) axlar att vĂ€lja – anvĂ€ndaren mĂ„ste vĂ€lja sina x, y och z; deras nyans, mĂ€ttnad och vĂ€rde. Och för vĂ„rt designteam betyder dessa val extra klick. För att minimera dessa klick frĂ„gade vi oss vilka som var viktigast och minst viktiga.

Att vÀlja en nyans Àr det viktigaste klicket; att vÀlja mÀttnad Àr det minst viktiga klicket.

Nyans Àr det första vi tÀnker pÄ nÀr vi tÀnker pÄ att vÀlja en fÀrg. Och i samband med att matcha en videospelare till en mÀrkesfÀrg Àr mÀttnad det sista som vi tÀnker pÄ. Det beror pÄ att de flesta mÀrkesfÀrger Àr fullmÀttade, och Àven nÀr de inte Àr det tÀnker du nog pÄ dem pÄ det sÀttet. Det betyder att mÄnga anvÀndare aldrig vill att mÀttnaden ska vara allt annat Àn 100, och om det Àr sitt eget klick Àr det ett klick vi potentiellt kan undvika. Det lÀmnar bara nyans och vÀrde att vÀlja, vilket kan vara axlarna i ett tvÄdimensionellt fÀlt och kan vÀljas med ett enda klick.

En fÀrgvÀljare som visar tvÄ sektioner, den första en matris av nyans och ljushet, den andra ett spektrum mÀrkt mÀttnad
I ett enda klick vÀljer anvÀndaren nyans och ljushet. Det andra klicket, för att minska mÀttnaden, behövs ofta inte.

Se! A fÀrgval med ett enda klick. Men hur Àr det med tillgÀnglighet? Vi kan lÀgga till hjÀlptext som förklarar varför kontrast Àr viktigt (vi gör det) och visar det berÀknade kontrastförhÄllandet och om det uppfyller standarden (det gör vi ocksÄ), men det arbete som ska göras Àr fortfarande valet . VÄra anvÀndare mÄste förstÄ vad de har att vÀlja mellan, utan att förlora sammanhanget med hela spektrumet av alternativ. NÀr allt kommer omkring Àr fÀrgvÀljare tillrÀckligt komplicerade, och det Àr lÀttare att lÀgga huvudet runt vad som hÀnder med en animering som visar vad som tas bort.

En animerad gif av fÀrgvÀljaren som övergÄr frÄn hela spektrumet till ett begrÀnsat spektrum av endast högkontrastfÀrger

VÄr lösning lÀgger till ett klick, men bara ett. NÀr du klickar pÄ kryssrutan, maskerar plockaren alla vÀrden som inte skapar tillrÀckligt hög kontrast mot de vita spelarens kontroller för att anses vara tillgÀngliga. Om din tidigare instÀllning inte faller inom acceptabelt intervall förblir nyansen densamma och ljusstyrkan sjunker ner till den högsta acceptabla nivÄn.

BerÀkningen baseras pÄ matematiken frÄn Web Content Accessibility Guild. , vars AA-standard vi baserar vÄrt tillgÀnglighetsarbete pÄ. DÀrifrÄn införlivar vi en ytterligare lÀtthetsfaktor för att ta hÀnsyn till Wistia-spelarens 80\% opacitet. Det betyder att scenariot med lÀgst kontrast, nÀr spelaren Àr överlagrad över rent vitt, fortfarande ger en tillrÀcklig kontrast.

Den hÀr fÀrgvÀljaren Àr bara en liten del av vÄrt tillgÀnglighetsverktyg, som innehÄller en checklista för varje video och anvÀndbara verktygstips under hela anpassningsprocessen som förklarar hur olika val pÄverkar tillgÀngligheten. Mycket av det arbetet utförs av Wistia bakom kulisserna, men att vÀgleda anvÀndare genom de instÀllningar de mÄste justera Àr hur vi arbetar för att göra tillgÀnglighet till ett enkelt val att göra.

LĂ€mna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fÀlt Àr mÀrkta *