Paleta de colores accesible
Genera una paleta en la herramienta principal y comprueba los pares texto/fondo que usarás. La exportación sigue disponible aunque un par no supere el control.
Esta guía explica el flujo de trabajo. Usa la herramienta principal enlazada abajo para generar colores y exportar archivos.
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 interfaz accesible empieza por los pares texto/fondo usados en su contexto. Chromoforge genera armonías y escalas de tonos: una paleta generada no es automáticamente una certificación WCAG.
El panel de contraste muestra combinaciones fuertes y débiles. Usa el comprobador manual para cada par que aplicarás, incluidos colores externos a la paleta.
Asigna los roles primario, neutro y de estado en tu proyecto. Si un par falla, elige otro tono o cambia el color de entrada y comprueba de nuevo.
Las exportaciones CSS, SCSS y JSON contienen los valores de la paleta y la escala numérica. Documenta por separado los pares aprobados y sus ratios de contraste.
Ejemplos prácticos
- Revisión de accesibilidad: documenta cada par texto/fondo de la interfaz y compruébalo en su contexto.
- 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 generador crea armonías y tonos. El comprobador WCAG evalúa un par texto/fondo elegido. Usa ambos pasos: una paleta puede incluir colores decorativos inadecuados para texto normal.
¿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.
Otras herramientas de Chromoforge
Herramientas y guías relacionadas
Ejemplo práctico
Comprueba el texto y el fondo reales juntos. El nombre del color o el número del tono no garantizan texto legible.
.button {
background: #E24B4A;
color: #111111; /* AA for normal text: 4.80:1 */
}
/* White on the same coral: 3.93:1, fails normal-text AA. */