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.
Escriba o pegue el color de primer plano en cualquier formato común: #1A1A1A, RGB(26,26,26), HSL(0,0%,10%), o una palabra clave como Marina. Una muestra de color y un selector nativo le permiten ajustarlo.
Establezca el fondo en el que se sienta el texto. Si el color de su texto tiene transparencia, se mezcla con este fondo antes de medir la relación, coincidiendo con lo que los usuarios realmente ven.
La relación de contraste exacta aparece con insignias de pase o de falla para AA y AAA en tamaños normales y grandes, además de la verificación de componentes de interfaz de usuario 3:1, todo junto a una muestra de texto en vivo en su fondo.
Si una combinación falla, aplique el color accesible sugerido: la herramienta empuja el texto más claro o más oscuro hasta que borra su nivel objetivo, entonces puede copiar el valor fijo.
Utiliza las fórmulas oficiales de relación de luminancia relativa y contraste de sRGB de WCAG 2.2, por lo que el número coincide con las auditorías formales con dos decimales en lugar de aproximarse
Cada resultado se califica frente a AA (4.5:1), AAA (7:1), los umbrales de texto grande (3:1 y 4.5:1) y la regla 3:1 para componentes de interfaz de usuario y objetos gráficos que no son de texto.
Una muestra real de textos normales y grandes en su fondo elegido mientras escribe, para que pueda juzgar la legibilidad junto con la puntuación numérica
Cuando un par falla, la herramienta recorre el color del texto o más oscuro en HSL hasta que cumple con su relación objetivo y ofrece un valor de paso que puede aplicar con un solo clic.
Pick colors and convert between HEX, RGB, and HSL formats
Create beautiful CSS gradients with live preview
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!