Matriz de Contraste de Color

Pega una paleta de colores — un color por línea, con una etiqueta opcional (Primario: #0066cc o Etiqueta — dodgerblue) y líneas de comentario opcionales con # como encabezados de sección — y obtén la matriz de ratios de contraste N×N con veredictos WCAG 2.x por celda. El par más fuerte y el más débil se resaltan, los mejores pares que pasan AA y AAA se clasifican, y cada muestra es clic-para-copiar. Puro lado cliente, sin subir nada, sin rastreo.

—
Formato de entrada
  • Una entrada por línea.
  • Prefijo opcional Etiqueta: o Etiqueta — (la parte antes del separador se convierte en la etiqueta de fila).
  • Valores de color: #RGB, #RRGGBB, rgb(r, g, b), hsl(h, s%, l%), o cualquiera de los 148 colores CSS con nombre (p. ej. rebeccapurple).
  • Las líneas que empiezan con # que NO son un color hexadecimal válido se tratan como encabezados de sección / comentarios.
  • Hasta 64 colores por paleta. La matriz se renderiza en tu navegador; nada se sube.
Colores 0
Pares 0
AA normal 0 —
AAA normal 0 —
UI (1.4.11) 0 —
Matriz

Pega una paleta arriba para ver la matriz de contraste.

Par más fuerte y más débil
Más fuerte
— :1

—

Más débil
— :1

—

Pares clasificados
Cómo funciona la matriz
  • Ratio de contraste sigue el algoritmo WCAG 2.x: cada canal sRGB se linealiza, la luminancia relativa es la suma ponderada 0.2126·R + 0.7152·G + 0.0722·B, y el ratio es (L1 + 0.05) / (L2 + 0.05) con el color más claro arriba. El resultado siempre está en [1, 21].
  • Veredictos de conformidad por celda: AA texto normal (4.5), AAA texto normal (7), AA texto grande (3), componentes UI no textuales (3, según 1.4.11). La celda es verde si pasa AA, azul si pasa AAA, y roja en caso contrario. La celda con el ratio más alto se marca cuando el interruptor Resaltar el par más fuerte está activado.
  • Par más fuerte es el par fuera de la diagonal con el ratio más alto (o el par con el ratio más alto entre AA / AAA si cambias el criterio). Par más débil es siempre el par fuera de la diagonal con el ratio más bajo — la barra que debería fallar la revisión primero.
  • Pares clasificados lista cada par distinto en orden, con el filtro de criterio. Úsalo para encontrar un color de primer plano para el texto del cuerpo sobre un fondo dado, o para ver qué combinaciones fallan silenciosamente.
  • Haz clic en cualquier muestra en la matriz o en las tarjetas de par para copiar el código hexadecimal. Haz clic en cualquier número de celda para copiar el par primer plano / fondo.
  • Nada sale de tu navegador. Toda la herramienta se ejecuta en esta pestaña; tu paleta nunca toca la red.