Comprobador de contraste online gratis (WCAG)

WCAG AA requiere al menos 4.5:1 para texto normal y 3:1 para texto grande. Los iconos, los bordes de campos y otros elementos de UI necesitan 3:1 respecto a los colores que tienen al lado. AAA sube las reglas de texto a 7:1 para texto normal y 4.5:1 para texto grande.

Los valores de rojo, verde y azul de cada color se convierten a luz lineal y se ponderan para obtener una luminancia relativa. La relación es la luminancia más clara más 0.05, dividida entre la más oscura más 0.05, así que va de 1:1 para el mismo color a 21:1 para negro sobre blanco.

El texto grande es de al menos 18pt (24px) en regular o 14pt (unos 18.66px) en negrita. Solo necesita 3:1 para AA y 4.5:1 para AAA. El comprobador no pide un tamaño de fuente, así que consulta las filas de texto grande solo si tu texto es de ese tamaño.

AA es el nivel al que apuntan la mayoría de las leyes y políticas, incluidas la norma EN 301 549 en la UE y la regla de 2024 de EE. UU. para sitios web de gobiernos estatales y locales, que usan WCAG 2.1 AA. AAA es más estricto y un buen objetivo para textos largos de lectura.

Comprueba la regla de 3:1 para los elementos que no son texto, el criterio de éxito 1.4.11 de WCAG. Úsala para colores de iconos, bordes de campos, anillos de foco y líneas de gráficos. Pon el color del elemento en el cuadro de color de texto y el color que hay detrás en el cuadro de fondo.

La relación en pantalla se redondea a dos decimales, pero las comprobaciones usan el valor exacto, como exige WCAG. El gris #959595 sobre blanco es 2.995:1, así que muestra 3.00:1 y aun así no pasa las filas de 3:1. Oscurece un poco el color para que cumpla.

Solo lee códigos hex de 6 dígitos, con o sin el #. Los códigos cortos como #fff, los de 8 dígitos con transparencia, rgb(), hsl() y los nombres de color dan 0.00:1 y no pasan ninguna fila. Escribe #fff como #ffffff. Una letra incorrecta, como en #12345g, se lee como un color distinto sin ningún aviso.

21:1, que es negro puro #000000 sobre blanco puro #ffffff. Dos colores idénticos dan 1:1, la más baja. El par predeterminado de aquí, #1a1a1a sobre blanco, obtiene 17.40:1, y el gris medio #767676 sobre blanco es 4.54:1, justo por encima del límite AA de 4.5:1.

No directamente, ya que compara un color sólido con otro. Para texto sobre un degradado o una imagen, busca el punto detrás del texto cuya luminosidad sea más cercana a la del color del texto. Introduce ese color como fondo y compruébalo.

No. Usa la relación de contraste de WCAG 2.x, en la que se basan WCAG 2.1, WCAG 2.2 y las leyes actuales. APCA es un método en borrador para el futuro WCAG 3 que puntúa el texto según su tamaño y grosor, y esta herramienta no lo calcula.

Sí. Es gratis, sin cuenta y sin límite de comprobaciones. Los colores que introduces permanecen en tu navegador y no se guardan. En el sitio en producción, Google Analytics cuenta los clics en Copiar relación, nunca los colores ni la relación.