Un color de acento que sale de tu imagen sin romper la accesibilidad
En las herramientas de imagen de Utilitarios, la interfaz cambia de color según la foto que cargas. Si subes un atardecer, los botones y acentos se tiñen de naranja; si subes un bosque, de verde. Es un detalle que hace sentir la herramienta viva. También es una forma muy fácil de romper la accesibilidad, porque el color deja de estar bajo control del diseño.
Paso 1: el color dominante
La imagen se dibuja reducida en un canvas y se recorren sus píxeles. Se descartan los casi transparentes, los casi blancos y los casi negros, que no aportan tono. Con el resto se agrupan colores parecidos y se toma el grupo más numeroso. Reducir la imagen primero hace que el cálculo tome milisegundos incluso con fotos grandes, y no cambia el resultado de forma apreciable.
Paso 2: la trampa de la luminosidad fija
Con el color dominante en mano, la idea inicial fue convertirlo a HSL, conservar su tono y su saturación, y fijar la luminosidad en un valor que funcionara para cada tema: más oscuro para el tema claro, más claro para el oscuro.
No funcionó. En las pruebas, los azules quedaban ilegibles en el tema oscuro y los amarillos ilegibles en el claro. La razón es que la luminosidad de HSL no corresponde a la luminosidad que percibe el ojo. Con el mismo valor de L, un amarillo se percibe mucho más claro que un azul. Un único número no puede servir para todos los tonos.
Paso 3: buscar la luminosidad por iteración
La solución fue dejar de adivinar y medir. Se conserva el tono de la imagen y se busca la luminosidad:
- Se parte de un valor inicial según el tema.
- Se calcula el contraste del color resultante contra el fondo con la fórmula de WCAG.
- Si no llega a 4,5 a 1, se oscurece un paso en el tema claro o se aclara un paso en el oscuro.
- Se repite hasta cumplir.
Es la misma fórmula que usa el script de contraste del proyecto, así que un color generado en tiempo real cumple exactamente el mismo estándar que la paleta fija. La búsqueda termina en pocos pasos y siempre encuentra solución, porque en el extremo el color llega a negro o blanco, que cumplen contra cualquier fondo intermedio.
Paso 4: una paleta, no un color
Con un solo acento no alcanza. Del color base se derivan las variantes que la interfaz necesita: el acento para texto y bordes, una versión suave para fondos de selección y el color del texto que va encima de un botón relleno. Cada una se verifica contra su propio fondo. Todas se aplican como variables CSS sobre el contenedor de la herramienta, de modo que el cambio es una sola asignación y el resto del sitio no se entera.
Detalles de experiencia
- El cambio de color se anima con una transición corta, para que no parezca un parpadeo.
- Si la imagen es casi monocromática y no hay tono dominante, se mantiene el acento de marca.
- Al quitar la imagen, el acento vuelve al de marca.
- Con preferencia de movimiento reducido, el cambio es inmediato.
La lección general
Cuando un color lo decide un dato y no el diseño, el contraste no se configura: se calcula.
Lo mismo aplica a colores elegidos por usuarios, como el color de marca que un cliente configura en su panel. Guardar el tono que eligió está bien; mostrarlo sin verificar su contraste contra el fondo es dejar la legibilidad al azar.