Matriz de Contraste de Paleta
Verificá todas las combinaciones de texto y fondo de una paleta a la vez, con ratios de contraste y resultados WCAG AA y AAA. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.
Un color por línea, en cualquier formato. Hasta 10 colores; los duplicados se unifican.
AAA: 7:1 o más. AA: 4.5:1 o más. AA grande: 3:1 o más, alcanza solo para texto grande (24px, o 18.7px en negrita) y componentes de interfaz.
¿Qué es una matriz de contraste?
Una matriz de contraste compara cada color de una paleta con todos los demás, como texto y como fondo, para que veas de un vistazo qué combinaciones se leen bien. Cada celda muestra una muestra con ese color de texto sobre ese fondo, su ratio de contraste WCAG 2.x y el nivel que alcanza: AAA desde 7:1, AA desde 4.5:1, y AA para texto grande y componentes de interfaz desde 3:1. En vez de verificar pares de a uno, pegás la paleta entera y tenés el panorama completo, que es como los design systems documentan qué colores se pueden combinar.
Ejemplos
Verificar todos los pares de una paleta en código:
// every ordered pair, skipping a color on itself
for (const text of palette)
for (const bg of palette)
if (text !== bg) console.log(text, bg, contrast(text, bg));from itertools import permutations
for text, bg in permutations(palette, 2):
print(text, bg, round(contrast(text, bg), 2))/* a passing pair from the matrix, as tokens */
:root {
--text-on-surface: #111827;
--surface: #e5e7eb;
}Casos de uso
Documentar un design system
Publicá qué colores de texto y fondo se pueden combinar, así nadie tiene que volver a verificar el contraste en cada pantalla nueva.
Auditar una paleta de marca
Pegá los colores de marca y averiguá en el momento cuáles pueden llevar texto de cuerpo y cuáles son solo decorativos.
Elegir colores de botones y badges
Compará rellenos candidatos con texto blanco y oscuro en una sola vista para quedarte con los que funcionan con los dos.
Gráficos y etiquetas de datos
Verificá qué color de etiqueta se sigue leyendo sobre cada color de serie antes de poner valores dentro de barras o porciones.