Matriz de contraste de colores

Esta matriz calcula la luminancia relativa WCAG 2 de cada color hexadecimal proporcionado, compara todos los colores entre sí y devuelve los resultados en una matriz cuadrada estable. Diseñadores, desarrolladores y especialistas en accesibilidad pueden revisar de una vez toda la paleta de un sistema de diseño, sin comprobar cada par por separado. Las entradas se validan, los colores se normalizan y el resultado determinista sirve para auditorías automatizadas e informes versionados.

Interprete la matriz sin perder de vista los colores

Envíe una matriz de entre dos y cien colores hexadecimales. Se aceptan formatos de tres y seis dígitos, con almohadilla inicial o sin ella, y cada valor válido se normaliza como un código de seis dígitos en minúsculas. La respuesta enumera esos colores normalizados en el mismo orden y asigna un índice a cada uno. Las filas y columnas conservan exactamente ese orden; por ello, el valor de la fila dos y la columna cinco representa el contraste entre los colores con índices dos y cinco. La diagonal siempre vale 1, pues un color no contrasta consigo mismo, y la matriz es simétrica porque invertir primer plano y fondo no altera la relación WCAG. Cada relación se redondea a dos decimales para ofrecer una salida legible y estable, mientras que las luminancias se redondean a seis. Los colores duplicados se conservan como posiciones independientes, algo útil al auditar tokens con igual valor y distintas funciones semánticas. Así, la respuesta puede representarse en una tabla, archivarse o compararse entre versiones con facilidad.

Comprenda el cálculo y los umbrales WCAG

El cálculo aplica el método de luminancia relativa de WCAG 2 para colores sRGB. Cada canal rojo, verde y azul se convierte de su valor sRGB codificado a luz lineal y después se combina mediante los coeficientes estándar. Para cualquier par, se divide la luminancia más clara más 0.05 entre la más oscura más 0.05, lo que produce una relación de 1 a 21. La respuesta incluye los umbrales WCAG habituales: 4.5 para texto normal AA, 7 para texto normal AAA, 3 para texto grande AA y 4.5 para texto grande AAA. Compare cada celda con el umbral adecuado al contenido y a la tipografía reales. Una relación aislada no certifica toda una interfaz, pues también importan el tamaño y peso de la fuente, los estados interactivos, los elementos no textuales y el contexto de uso. La herramienta devuelve pruebas numéricas en vez de un veredicto general, para que cada auditoría aplique la regla correcta a cada combinación prevista sin confundir un valor redondeado con una garantía global.

Use resultados deterministas en auditorías de diseño

Una matriz completa resulta especialmente útil cuando la revisión de la paleta es repetible. Mantenga los colores en un orden documentado, por ejemplo neutros, marca, estados y acentos, y guarde la matriz con la versión del sistema de diseño. Una prueba de integración continua puede contrastar celdas seleccionadas con los umbrales exigidos, mientras una persona revisora examina la tabla completa para detectar combinaciones débiles inesperadas. Como el algoritmo no utiliza red, azar, hora actual, estilos del navegador ni estimaciones de perfiles de color, una entrada JSON idéntica genera una salida JSON idéntica. Se rechazan con un índice claro las matrices inválidas, las paletas fuera del tamaño admitido y los valores hexadecimales incorrectos. El límite de cien colores acota la matriz cuadrática a diez mil celdas. Resuelva la transparencia y la composición antes de usar esta capacidad: los colores alfa se rechazan porque su apariencia depende del fondo. Convierta también nombres, HSL, valores de gama amplia u objetos de herramientas de diseño a hex sRGB opaco para que la auditoría tenga una base explícita y reproducible.