🌈 🧐 Un selector de color con opinión

Publicado el

(20 de marzo de 2020)

En toda la web, los diseñadores e ingenieros están mejorando en la construcción teniendo en cuenta la accesibilidad. En Wistia, la actualización más reciente de nuestro reproductor de video fue un gran paso adelante, con mejoras para que sea fácil de leer, navegable con teclado y compatible con descripciones de audio.

Un selector de color con una casilla de verificación seleccionada que dice

Pero A pesar de lo fantástico y talentoso que es el equipo aquí, hay algunos aspectos de la accesibilidad de video que simplemente no podemos arreglar detrás de escena. Depende de los creadores de videos ordenar subtítulos, agregar texto alternativo descriptivo a sus imágenes en miniatura y elegir el color de su reproductor que se adapte a su marca. Y esa elección tiene un gran impacto en la accesibilidad, ya que un color de fondo claro puede hacer que el texto y los íconos tengan poco contraste, hasta el punto de ser ilegibles.

El control sobre la apariencia del reproductor es una de las características que nuestros clientes mencionan más como la razón para elegir Wistia, pero también es una opción que puede afectar gravemente el acceso sin que se den cuenta de lo que está en juego.

Para resolver este problema, nos propusimos para diseñar un selector de color que facilite la elección de la accesibilidad.

Ponerle un número, significa tomar una decisión informada con la menor cantidad de clics posible. En busca de una interfaz de usuario fácil y de baja fricción para la selección de color, hicimos un inventario de las millones (?) Formas diferentes de elegir el color. ¿Por qué todos estos son diferentes? ¿Por qué no existe un selector de color estándar? ¿Y cuál es la diferencia entre «Luminosidad» y «Brillo»?

Muchos selectores de color diferentes, que muestran diferentes diseños y estructuras de espacio de color

La respuesta está en el espacio de color tridimensional. Es decir, para representar con precisión todos los colores posibles, necesita una forma tridimensional. El modelo que se relaciona más directamente con nuestros instintos sobre el color es HSV: Hue (la mancha en el arco iris), Saturación (pureza de ese tono versus lo turbio que se convierte en gris), Valor (luminosidad de ese tono versus su mezcla con el blanco o negro). Cada una de esas tres variables es una dimensión necesaria para definir un color que se muestra en una pantalla.

Formas tridimensionales que representan el espacio de color: a columna, cono, cubo y esfera
Dato curioso: los valores hexadecimales de los colores se asignan no a HSV, sino a RGB (el menos intuitivo). Cada uno de los tres pares de caracteres representa un canal de color rojo, azul o verde en hexadecimal (base-16), por lo que #FF FF FF es blanco, porque los tres están maximizados como el 👆medio de la imagen de ese cubo, mientras que #FF 00 00 es rojo, porque solo el canal R está al máximo. Entonces, la cara izquierda de ese cubo son todos los colores que podría obtener si solo cambiara el canal R y los últimos cuatro caracteres de su código hexadecimal permanecieran FF FF.

Por muy interesante que sea que los usuarios elijan su color navegando por un mundo tridimensional hasta la coordenada (x, y, z) que mejor se adapte a su marca, no generaría pocos clics y buenas y rápidas elecciones. La razón por la que hay tantos selectores de color es que se requiere cierto grado de abstracción para tomar ese espacio de color tridimensional y reducirlo a una interfaz de usuario bidimensional . Es por eso que todos los selectores de color tienen al menos dos (a veces tres) ejes de elección: el usuario debe elegir su x, y y z; su tono, saturación y valor. Y para nuestro equipo de diseño, esas opciones significan clics adicionales. Para minimizar esos clics, nos preguntamos cuáles eran los más y los menos importantes.

Elegir un tono es el clic más importante; elegir la saturación es el clic menos importante.

El tono es lo primero en lo que pensamos cuando pensamos en elegir un color. Y en el contexto de hacer coincidir un reproductor de video con un color de marca, la saturación es la última cosa en la que pensamos. Esto se debe a que la mayoría de los colores de las marcas están completamente saturados e incluso cuando no lo están, es probable que todavía los veas de esa manera. Eso significa que muchos usuarios nunca querrán que la saturación sea diferente a 100, y si ese es su propio clic, es un clic que potencialmente podemos evitar. Eso deja solo el tono y el valor para elegir, que pueden ser los ejes de un campo bidimensional y se pueden seleccionar con un solo clic.

Un selector de color que muestra dos secciones, la primera una matriz de tono y luminosidad, la segunda un espectro denominado Saturación
Con un solo clic, el usuario selecciona el tono y la luminosidad. El segundo clic, para reducir la saturación, a menudo no es necesario.

¡Mirad! A elección de color con un solo clic. Pero ¿qué pasa con la accesibilidad? Podemos agregar texto de ayuda que explique por qué el contraste es importante (hacemos eso) y mostrar la relación de contraste calculada y si eso cumple con el estándar (también lo hacemos), pero el trabajo por hacer sigue siendo la elección . Nuestros usuarios deben comprender de qué tienen para elegir, sin perder el contexto del espectro completo de opciones. Después de todo, los selectores de color son bastante complicados y es más fácil entender lo que está sucediendo con una animación que muestra lo que se está quitando.

Un gif animado del selector de color pasando del espectro completo a un espectro limitado de solo colores de alto contraste

Nuestra solución agrega un clic, pero solo uno. Cuando haces clic en la casilla de verificación, el selector enmascara los valores que no crean un contraste lo suficientemente alto con los controles del reproductor blanco para que se considere accesible. Si su configuración anterior no cae dentro del rango aceptable, el tono permanece igual y la Luminosidad cae al nivel más alto aceptable.

El cálculo se basa en las matemáticas proporcionadas por el Web Content Accessibility Guild , en cuyo estándar AA basamos nuestro trabajo de accesibilidad. A partir de ahí, incorporamos un factor de luminosidad adicional para dar cuenta del 80\% de opacidad del reproductor Wistia. Eso significa que el escenario de contraste más bajo, cuando el reproductor se superpone sobre blanco puro, aún da como resultado un contraste suficiente.

Este selector de color es solo una pequeña parte de nuestras herramientas de accesibilidad, que incluye una lista de verificación para cada video e información sobre herramientas útiles a lo largo del proceso de personalización que explica cómo las diferentes opciones afectan la accesibilidad. Gran parte de ese trabajo lo realiza Wistia entre bastidores, pero guiar a los usuarios a través de la configuración que tienen que ajustar es nuestra forma de trabajar para que la accesibilidad sea una elección fácil.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *