Calcular contraste de color WCAG

Devuelve la luminancia de cada color, la relación de contraste resultante e indicadores claros de conformidad AA y AAA para texto normal y grande. Puede usarla para revisar tokens de diseño, validar colores de interfaz antes de publicar o incorporar una comprobación de accesibilidad repetible a un flujo automatizado. Las entradas son colores hexadecimales explícitos, los cálculos son deterministas y los formatos no válidos producen un error útil. La herramienta web sirve para consultas individuales; cada solicitud mediante API cuesta $0.002.

Comprenda los valores que devuelve la calculadora

El resultado comienza normalizando ambas entradas como colores hexadecimales de seis dígitos en minúsculas; así, una abreviatura como #fff se presenta siempre como #ffffff. A continuación muestra la luminancia relativa del primer plano y del fondo. Esta luminancia va de cero para el negro a uno para el blanco y se obtiene linealizando los canales sRGB y ponderándolos según la distinta sensibilidad visual al rojo, verde y azul. La relación de contraste compara la luminancia más clara con la más oscura: va de 1:1 para colores idénticos a 21:1 para negro y blanco. El valor visible se redondea a dos decimales, pero cada decisión de conformidad utiliza el valor completo sin redondear. Esto evita que un resultado mostrado como 4.50 apruebe si su valor real es inferior a 4.5. La respuesta agrupa cuatro valores booleanos para texto normal y grande, adecuados tanto para mostrar a un equipo de diseño como para comprobar una política en pruebas automatizadas.

Introduzca colores válidos e interprete AA y AAA

Indique el primer plano y el fondo como colores hexadecimales de tres o seis dígitos, con almohadilla inicial o sin ella. Se aceptan valores como #123, 123, #112233 y AABBCC, que se normalizan antes del cálculo. Se rechazan nombres CSS, expresiones rgb() o hsl(), colores hexadecimales de cuatro u ocho dígitos con alfa, cadenas vacías y valores que no sean texto, porque la opacidad y la composición exigen más contexto. Para texto normal, WCAG AA requiere al menos 4.5:1 y AAA exige 7:1. Para texto grande, AA requiere 3:1 y AAA, 4.5:1. Por lo general, se considera grande el texto de al menos 18 puntos en peso normal o 14 puntos en negrita. La capacidad no inspecciona la tipografía; presenta ambas matrices para que su aplicación elija la pertinente. Un contraste aprobado es solo una parte de una revisión de accesibilidad y no demuestra por sí solo que toda la interfaz sea accesible.

Integre los resultados en diseño y entrega

Parta de los tokens reales de primer plano y fondo que utiliza el componente, no de colores tomados de una captura comprimida. En una revisión manual, compare cuerpo de texto, texto secundario, enlaces, etiquetas de botones, ayudas de formularios, indicadores de foco y estados deshabilitados con todas sus superficies. En un sistema de diseño, mantenga una matriz pequeña de parejas aprobadas y llame a la API cuando cambie la paleta. Una prueba de integración continua puede rechazar una pareja de texto cuando AA para texto normal sea falso, y permitir combinaciones decorativas o de titulares grandes bajo una regla documentada. Conserve los colores normalizados y la relación junto al resultado para facilitar su reproducción. Cada solicitud automatizada cuesta $0.002; las entradas no válidas devuelven un error. Como el algoritmo no usa red, azar ni hora actual, la misma pareja siempre genera el mismo resultado. Para transparencias, degradados, fotografías o estados interactivos, determine primero los colores renderizados o use una auditoría del navegador con contexto completo.