Verificador de Paletas de Colores Accesibles
Verifica toda tu paleta de colores para accesibilidad WCAG. Agrega 2–8 colores y observa las relaciones de contraste para cada combinación texto-fondo. Todo el procesamiento ocurre en tu navegador.
Resumen de paleta
6 combinación(es) no pasa(n) AA para texto normal:
- #1A1A2E on #2563EB (3.30:1)
- #2563EB on #1A1A2E (3.30:1)
- #2563EB on #EAEAEA (4.30:1)
- #EAEAEA on #2563EB (4.30:1)
- #EAEAEA on #FFFFFF (1.20:1)
- #FFFFFF on #EAEAEA (1.20:1)
Tu paleta
Agrega o elimina colores (2–8). Cada color puede usarse como texto o fondo; verificamos cada par.
Matriz de contraste
Cada celda es "color de texto sobre color de fondo": relación y aprobación/rechazo WCAG AA (normal).
| Texto ↓ \ Fondo → | 1A1A2E | 2563EB | EAEAEA | FFFFFF |
|---|---|---|---|---|
1A1A2E | — | 3.30 Falla | 14.18 Pasa | 17.06 Pasa |
2563EB | 3.30 Falla | — | 4.30 Falla | 5.17 Pasa |
EAEAEA | 14.18 Pasa | 4.30 Falla | — | 1.20 Falla |
FFFFFF | 17.06 Pasa | 5.17 Pasa | 1.20 Falla | — |
Paletas predefinidas
Referencia WCAG
Tabla de Contenidos
¿Qué es la accesibilidad de paleta?
La accesibilidad de paleta significa que cada forma de combinar colores de tu conjunto — texto sobre fondo, bordes sobre superficies, botones sobre tarjetas — cumple los requisitos de contraste para que el contenido sea legible y los elementos de UI distinguibles para todos los usuarios, incluidas personas con baja visión o diferencias de visión del color.
Verificar un solo par (p. ej. texto del cuerpo sobre fondo de página) no es suficiente. Encabezados, leyendas, botones, enlaces y bordes crean muchos pares posibles. Una paleta accesible es aquella donde las combinaciones que realmente usas (o podrías usar) cumplen las reglas de contraste WCAG.
¿Por qué verificar toda la paleta?
Los sistemas de diseño y las paletas de marca tienen múltiples roles: fondos (página, tarjetas, secciones), texto (encabezados, cuerpo, leyendas) y UI (botones, bordes, iconos). Cualquiera de estos puede colocarse encima de otro. Si solo pruebas "texto principal sobre fondo de página", puedes perder pares fallidos como "leyenda sobre fondo de tarjeta" o "texto de botón sobre primario".
Un verificador de paleta prueba cada combinación texto-fondo para que veas el panorama completo: qué pares pasan, cuáles fallan y cuántas combinaciones cumplen AA o AAA. Eso facilita corregir pares problemáticos o documentar combinaciones aprobadas para tu equipo.
Cómo funciona la herramienta
Agrega 2–8 colores usando el selector de color o entrada hexadecimal. La herramienta construye cada par ordenado texto-fondo y calcula la relación de contraste usando la fórmula WCAG.
- Resumen — Total de combinaciones, cuántas pasan AA (normal) y AAA (normal), y una lista de pares fallidos.
- Matriz de contraste — Una tabla con cada celda mostrando la relación y Aprueba/Falla para WCAG AA texto normal (4.5:1).
- Copiar informe — Un clic copia tu paleta, resumen y cada combinación para pegar en docs o tickets.
Todos los cálculos se ejecutan en tu navegador; no se envían datos de color a un servidor.
Cuándo usarla
- Sistemas de diseño — Antes de fijar colores de marca o UI, verifica cada par texto/fondo previsto.
- Cambio de tema — Para temas claro/oscuro o múltiples temas, asegúrate de que la paleta de cada tema pase como conjunto.
- Auditorías — Observa rápidamente qué combinaciones en una paleta existente fallan y necesitan ajuste.
- Documentación — Exporta el informe para documentar pares aprobados para tu equipo o clientes.
Niveles de contraste WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen relaciones de contraste mínimas para texto e UI:
- AA Normal — Mínimo 4.5:1 para texto regular (menos de 18pt o 14pt negrita). Este es el objetivo habitual para el texto del cuerpo.
- AAA Normal — 7:1 para contraste mejorado.
- AA Grande — 3:1 para texto grande (18pt+ o 14pt+ negrita).
- Componentes de UI y gráficos — Mínimo 3:1 para iconos, bordes, controles de formulario y gráficos significativos.
La matriz en esta herramienta muestra aprueba/falla para AA normal. El resumen e informe incluyen recuentos para AA y AAA para que puedas ver cuántos pares cumplen cada nivel.
Preguntas frecuentes
El Verificador de Contraste de Colores prueba un primer plano y un fondo a la vez — ideal para validar una sola combinación o probar alternativas. El Verificador de Paletas de Colores Accesibles prueba cada par en un conjunto de 2–8 colores a la vez, para que puedas ver qué combinaciones en tu paleta completa pasan o fallan y copiar un informe completo.
Si un color no es un hexadecimal válido de 3 o 6 dígitos (p. ej. aún estás escribiendo o dejaste un valor en blanco), la herramienta no puede calcular el contraste para los pares que lo usan. Corrige o elimina el color inválido y esas celdas mostrarán la relación y Aprueba/Falla en su lugar.
Puedes agregar entre 2 y 8 colores. Con 2 colores obtienes 2 combinaciones (A sobre B, B sobre A). Con 8 colores obtienes 56 combinaciones. Mantener la paleta a los colores que realmente usas para texto y fondos mantiene la matriz manejable y el informe enfocado.
No. Todos los cálculos de contraste usan la misma fórmula WCAG y se ejecutan completamente en tu navegador. Tus colores nunca abandonan tu dispositivo.
Si muchas combinaciones fallan, tu paleta puede tener demasiados tonos similares (p. ej. grises claros sobre grises ligeramente diferentes). Agrega más contraste: incluye colores claramente más claros y más oscuros para tener opciones válidas de texto/fondo. Usa el Verificador de Contraste de Colores para probar pares individuales y obtener sugerencias de mejora.
Sí. Puedes ingresar hex de 6 dígitos (p. ej. #1A1A2E) o abreviatura de 3 dígitos (p. ej. #FFF). La herramienta expande los códigos de 3 dígitos a 6 dígitos internamente y los usa en la matriz e informe.