Comprobador de Paleta de Colores Accesible: Prueba Toda tu Paleta para Cumplir con WCAG
Comprobar un solo par de colores (texto y fondo) es un buen comienzo, pero las interfaces reales usan muchos colores. Encabezados, cuerpo de texto, botones, tarjetas y bordes crean docenas de posibles pares de texto sobre fondo.
Un comprobador de paleta de colores accesible prueba todas las combinaciones de tu paleta para que sepas qué pares cumplen WCAG y cuáles fallan antes de publicar.
El Accessible Color Palette Checker de Tooladex te permite añadir de 2 a 8 colores y muestra una matriz de contraste y un resumen para todos los pares texto/fondo. No necesitas cuenta ni subir archivos: todo se ejecuta en tu navegador.
¿Por Qué Comprobar Toda la Paleta?
Los comprobadores de contraste de un solo par (como nuestro Color Contrast Checker) son perfectos para validar una combinación.
Pero los sistemas de diseño y las paletas de marca tienen varios roles:
- Fondos: página, tarjetas, secciones, campos
- Texto: encabezados, cuerpo, subtítulos, enlaces
- UI: botones, bordes, iconos, anillos de enfoque
Cualquiera de estos puede aparecer sobre otro.
Si solo pruebas “texto principal sobre fondo de página”, podrías pasar por alto que “texto de pie de foto sobre tarjeta” o “texto de botón sobre color primario” no cumplen. Un comprobador de paleta analiza todos los pares para darte la imagen completa.
Qué Hace la Herramienta
- Añade tus colores — Introduce de 2 a 8 códigos hex (con selector o escribiendo). Añade o quita muestras según lo necesites.
- Consulta el resumen — Número total de combinaciones, cuántas pasan WCAG AA (texto normal) y lista de las que fallan.
- Usa la matriz de contraste — Una tabla de cada combinación “color de texto sobre color de fondo” con su ratio y estado Aprobado/Rechazado para AA normal.
- Copia el informe — Copia con un clic los colores, el resumen y todas las combinaciones para pegarlos en documentos o tickets.
- Prueba los presets — Carga rápidamente paletas de ejemplo para ver cómo funcionan la matriz y el resumen.
Todos los cálculos usan la misma fórmula de luminancia relativa y contraste WCAG que el comprobador de un solo par. No se envían datos a ningún servidor.
Niveles WCAG (Resumen Rápido)
- AA texto normal — 4.5:1 mínimo para texto regular (menos de 18 pt / 14 pt en negrita). Es el objetivo habitual para el cuerpo de texto.
- AAA texto normal — 7:1 para contraste mejorado.
- AA texto grande — 3:1 para texto grande (18 pt+ o 14 pt+ en negrita).
- UI / Gráficos — 3:1 para componentes e iconografía significativa.
La matriz resalta el cumplimiento o no del nivel AA texto normal; el informe completo y el resumen te ayudan a ver cuántos pares cumplen cada nivel.
Cuándo Usar un Comprobador de Paleta
- Sistemas de diseño — Antes de fijar los colores de marca o UI, verifica todos los pares texto/fondo previstos.
- Temas múltiples — Tema claro/oscuro o varias paletas: asegúrate de que cada tema cumple como conjunto.
- Auditorías — Lista rápidamente qué combinaciones de una paleta existente fallan y necesitan ajuste.
- Documentación — Exporta el informe para documentar los pares aprobados para tu equipo o clientes.
Consejos para Paletas Accesibles
- Incluye suficiente rango — Los grises o pasteles muy similares suelen fallar cuando se usan como texto uno sobre otro. Asegúrate de tener mezcla de tonos claros y oscuros para disponer de pares texto/fondo válidos.
- Nombra los roles — En la documentación, etiqueta los colores por rol (por ejemplo “Fondo de página”, “Texto principal”) y usa la matriz para confirmar cada pareja de roles.
- Prueba temprano — Ejecuta el comprobador de paleta cuando estés eligiendo o refinando colores para corregir el contraste antes del desarrollo.
Prueba el Accessible Color Palette Checker
El Accessible Color Palette Checker de Tooladex te da:
- Resumen de la paleta (número total de pares, recuento de aprobados/fallidos)
- Matriz de contraste para cada combinación texto/fondo
- Añadir/eliminar colores (2–8), con presets para empezar rápido
- Copia del informe completo para documentación o tickets
- Funcionamiento 100 % en el navegador — tus colores nunca salen de tu dispositivo
Úsalo junto con el Color Contrast Checker cuando necesites validar una sola pareja, o por sí solo cuando quieras validar una paleta completa.
Accessible Color Palette Checker
Check your entire color palette for WCAG accessibility. Test every text-on-background combination and see which pairs pass or fail contrast requirements.