Matriz de Contraste
Analiza el contraste entre todos los colores de tu paleta en una matriz visual
Crea una matriz visual de contraste WCAG entre múltiples colores. Ideal para verificar la accesibilidad de tu sistema de diseño completo.
Gestionar Colores
Matriz de Contraste
| BG / FG | #FFFFFF | #000000 | #1E40AF | #DC2626 | #059669 |
|---|---|---|---|---|---|
| #FFFFFF | — | Aa 21.00 AAA | Aa 8.72 AAA | Aa 4.83 AA | Aa 3.77 AA Large |
| #000000 | Aa 21.00 AAA | — | Aa 2.41 Fail | Aa 4.35 AA Large | Aa 5.57 AA |
| #1E40AF | Aa 8.72 AAA | Aa 2.41 Fail | — | Aa 1.81 Fail | Aa 2.31 Fail |
| #DC2626 | Aa 4.83 AA | Aa 4.35 AA Large | Aa 1.81 Fail | — | Aa 1.28 Fail |
| #059669 | Aa 3.77 AA Large | Aa 5.57 AA | Aa 2.31 Fail | Aa 1.28 Fail | — |
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
4
AAA
20%
4
AA
20%
4
AA Large
20%
8
Fail
40%
Cómo funciona
La matriz de contraste te permite ver de un vistazo qué combinaciones de colores de tu paleta cumplen con los estándares de accesibilidad.
Cómo interpretar la matriz
- Verde: Cumple AAA (ratio ≥ 7:1)
- Amarillo: Cumple AA (ratio ≥ 4.5:1)
- Naranja: Solo para texto grande (ratio ≥ 3:1)
- Rojo: No cumple estándares
💡 Ejemplos de uso prácticos
Caso 1: Validar paleta de marca
Tu marca tiene 5 colores. ¿Cuáles puedes combinar para texto?
→ Carga los 5 colores en la matriz
→ Identifica instantáneamente las combinaciones válidas
Caso 2: Sistema de diseño
Documentar qué colores pueden usarse juntos en tu design system.
→ Exporta la matriz como referencia visual
→ Incluye en la documentación del equipo
Caso 3: Auditoría de accesibilidad
Revisar si tu web actual cumple WCAG.
→ Extrae los colores usados en tu CSS
→ Verifica todas las combinaciones de un vistazo