Comprobar contraste de colores

Una respuesta objetiva para dos colores

La vista no es un medidor de contraste confiable. El brillo de la pantalla, el peso de la tipografía, la luz del entorno y los colores vecinos pueden hacer que la misma combinación parezca más clara o más débil. Este comprobador convierte ambos colores a sRGB, calcula su luminancia relativa y compara el valor más claro con el más oscuro mediante la fórmula de WCAG. Devuelve una relación numérica y cuatro decisiones útiles: AA y AAA para texto normal, además de AA y AAA para texto grande. La distinción importa porque un titular puede aprobar aunque el texto pequeño de un párrafo no lo haga.

Formatos admitidos y normalización reproducible

Puede pegar valores habituales de una hoja de estilos o de un token de diseño: HEX de tres o seis dígitos, una función rgb() con tres canales o un color hsl() con saturación y luminosidad porcentuales. La respuesta normaliza cada entrada a HEX de seis dígitos y RGB, por lo que usted puede reproducir el cálculo en un sistema de diseño o en una prueba automática. Los canales alfa quedan fuera a propósito: el aspecto de un color transparente depende de todas las capas inferiores, y aceptar una composición incompleta daría una relación precisa en apariencia, pero potencialmente falsa.

Cómo interpretar el resultado en una interfaz

Use la matriz como una restricción de diseño, no como una certificación de toda la página. Un resultado favorable para texto normal solo describe la relación entre estos dos colores sólidos; no inspecciona el tamaño ni el peso de la fuente, los estados al pasar el puntero, los degradados, las imágenes, el foco del teclado o la semántica. Compruebe por separado cada estado importante de un componente. La herramienta del navegador realiza todo el cálculo localmente y sirve para revisar una paleta con rapidez. Si necesita controlar tokens en integración continua, envíe los mismos dos campos al API y recibirá el mismo objeto estructurado.