🌈 🧐 An Opinionated Color Picker

(20 maart 2020)

Op het web worden ontwerpers en ingenieurs steeds beter in het bouwen met toegankelijkheid in gedachten. Bij Wistia was de meest recente update van onze videospeler een grote stap voorwaarts, met verbeteringen om deze schermlezer-vriendelijk en toetsenbord-navigeerbaar te maken en audiobeschrijvingen te ondersteunen.

Een kleurkiezer met een selectievakje aangevinkt met de tekst

Maar Hoe fantastisch en getalenteerd het team hier ook is, er zijn enkele aspecten van videotoegankelijkheid die we achter de schermen gewoon niet kunnen oplossen. Het is nog steeds aan videomakers om ondertiteling te bestellen, beschrijvende alt-tekst aan hun miniatuurafbeeldingen toe te voegen en de kleur van hun speler te kiezen die bij hun merk past. En die keuze heeft een grote invloed op de toegankelijkheid, aangezien een lichte achtergrondkleur ervoor kan zorgen dat tekst en pictogrammen contrastrijk worden, tot het punt van onleesbaarheid.

Controle over het uiterlijk en het gevoel van de speler is een van de belangrijkste functies die onze klanten het meest noemen als de reden om voor Wistia te kiezen, maar het is ook een keuze die de toegang ernstig kan beïnvloeden zonder dat ze beseffen wat er op het spel staat.

Om dit probleem op te lossen, om een ​​kleurenkiezer te ontwerpen die toegankelijkheid gemakkelijk maakt.

Om er een nummer op te zetten, betekent dat een weloverwogen keuze maken in zo min mogelijk klikken. Op zoek naar een eenvoudige gebruikersinterface met weinig wrijving voor het kiezen van kleuren, hebben we de balans opgemaakt van de miljoen (?) Verschillende manieren om een ​​kleurkeuze te maken. Waarom zijn deze allemaal verschillend? Waarom is er geen standaard kleurkiezer? En wat is het verschil tussen ‘Lichtheid’ en ‘Helderheid’?

Veel verschillende kleurkiezers, met verschillende lay-outs en structuren van kleurruimte

Het antwoord ligt in driedimensionale kleurruimte. Dat wil zeggen, om alle mogelijke kleuren nauwkeurig weer te geven, hebt u een driedimensionale vorm nodig. Het model dat het meest direct aansluit bij onze instincten over kleur is HSV: Hue (de plek op de regenboog), Saturation (zuiverheid van die tint versus de troebelheid ervan die in grijs verandert), Value (lichtheid van die tint versus het overgaan in wit of zwart). Elk van deze drie variabelen is een noodzakelijke dimensie voor het definiëren van een kleur die op een scherm wordt weergegeven.

Driedimensionale vormen die kleurruimte vertegenwoordigen: a kolom, kegel, kubus en bol
Leuk feit: de hexadecimale waarden van kleuren worden niet toegewezen aan HSV, maar (de minder intuïtieve) RGB. Elk van de drie tekensparen vertegenwoordigt een rood, blauw of groen kleurkanaal in hexadecimaal (basis-16), dus #FF FF FF is wit, omdat ze alle drie zijn gemaximaliseerd zoals het midden van de afbeelding van die kubus, terwijl #FF 00 00 rood is, omdat alleen het R-kanaal maximaal is. Dus de linkerkant van die kubus bevat alle kleuren die je zou kunnen krijgen als je alleen het R-kanaal veranderde en de laatste vier tekens van je hex-code bleven FF FF.

Zo netjes als het zou zijn om gebruikers hun kleur te laten kiezen door een driedimensionale wereld te navigeren naar de (x, y, z) -coördinaat die het beste bij hun merk past, het zou niet resulteren in een paar klikken en snelle, goede keuzes. De reden dat er zoveel kleurkiezers zijn, is dat het een zekere mate van abstractie vereist om die driedimensionale kleurruimte te verkleinen tot een tweedimensionale gebruikersinterface . Daarom hebben alle kleurkiezers ten minste twee (soms drie) assen naar keuze – de gebruiker moet hun x, y en z kiezen; hun tint, verzadiging en waarde. En voor ons ontwerpteam betekenen die keuzes extra klikken. Om die klikken te minimaliseren, hebben we ons afgevraagd welke het meest en minst belangrijk waren.

Het kiezen van een tint is de belangrijkste klik; verzadiging kiezen is de minst belangrijke klik.

Kleurtoon is het eerste waar we aan denken als we nadenken over het kiezen van een kleur. En in de context van het afstemmen van een videospeler op een merkkleur, is verzadiging het laatste waar we aan denken. Dat komt omdat de meeste merkkleuren volledige verzadiging hebben, en zelfs als dat niet het geval is, denk je er waarschijnlijk nog steeds zo over. Dat betekent dat veel gebruikers nooit willen dat de verzadiging iets anders is dan 100, en als dat zijn eigen klik is, is het een klik die we mogelijk kunnen vermijden. Dat laat alleen de tint en waarde over om te kiezen, wat de assen van een tweedimensionaal veld kunnen zijn, en selecteerbaar met een enkele klik.

Een kleurenkiezer met twee secties, de eerste een matrix van tint en lichtheid, de tweede een spectrum met het label Saturation
Met een enkele klik selecteert de gebruiker de tint en lichtheid. De tweede klik, om de verzadiging te verlagen, is vaak niet nodig.

Zie! A kleurkeuze in een enkele klik. Maar hoe zit het met toegankelijkheid? We kunnen hulptekst toevoegen die uitlegt waarom contrast belangrijk is (dat doen we) en de berekende contrastverhouding laten zien en of dat voldoet aan de norm (dat doen we ook), maar het werk dat gedaan moet worden is nog steeds de keuze . Onze gebruikers moeten begrijpen waaruit ze moeten kiezen, zonder de context van het volledige spectrum aan opties te verliezen. Kleurenkiezers zijn tenslotte al ingewikkeld genoeg, en je hoofd rond wat er gebeurt is gemakkelijker met een animatie die laat zien wat er wordt weggehaald.

Een geanimeerde gif van de kleurkiezer die overgaat van het volledige spectrum naar een beperkt spectrum van alleen contrastrijke kleuren

Onze oplossing voegt een klik toe, maar een. Wanneer u op het selectievakje klikt, maskeert de kiezer alle waarden die niet voldoende hoog contrast creëren met de bedieningselementen van de witte speler om als toegankelijk te worden beschouwd. Als uw vorige instelling niet binnen het acceptabele bereik valt, blijft de tint hetzelfde en daalt de lichtheid naar het hoogst acceptabele niveau.

De berekening is gebaseerd op de wiskunde die wordt verstrekt door de Web Content Accessibility Guild , op wiens AA-norm we ons toegankelijkheidswerk baseren. Van daaruit voegen we een extra lichtheidsfactor toe om rekening te houden met de 80\% dekking van de Wistia-speler. Dat betekent dat het scenario met het laagste contrast, wanneer de speler over puur wit wordt gelegd, nog steeds een voldoende contrast oplevert.

Deze kleurenkiezer is slechts een klein onderdeel van onze toegankelijkheidstool, die een checklist bevat voor elke video en handige tooltips tijdens het aanpassingsproces waarin wordt uitgelegd hoe verschillende keuzes de toegankelijkheid beïnvloeden. Veel van dat werk wordt achter de schermen door Wistia gedaan, maar door gebruikers te begeleiden bij de instellingen die ze moeten aanpassen, werken we eraan om toegankelijkheid een gemakkelijke keuze te maken.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *