Paleta de colores accesible
Diseña paletas que mantienen el texto legible y compatibles con WCAG.
Cómo ayuda
Diseña paletas que mantienen el texto legible y compatibles con WCAG.
- Genera paletas desde un color base.
- Comprueba el contraste antes de publicar texto UI.
- Exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.
- Funciona localmente en el navegador.
Cómo funciona la paleta de colores accesible
Una paleta accesible no se construye "a posteriori" verificando los contrastes — se diseña con la accesibilidad como restricción inicial. Esta herramienta genera solo combinaciones que pasan al menos WCAG AA desde el primer click.
El proceso es diferente a un simple generador de paletas: para cada color base, la herramienta calcula automáticamente las variantes de luminosidad que garantizan contraste 4.5:1 sobre fondo blanco o negro. Esto significa que si introduces un verde lima brillante (que por sí solo nunca pasaría el contraste como texto sobre blanco), la herramienta encuentra la versión más oscura que funciona, en vez de mostrarte un color inutilizable.
La paleta resultante esta estructurada en roles semánticos: color primario (texto, botones activos), color secundario (elementos de apoyo), neutros (fondos, bordes, texto secundario) y estado (error, éxito, aviso). Cada rol incluye el par texto+fondo ya verificado.
Todos los valores se exportan como custom properties CSS con el ratio de contraste anotado en comentario, para que quien lea el CSS entienda de inmediato por que se eligio ese tono específico.
Ejemplos prácticos
- Productos con requisitos legales: apps publicas, sitios de administración publica, e-commerce con usuarios diversos — WCAG AA es el baseline legal en muchas jurisdicciones EU. Parte de una paleta ya conforme.
- Sistema de diseño empresarial: documenta la paleta con los ratios de contraste para cada combinación permitida. El equipo de desarrollo sabe que pares usar sin tener que recalcular cada vez.
- Revision de paleta existente: pega los colores del proyecto actual y descubre de inmediato cuantas combinaciones fallan — antes de una auditoría externa.
- Formación del equipo: usa los pares generados como ejemplos didácticos para explicar por que ciertos colores de moda (por ejemplo gris claro sobre blanco) son problemáticos para la accesibilidad.
FAQ — Paleta accesible
¿Cuál es la diferencia entre esta paleta y el comprobador de contraste WCAG?
El comprobador de contraste verifica un par específico que tu proporcionas. La paleta accesible genera automáticamente una serie de colores garantizando desde el principio que cada combinación texto/fondo propuesta supere AA. Es la diferencia entre comprobar y diseñar.
¿Puedo usar esta paleta también para usuarios con daltonismo?
WCAG no cubre explícitamente el daltonismo en la sección de contraste, pero una paleta accesible bien hecha debe igualmente evitar basarse en el color como unica señal de estado. Combina siempre el color con un icono o texto (por ejemplo "Error" no solo rojo). La herramienta señala los pares que podrían ser problemáticos para deuteranopia.
¿Es AAA necesario para la mayoría de los proyectos?
No. AAA es el estándar para casos de uso particulares: textos muy largos, usuarios con visión reducida grave, contextos sanitarios. Para la mayoría de las interfaces digitales, AA es suficiente y más factible desde el punto de vista del diseño. Apunta a AAA solo donde el color de marca lo permita sin sacrificar la estética.