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 restriccion 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 automaticamente 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 si solo nunca pasaria 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 especifico.
Ejemplos prácticos
- Productos con requisitos legales: apps publicas, sitios de administracion 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 auditoria externa.
- Formacion del equipo: usa los pares generados como ejemplos didacticos para explicar por que ciertos colores de moda (por ejemplo gris claro sobre blanco) son problematicos 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 especifico que tu proporcionas. La paleta accesible genera automaticamente 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 explicitamente el daltonismo en la seccion de contraste, pero una paleta accesible bien hecha debe igualmente evitar basarse en el color como unica senal de estado. Combina siempre el color con un icono o texto (por ejemplo "Error" no solo rojo). La herramienta senala los pares que podrian ser problematicos para deuteranopia.
¿Es AAA necesario para la mayoria de los proyectos?
No. AAA es el est?ndar para casos de uso particulares: textos muy largos, usuarios con vision reducida grave, contextos sanitarios. Para la mayoria 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 estetica.
¿Como gestiono la accesibilidad de colores en dark mode?
En dark mode las reglas WCAG se aplican identicamente: el contraste texto/fondo debe ser al menos 4.5:1. Los tonos medios de una paleta tipica suelen fallar sobre fondo oscuro. Genera la paleta por separado para light y dark mode, o usa una herramienta que muestre ambos modos simultaneamente.
¿La accesibilidad del color cubre tambi?n las imágenes?
WCAG 1.4.11 (Non-text Contrast) requiere 3:1 para elementos graficos informativos (iconos, graficos, indicadores de estado). Las imágenes puramente decorativas están exentas. Las fotografias no entran en este requisito, pero el texto superpuesto a una imagen debe igualmente respetar el contraste.