De pasatiempo vacacional a un explorador de colores inclusivos

En casi todos los proyectos digitales, la fase de diseño de la interfaz es especialmente ilusionante. En nuestro caso, nos encontramos desarrollando la guía de estilo para Aljibe, una plataforma de datos para la Economía Social. La propuesta inicial de nuestra diseñadora, Clara de Freepress, fue excelente; el color principal, un aguamarina, nos gustaba, pero presentaba un contraste insuficiente para su uso en textos, lo que nos llevó a preocuparnos por garantizar la accesibilidad.

Ha coincidido que estaba de vacaciones. Hay quien se puede entretener un día lluvioso y con mala cobertura con pasatiempos tradicionales; para mí, crear cosas digitales también es un pasatiempo. Así que se me ocurrió que, para intentar agilizar la búsqueda de colores accesibles, podía crear una herramienta para explorar colores, sencilla y ligera, sin muchas pretensiones, solo algo funcional.

Accesibilidad como Tecnología Responsable

Para Simbiótica, como cooperativa que trabaja bajo la perspectiva de la tecnología responsable, la accesibilidad no es un requisito legal que cumplir, sino un principio fundamental. Es una extensión de los valores de inclusión, equidad y cooperación de la Economía Social y Solidaria. Construir una web no accesible es crear barreras. Es una decisión de diseño y desarrollo que, consciente o inconscientemente, deja a muchas personas fuera. Nuestro compromiso es el contrario: usar la tecnología para tender puentes.

Entendiendo el contraste y las WCAG

Para que esta inclusión no sea una mera declaración de intenciones, existen unos estándares internacionales llamados Pautas de Accesibilidad para el Contenido Web (WCAG). Estas guías, desarrolladas por el W3C, nos dan un marco de trabajo claro. Uno de sus pilares es el contraste de color. El contraste se basa en la luminancia, que es, simplificando mucho, la cantidad de luz que un color emite o refleja. Un amarillo puro tiene mucha más luminancia que un azul marino.

El problema es que nuestra percepción del color es subjetiva. Dos colores que para una persona son muy distintos, como un rojo y un verde brillantes, pueden tener niveles de luminancia muy similares, lo que los hace casi indistinguibles para personas con daltonismo. Por eso, las WCAG establecen un ratio de contraste matemático, que mide la diferencia de luminancia entre el texto y su fondo. Cuanto mayor es el ratio, más legible es para todo el mundo. Los niveles principales son:

• Nivel AA: Es el estándar y el exigido, por ejemplo, a administraciones públicas. Exige un ratio de al menos 4.5:1 para texto normal y 3:1 para texto grande o iconos. Es el equilibrio perfecto entre flexibilidad de diseño y una buena legibilidad para la mayoría. Leer más
• Nivel AAA: Es el nivel más estricto. Requiere un ratio de 7:1 para texto normal y 4.5:1 para texto grande. Es el objetivo ideal para webs con mucho texto o dirigidas a audiencias con necesidades visuales específicas. Leer más

¿Cómo funciona la herramienta por dentro?

Para las más interesadas en lo técnico, no tiene tecnología punta pero tiene sus detallitos. El explorador se basa en tres pilares técnicos sencillos:

1. Generación de Paleta (HSL): En lugar de usar una lista fija de colores, la herramienta genera la matriz dinámicamente usando el modelo de color HSL (del inglés Hue, Saturation, Lightness). Cada slider tiene un propósito, facilitando explorar todo el espectro de colores de forma intuitiva:
   • El tono define el color base (rojo, verde, azul…)
   • La saturación controla su intensidad (de gris a un color vivo)
   • La luminosidad ajusta cuánto blanco o negro tiene.
2. Cálculo de Contraste (WCAG): Implementa la fórmula matemática oficial de las WCAG para medir la diferencia de luminancia y ofrecer un ratio objetivo de legibilidad.
3. Frontend: Está construida con HTML, CSS y JavaScript puros, sin frameworks complejos. ¿Por qué? Porque ha sido un pasatiempo de vacaciones en manos de una científica de datos, no era la parte en la que quería entretenerme 🙂. Simplemente es ligera y funciona en cualquier navegador sin necesidad de un servidor. Para la interfaz, se ha usado Tailwind CSS, que permite maquetar de forma ágil y es muy sencilla. No es una herramienta perfecta, y existen vías de trabajo hacia criterios de contraste más complejos y precisos. Si hay interés, tal vez en el futuro los exploremos. Podríamos pensar incluso en experimentar con alguna técnica de ciencia de datos para sugerir paletas completas. 🤗

Una herramienta abierta para la comunidad

Este explorador ha nacido para resolver un problema nuestro, inicialmente no tiene grandes pretensiones, pero esperamos que le sea útil a toda la comunidad de diseño y desarrollo.

• Prueba la herramienta aquí: https://simbiotica-coop.gitlab.io/public-toolbox/wcag-color-explorer/
• Código en nuestro GitLab: https://gitlab.com/simbiotica-coop/public-toolbox/wcag-color-explorer

Referencias y Enlaces de Interés

• Herramienta: Explorador de Colores Accesibles
• Código Fuente: Repositorio en GitLab
• WCAG: Pautas de Accesibilidad para el Contenido Web (Sitio oficial del W3C)
• Contraste Mínimo (Nivel AA): Explicación detallada de ADDAW
• Contraste Mejorado (Nivel AAA): Explicación detallada de ADDAW
• Fórmula de Luminancia Relativa: Especificación técnica de las WCAG
• Modelo de Color HSL: Artículo en Wikipedia
• Tailwind CSS: Repositorio en GitHub