Matriz de Contraste
Analiza el contraste WCAG entre todos los colores de tu paleta en una matriz NxN con preview de texto, ratios, estadísticas y copia rápida
Crea una matriz visual de contraste WCAG entre múltiples colores. Ideal para verificar la accesibilidad de tu sistema de diseño completo.
Paletas Predefinidas
Gestionar Colores
Matriz de Contraste
| Fondo / Texto | #FFFFFF | #000000 | #1E40AF | #DC2626 | #059669 |
|---|---|---|---|---|---|
| #FFFFFF | #FFFFFFL: 100% | Aa 21.00 AAA | Aa 8.72 AAA | Aa 4.83 AA | Aa 3.77 AA Large |
| #000000 | Aa 21.00 AAA | #000000L: 0% | Aa 2.41 Fail | Aa 4.35 AA Large | Aa 5.57 AA |
| #1E40AF | Aa 8.72 AAA | Aa 2.41 Fail | #1E40AFL: 7% | Aa 1.81 Fail | Aa 2.31 Fail |
| #DC2626 | Aa 4.83 AA | Aa 4.35 AA Large | Aa 1.81 Fail | #DC2626L: 17% | Aa 1.28 Fail |
| #059669 | Aa 3.77 AA Large | Aa 5.57 AA | Aa 2.31 Fail | Aa 1.28 Fail | #059669L: 23% |
Leyenda WCAG
Excelente para todo tipo de texto
≥ 7:1
Válido para texto normal
≥ 4.5:1
Solo para texto grande (18pt+)
≥ 3:1
No cumple estándares mínimos
< 3:1
Estadísticas de la Paleta
Puntuación de Accesibilidad
40% combinaciones pasan AA+
4
AAA
20%
4
AA
20%
4
AA Large
20%
8
Fail
40%
Mejor Contraste
Peor Contraste
Cómo funciona
La matriz de contraste es la forma más eficiente de validar la accesibilidad de una paleta completa. En lugar de verificar pares de colores uno a uno, esta herramienta genera una tabla NxN que cruza todos tus colores como fondo y como texto, mostrando el nivel WCAG, el ratio exacto y una preview real de cada combinación.
Funcionalidades de esta herramienta
- Hasta 10 colores simultáneos: Añade colores con picker o introduciendo HEX directamente
- Matriz NxN automática: Cada color se cruza contra todos los demás como fondo/texto
- Preview de texto real: Cada celda muestra "Aa" con los colores reales de fondo y texto
- Ratio de contraste exacto: Valor numérico preciso (ej: 4.53) en cada combinación
- Badges WCAG por celda: AAA (≥7:1), AA (≥4.5:1), AA Large (≥3:1) o Fail
- Clic para copiar ratio: Haz clic en cualquier celda para copiar el ratio al portapapeles
- Estadísticas globales: Conteo y porcentaje de combinaciones AAA, AA, AA Large y Fail
- Leyenda WCAG visual: Referencia rápida de qué significa cada nivel y color
- Edición en vivo: Modifica cualquier color y la matriz se recalcula instantáneamente
- Colores iniciales por defecto: Blanco, negro y 3 colores comunes para empezar rápido
¿Cómo leer la matriz?
Las filas representan el color de fondo (BG) y las columnas el color de texto (FG). Cada celda muestra cómo se ve ese texto sobre ese fondo:
- Verde (AAA ≥ 7:1): Contraste excelente. Válido para cualquier tamaño de texto, incluido texto pequeño. El nivel más alto de legibilidad.
- Lima (AA ≥ 4.5:1): Contraste bueno. El mínimo recomendado por WCAG para texto normal (≥14px). La mayoría de webs deberían cumplir al menos este nivel.
- Amarillo (AA Large ≥ 3:1): Solo para texto grande (≥24px o ≥18.5px bold). También válido para iconos, bordes de inputs y estados de focus.
- Rojo (Fail < 3:1): No cumple ningún estándar WCAG. Evita esta combinación para cualquier contenido funcional.
Matriz vs Calculadora individual: ¿cuándo usar cada una?
- Matriz de contraste: Cuando necesitas validar una paleta completa (3-10 colores) y ver todas las combinaciones posibles de un vistazo. Ideal para auditorías, design systems y validación de branding.
- Calculadora de contraste: Cuando necesitas analizar un par específico en detalle — con APCA, sugerencia automática, preview de componentes UI y multi-formato. Ideal para ajustes finos.
Estándares WCAG 2.1 — Referencia rápida
Las WCAG (Web Content Accessibility Guidelines) definen los requisitos mínimos de contraste para que el contenido web sea legible para personas con baja visión o daltonismo:
- Texto normal (≤23px): Mínimo 4.5:1 (AA) — recomendado 7:1 (AAA)
- Texto grande (≥24px o ≥18.5px bold): Mínimo 3:1 (AA) — recomendado 4.5:1 (AAA)
- Componentes UI (iconos, bordes): Mínimo 3:1 contra fondo adyacente
- Texto decorativo o logos: Sin requisito de contraste
💡 Ejemplos de uso prácticos
Caso 1: Validar paleta de marca
Tu marca tiene 5 colores corporativos. Necesitas saber qué combinaciones texto/fondo son accesibles.
→ Carga los 5 colores + blanco y negro (7 total)
→ La matriz genera 42 combinaciones automáticamente
→ Las celdas verdes/lima son seguras para texto en tu web
→ Las estadísticas muestran el % de cumplimiento de tu paleta
Caso 2: Documentar design system
Tu equipo necesita una referencia de qué colores pueden combinarse en el design system.
→ Carga los colores de tu sistema (primario, secundario, neutros, alertas)
→ Haz captura de la matriz como referencia visual
→ Incluye en la documentación: "solo usar combinaciones AA o superior"
→ Revisa las estadísticas: un buen system tiene ≥60% combinaciones válidas
Caso 3: Auditoría de accesibilidad web
Necesitas auditar los colores actuales de una web existente.
→ Extrae los colores principales de tu CSS (fondo, texto, botones, enlaces, alertas)
→ Cárgalos todos en la matriz
→ Identifica combinaciones en rojo — son las que necesitas corregir
→ Ajusta colores individuales y observa cómo cambian los ratios en tiempo real
Caso 4: Evaluar paleta generada
Has generado una paleta con nuestro generador y quieres verificar su accesibilidad.
→ Copia los colores de tu paleta generada
→ Pépalos en la matriz junto con blanco y negro
→ Si el porcentaje de Fail es alto, ajusta la paleta hacia más contraste
→ Una paleta accesible debería tener ≤20% de combinaciones Fail
Caso 5: Modo oscuro vs modo claro
Comparar la accesibilidad de tu paleta en ambos temas.
→ Primero: carga colores de texto + fondos claros → anota estadísticas
→ Luego: carga colores de texto + fondos oscuros → anota estadísticas
→ Compara los porcentajes de AAA/AA entre ambos modos
→ Es común que el modo oscuro tenga peor contraste — ajusta si es necesario