🌈 🧐 Un raccoglitore di colori opinionato

Pubblicato il

(20 marzo 2020)

In tutto il Web, designer e ingegneri stanno migliorando nella creazione tenendo conto dellaccessibilità. In Wistia, laggiornamento più recente del nostro lettore video è stato un grande passo avanti, con miglioramenti per renderlo adatto alla lettura dello schermo, navigabile dalla tastiera e in grado di supportare le descrizioni audio.

Un selettore di colori con una casella di controllo selezionata che legge

Ma per quanto fantastico e talentuoso come il team qui, ci sono alcuni aspetti dellaccessibilità video che non possiamo risolvere dietro le quinte. Spetta ancora ai creatori di video ordinare i sottotitoli, aggiungere un testo alternativo descrittivo alle loro immagini in miniatura e scegliere il colore del loro lettore che si adatta al loro marchio. E questa scelta ha un grande impatto sullaccessibilità, poiché un colore di sfondo chiaro può rendere il testo e le icone a basso contrasto, al punto da renderli illeggibili.

Il controllo sullaspetto del giocatore è uno dei caratteristiche menzionate maggiormente dai nostri clienti come motivo per scegliere Wistia, ma è anche una scelta che può influire gravemente sullaccesso senza che si rendano conto della posta in gioco.

Per risolvere questo problema, abbiamo deciso progettare un selettore di colori che renda laccessibilità facile da scegliere.

Per mettere un numero su di esso, ciò significa fare una scelta informata con il minor numero di clic possibile. Alla ricerca di uninterfaccia utente semplice ea basso attrito per la selezione dei colori, abbiamo fatto il punto sui milioni (?) Di modi diversi per scegliere il colore. Perché sono tutti diversi? Perché non esiste uno standard per la selezione dei colori? E qual è la differenza tra “Luminosità” e “Luminosità”?

Molti selettori di colori diversi, che mostrano diversi layout e strutture dello spazio colore

La risposta sta nello spazio colore tridimensionale. Cioè, per rappresentare accuratamente tutti i colori possibili, è necessaria una forma tridimensionale. Il modello che mappa più direttamente i nostri istinti riguardo al colore è HSV: Hue (il punto sullarcobaleno), Saturazione (purezza di quella tonalità rispetto alla sua sfumatura che si trasforma in grigio), Value (luminosità di quella tonalità rispetto alla sua fusione nel bianco o nero). Ciascuna di queste tre variabili è una dimensione necessaria per definire un colore visualizzato su uno schermo.

Forme tridimensionali che rappresentano lo spazio colore: a colonna, cono, cubo e sfera
Curiosità: i valori esadecimali dei colori mappati non su HSV, ma (il meno intuitivo) RGB. Ciascuna delle tre coppie di caratteri rappresenta un canale di colore rosso, blu o verde in esadecimale (base-16), quindi #FF FF FF è bianco, perché tutti e tre sono al massimo come il 👆mezzo dellimmagine di quel cubo, mentre #FF 00 00 è rosso, perché solo il canale R è al massimo. Quindi, la faccia sinistra di quel cubo contiene tutti i colori che potresti ottenere se cambiassi solo il canale R e gli ultimi quattro caratteri del tuo codice esadecimale rimanessero FF FF.

Per quanto semplice sarebbe se gli utenti scegliessero il loro colore navigando in un mondo tridimensionale fino alla coordinata (x, y, z) che meglio si adatta al loro marchio, non comporterebbe pochi clic e scelte rapide e valide. Il motivo per cui ci sono così tanti selettori di colori è che è necessario un certo grado di astrazione per prendere quello spazio colore tridimensionale e ridurlo a una interfaccia utente bidimensionale . Ecco perché tutti i selettori di colori hanno almeno due (a volte tre) assi di scelta: lutente deve scegliere la propria x, yez; la loro tonalità, saturazione e valore. E per il nostro team di progettazione, queste scelte significano clic extra. Per ridurre al minimo questi clic, ci siamo chiesti quale fosse il più o il meno importante.

La scelta di una tonalità è il clic più importante; scegliere la saturazione è il clic meno importante.

La tonalità è la prima cosa a cui pensiamo quando pensiamo di scegliere un colore. E nel contesto dellabbinamento di un lettore video al colore di un brand, la saturazione è l ultima cosa a cui pensiamo. Questo perché la maggior parte dei colori del marchio sono a piena saturazione e, anche quando non lo sono, probabilmente li pensi ancora in questo modo. Ciò significa che molti utenti non vorranno mai che la saturazione sia altro che 100 e, se si tratta del suo clic, è un clic che possiamo potenzialmente evitare. Ciò lascia solo la tonalità e il valore da scegliere, che possono essere gli assi di un campo bidimensionale e selezionabili con un solo clic.

Un selettore di colori che mostra due sezioni, la prima una matrice di Tonalità e Luminosità, la seconda uno spettro denominato Saturazione
Con un solo clic, lutente seleziona tonalità e luminosità. Il secondo clic, per abbassare la saturazione, spesso non è necessario.

Guarda! A scelta del colore in un solo clic. Ma per quanto riguarda laccessibilità? Possiamo aggiungere un testo di aiuto che spiega perché il contrasto è importante (lo facciamo) e mostra il rapporto di contrasto calcolato e se soddisfa lo standard (lo facciamo anche noi), ma il lavoro da fare è ancora la scelta . I nostri utenti devono capire cosa devono scegliere, senza perdere il contesto dellintero spettro di opzioni. Dopotutto, i selettori di colore sono abbastanza complicati e capire cosa sta succedendo è più facile con unanimazione che mostra cosa viene portato via.

Una gif animata del selettore di colori che passa dallo spettro completo a uno spettro limitato di soli colori ad alto contrasto

La nostra soluzione aggiunge un clic, ma solo uno. Quando fai clic sulla casella di controllo, il selettore maschera i valori che non creano un contrasto sufficientemente elevato rispetto ai controlli bianchi del player per essere considerati accessibili. Se limpostazione precedente non rientra nellintervallo accettabile, la tonalità rimane la stessa e la luminosità scende al livello accettabile più alto.

Il calcolo si basa sui calcoli forniti dalla Web Content Accessibility Guild , sul cui standard AA basiamo il nostro lavoro sullaccessibilità. Da lì, incorporiamo un fattore di luminosità aggiuntivo per tenere conto dell80\% di opacità del lettore Wistia. Ciò significa che lo scenario con il contrasto più basso, quando il lettore è sovrapposto al bianco puro, risulta comunque in un contrasto sufficiente.

Questo selettore di colori è solo una piccola parte dei nostri strumenti di accessibilità, che include una video e suggerimenti utili durante il processo di personalizzazione che spiegano come le diverse scelte influiscono sullaccessibilità. Gran parte di questo lavoro viene svolto da Wistia dietro le quinte, ma guidare gli utenti attraverso le impostazioni che devono regolare è il modo in cui stiamo lavorando per rendere laccessibilità una scelta facile da fare.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *