¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de Cuadrícula de Contraste de Color

Desarrollador

ANUNCIO · ¿ELIMINAR?

APORTE

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Generador de Cuadrícula de Contraste de Color

Introduzca los colores de su marca o sistema de diseño y genere una matriz de contraste WCAG completa que muestre la relación de contraste para cada combinación posible de primer plano/fondo. Vea instantáneamente qué pares de colores cumplen con los requisitos de accesibilidad AA, AAA o fallan, lo cual es esencial para crear sistemas de diseño y guías de estilo accesibles.

Cómo Usar

Introduzca colores hexadecimales uno por línea (con etiquetas opcionales como “Primario #3B82F6”), o seleccione una paleta predefinida. Haga clic Generar Cuadrícula para crear la matriz de contraste. Cada celda muestra la relación de contraste con el color de primer plano real sobre el fondo real, codificado por colores según el nivel de cumplimiento de WCAG.

Características

Matriz de Contraste N×N – Se prueba y se muestra cada combinación de primer plano/fondo en una cuadrícula visual
Codificación de colores WCAG – Verde para AAA (≥7:1), amarillo para AA (≥4.5:1) y rojo para fallo (<4.5:1)
Vista Previa de Color en Vivo – Cada celda se representa con texto de primer plano real sobre color de fondo real
Texto Grande AA – También indica el cumplimiento de Texto Grande AA (≥3:1) para tamaños de fuente más grandes
Estadísticas Resumen – Pares totales probados, pases AAA, pases AA y fallos de un vistazo
Paletas predefinidas – Paletas de colores de carga rápida de Tailwind, Material Design o monocromáticas
Hasta 20 Colores – Admite paletas de 2 a 20 colores
Solo del lado del cliente Todas las cálculos ocurren en tu navegador

ANUNCIO · ¿ELIMINAR?

 Preguntas frecuentes

¿Qué significan los niveles de contraste WCAG?

WCAG (Web Content Accessibility Guidelines) define las relaciones de contraste para la legibilidad del texto. AAA (≥7:1) es el estándar más alto, lo que garantiza que el texto sea legible para usuarios con deficiencias visuales moderadas. AA (≥4.5:1) es el estándar mínimo para texto de tamaño normal. AA Grande (≥3:1) se aplica a texto de 18 puntos o más (o 14 puntos en negrita). La mayoría de las leyes y estándares de accesibilidad requieren al menos el cumplimiento de AA para el contenido web.
¿Por qué necesito una cuadrícula de contraste en lugar de verificar pares individualmente?

Una cuadrícula de contraste muestra todas las combinaciones de colores posibles en su paleta a la vez, revelando problemas que pasaría por alto al verificar pares uno por uno. Los sistemas de diseño a menudo tienen de 8 a 15 colores que se pueden usar en varias combinaciones de primer plano/fondo. Una cuadrícula con 10 colores prueba 100 pares simultáneamente, mostrando instantáneamente qué combinaciones son accesibles y cuáles no. Esto es esencial para crear documentación de accesibilidad completa para los equipos de diseño.
¿Cómo se calcula la relación de contraste?

La relación de contraste WCAG utiliza la luminancia relativa, calculada a partir de valores sRGB linealizados. Cada canal de color se convierte de sRGB codificado gamma a luz lineal utilizando la fórmula: si el valor sRGB es 0.03928 o menos, divida por 12.92; de lo contrario, eleve (valor + 0.055) / 1.055 a la potencia de 2.4. La luminancia relativa es entonces 0.2126×R + 0.7152×G + 0.0722×B. La relación de contraste es (luminancia más clara + 0.05) / (luminancia más oscura + 0.05), lo que siempre da como resultado un valor entre 1:1 y 21:1.