Comprueba la relación de contraste entre dos colores y mira si cumple WCAG AA y AAA, en vivo en tu navegador.
La relación de contraste es el número que WCAG usa para decidir si un texto es legible. Compara la luminancia relativa de dos colores en una escala que va de 1:1 (idénticos) a 21:1 (negro puro sobre blanco puro). En el nivel AA, WCAG exige al menos 4.5:1 para texto normal y 3:1 para texto grande; el nivel AAA sube esas cifras a 7:1 y 4.5:1. Los componentes de interfaz — botones de icono, bordes de campos, anillos de foco — necesitan 3:1 frente a lo que tengan al lado.
La cuenta no es una simple diferencia de brillo. Primero se linealiza cada canal sRGB: se divide entre 12.92 por debajo del umbral 0.03928 y, en caso contrario, se normaliza y se eleva a la potencia 2.4. Este paso existe porque los valores de pantalla están codificados con gamma y no son proporcionales a la luz emitida. Después, los canales lineales se ponderan con 0.2126 para el rojo, 0.7152 para el verde y 0.0722 para el azul, reflejando cuánto aporta cada primario al brillo percibido — el verde domina con mucha diferencia. Por último, las dos luminancias entran en (L1 + 0.05) / (L2 + 0.05), donde el término 0.05 modela la luz que una pantalla real refleja incluso mostrando negro. Esa constante es la razón de que el negro sobre blanco sea exactamente 21:1 en lugar de infinito.
Úsalo antes de publicar, porque las paletas de marca fallan más a menudo de lo que la gente espera. Un gris medio como #777777 sobre blanco se queda en 4.48:1 — cómodo en un monitor luminoso, a una centésima del umbral AA y un problema real en un móvil bajo el sol. El botón de sugerencia apunta exactamente a ese caso: recorre la luminosidad HSL del color de texto hacia arriba y hacia abajo en pasos de medio punto porcentual y se detiene en el primer valor que llega a 4.5:1, conservando el tono y la saturación que elegiste. Un límite honesto: la relación solo mide luminancia, así que no dice nada sobre la confusión de tonos para personas con daltonismo ni sobre el grosor de la fuente más allá de la regla de texto grande. Todo se ejecuta localmente en tu navegador.
Luminancia relativa: para cada canal sRGB c normalizado a 0–1, usa c / 12.92 cuando c ≤ 0.03928 y ((c + 0.055) / 1.055)^2.4 en caso contrario; después L = 0.2126·R + 0.7152·G + 0.0722·B. Relación de contraste = (L1 + 0.05) / (L2 + 0.05), donde L1 es el más claro de los dos colores. Umbrales: 4.5:1 texto normal AA, 7:1 texto normal AAA, 3:1 texto grande AA y componentes de interfaz, 4.5:1 texto grande AAA.
Texto de 18pt (24px) o más, o de 14pt (unos 18.7px) o más si está en negrita. El texto grande solo necesita 3:1 en AA y 4.5:1 en AAA, porque las letras más gruesas y grandes siguen siendo legibles con menos contraste.
Porque el umbral es un corte tajante. #777777 sobre blanco da 4.48:1 y AA exige 4.5:1, así que falla por dos centésimas. Oscurecerlo un paso hasta #767676 llega a 4.54:1 y cumple — que es exactamente lo que hace el botón de sugerencia.
Sí. El criterio de éxito 1.4.11 de WCAG exige 3:1 entre un componente de interfaz de usuario o un gráfico significativo y los colores adyacentes. Los bordes de los campos, los estados de los interruptores, los indicadores de foco y los botones que solo tienen icono entran todos ahí.
Esta herramienta implementa la relación de WCAG 2.x, que es la que hoy referencian las leyes de accesibilidad, las auditorías y los sistemas de diseño. APCA es el algoritmo perceptual propuesto para WCAG 3; produce números distintos y todavía no es un requisito de conformidad.
No. La luminancia y la relación se calculan en JavaScript en tu dispositivo. No se envía nada a ningún servidor ni se almacena en ninguna parte.
Vai.la convierte cualquier URL en un enlace corto con estadísticas de clics, código QR y tu propio biolink.
Vai.la no se hace responsable del uso de las herramientas ni de las decisiones tomadas a partir de sus resultados.