Leonardo
Sistema de color accesible
Gratis
Plataformas soportadas
web
Etiquetas de herramienta
Qué es Leonardo
Leonardo es un sistema de gestión de color de código abierto diseñado para crear interfaces de usuario y paletas de visualización de datos adaptables y accesibles. A diferencia de los selectores de color estáticos, Leonardo utiliza una generación basada en ratios de contraste para garantizar que cada muestra en una escala cumpla con requisitos específicos de accesibilidad WCAG. Aprovecha espacios de color avanzados para obtener resultados perceptualmente uniformes, permitiendo a los diseñadores definir la luminosidad objetivo y los ratios de contraste en lugar de valores hexadecimales manuales. Al integrarse con el motor @adobe/leonardo-contrast-colors, permite a los desarrolladores exportar tokens de diseño que admiten la personalización de temas en tiempo real por parte del usuario final, incluyendo modo oscuro dinámico y ajustes de alto contraste.
Funciones principales de Leonardo
Generación basada en ratios de contraste
En lugar de seleccionar manualmente códigos hexadecimales, los usuarios definen ratios de contraste objetivo respecto a un fondo. Leonardo calcula automáticamente los valores de color necesarios para alcanzar esos objetivos WCAG específicos. Esto elimina las conjeturas en el cumplimiento de la accesibilidad, asegurando que el texto y los elementos de la interfaz permanezcan legibles en todos los tonos generados, independientemente del matiz o brillo del color base.
Escalas perceptualmente uniformes
Leonardo utiliza espacios de color avanzados para asegurar que las escalas de color sean perceptualmente uniformes. Esto significa que la diferencia percibida entre los pasos de una escala es consistente para el ojo humano, evitando el efecto de 'bandas' que a menudo se encuentra en degradados RGB lineales. Esto es crítico para la visualización de datos, donde los pasos de color deben representar los valores de datos con precisión sin sesgos visuales.
Motor de temas adaptables
La herramienta permite la creación de temas adaptables que pueden ajustarse en tiempo real. Al usar el módulo npm asociado, los desarrolladores pueden permitir que los usuarios finales modifiquen el contraste, el brillo y la saturación de toda la interfaz. Esto proporciona un alto nivel de inclusividad, permitiendo a los usuarios con discapacidades visuales personalizar la interfaz según sus necesidades específicas sin requerir una hoja de estilos de 'alto contraste' separada.
Simulación de daltonismo
Leonardo incluye herramientas integradas para evaluar paletas frente a diversas deficiencias de visión cromática, incluyendo Protanopia, Deuteranopia y Tritanopia. Calcula la diferencia de color medible entre muestras, permitiendo a los diseñadores alternar automáticamente entre colores para encontrar combinaciones que permanezcan distintas para todos los usuarios, asegurando que las visualizaciones de datos sean universalmente interpretables.
Exportación de tokens de diseño
Leonardo cierra la brecha entre el diseño y el desarrollo exportando temas como tokens de diseño estándar. Estos siguen las especificaciones del grupo de trabajo W3C, haciéndolos compatibles con sistemas de diseño modernos. Los desarrolladores pueden importar directamente estos tokens en su CSS o pipelines de construcción, asegurando que la intención del diseño se preserve perfectamente en el código de producción final.
Cómo usar Leonardo
Navega a leonardocolor.io y selecciona 'Create new theme' para inicializar tu espacio de trabajo de paleta de colores.,Define tus colores base y establece los ratios de contraste objetivo (ej. 3:1, 4.5:1) para cada muestra en la escala.,Ajusta los parámetros de luminosidad y saturación usando los controles de espacio de color perceptual para asegurar el equilibrio visual.,Previsualiza tu tema en diferentes modos de deficiencia visual para verificar el cumplimiento de accesibilidad.,Exporta tu trabajo como propiedades personalizadas CSS, activos SVG o tokens de diseño JSON para integrarlos en tu código.,Instala el paquete npm @adobe/leonardo-contrast-colors para implementar el tema dinámicamente dentro de tu aplicación.
Casos de uso de Leonardo
Sistemas de diseño empresarial
Los líderes de sistemas de diseño utilizan Leonardo para definir una única fuente de verdad para el color. Al generar escalas basadas en ratios de contraste, aseguran que cada componente en su biblioteca, desde botones hasta gráficos de datos, sea accesible por defecto, reduciendo la necesidad de auditorías de accesibilidad manuales.
Visualización de datos accesible
Los científicos de datos y los ingenieros front-end utilizan Leonardo para crear escalas de color secuenciales y divergentes. Al garantizar la uniformidad perceptual y la seguridad para daltónicos, crean gráficos que representan con precisión las tendencias de datos sin engañar a los usuarios con discapacidades visuales.
Personalización centrada en el usuario
Los equipos de producto integran el módulo npm de Leonardo para ofrecer 'Configuración de accesibilidad' en sus aplicaciones. Los usuarios pueden ajustar el contraste o brillo global de la interfaz, y la aplicación vuelve a renderizar dinámicamente la paleta de colores para mantener los estándares de accesibilidad mientras cumple con las preferencias del usuario.
Quién se beneficia de Leonardo
Diseñadores UI/UX
Los diseñadores necesitan crear sistemas de color escalables y accesibles que vayan más allá de las paletas estáticas. Leonardo les permite mantener la integridad del diseño mientras aseguran un estricto cumplimiento de los estándares de accesibilidad WCAG.
Ingenieros Front-end
Los ingenieros requieren formas programáticas de implementar sistemas de color. Leonardo proporciona los paquetes npm y los formatos de tokens de diseño necesarios para automatizar la generación de temas y asegurar la consistencia en aplicaciones web complejas.
Especialistas en accesibilidad
Los especialistas utilizan Leonardo para auditar y refinar paletas de colores. La herramienta proporciona los datos cuantitativos necesarios para demostrar que un sistema de color es inclusivo y utilizable para personas con diversas deficiencias de visión cromática.
Precios de Leonardo
Proyecto de código abierto bajo la licencia Apache 2.0. Todas las herramientas y los paquetes npm asociados son de uso gratuito para proyectos comerciales y personales.
