Revisador de contraste de color

El verificador de contraste de color mide la relación de contraste entre un color de primer plano (texto) y un color de fondo y le indica si ese par cumple con las pautas de accesibilidad del contenido web. Reporta un número único entre 1:1 y 21:1 y lo califica contra los umbrales WCAG 2.2 para AA y AAA en tamaños de texto normales y grandes, además del umbral 3:1 separado para componentes y gráficos de interfaz de usuario.

El contraste es la diferencia en la luminancia relativa entre dos colores, no solo lo diferentes que se ven. Dos colores pueden sentirse distintos mientras fallan para los lectores con baja visión, deficiencia de visión en color o cualquier persona que use un teléfono a la luz del sol. La relación se calcula con la fórmula exacta de luminancia relativa de sRGB definida por WCAG, por lo que el resultado coincide con lo que experimentan las herramientas de auditoría y los usuarios de lectores de pantalla en lugar de una suposición visual aproximada.

Todo se ejecuta en su navegador. Escriba o pegue colores como hexadecimal, RGB, HSL o una palabra clave CSS, vea una actualización de texto en vivo y si falla un par, puede aplicar un color sugerido que pase. No se carga nada, no hay registro y la herramienta sigue funcionando sin conexión una vez que la página se ha cargado.

La fórmula de contraste WCAG 2 es una relación de luminancia relativa, y sus umbrales son con los que se miden las auditorías de accesibilidad y la mayoría de los requisitos legales, por lo que es el número correcto para diseñar. También se sabe que es imperfecto: puede ser generoso con el texto claro sobre fondos oscuros y duro con algunos pares de tonos medios, razón por la cual el algoritmo sucesor, APCA, existe y se está probando para versiones futuras. El texto grande tiene una barra inferior y las medias grandes son 18pt o 14pt cuando están en negrita, que son alrededor de 24px y 18,66px. Los elementos que no son de texto se tratan por separado en 1.4.11 en 3:1, y esa es la regla que más a menudo se pasa por alto: los botones de iconos, los bordes de entrada y los anillos de enfoque lo necesitan, y un diseño puede pasar cada párrafo y aún fallar en sus campos de forma.