Comprobador de contraste de color

Compruebe el contraste de texto normal y de gran tamaño entre los colores de primer plano y de fondo.

Comprobador de contraste de color

Un resultado del lado del navegador para planificación y consulta.

Primer planoFondo

CSS / HEX

GUÍA

Qué comprobar antes de usarlo

Cuándo es útil esta herramienta

Úsala antes de lanzar los colores de primer plano y fondo para texto de cuerpo, etiquetas o botones. Introduce dos colores HEX para ver su ratio de contraste y los resultados de los umbrales de texto normal y texto grande.

Cómo se obtiene el resultado

El cálculo linealiza los canales sRGB, obtiene la luminancia relativa y divide la luminancia más clara más 0.05 entre la luminancia más oscura más 0.05. Luego compara ese ratio con los umbrales de texto 3:1, 4.5:1 y 7:1.

Ejemplo práctico e interpretación

Al introducir el color de primer plano #111111 sobre el fondo #FFFFFF se obtiene un ratio alto. Revisa primero AA normal para texto pequeño del cuerpo; para una combinación reservada a encabezados grandes, consulta también el resultado AA large.

Ámbito y limitaciones

Aprobar un ratio no completa una revisión de accesibilidad. Prueba el tamaño y peso real de la fuente, los estados interactivos, el texto colocado sobre imágenes y cualquier información transmitida solo por el color.

Preguntas frecuentes

¿Cómo paso un color del comprobador de contraste de colores a otra app?

Usa el botón de copiar debajo del resultado para copiar texto CSS, HEX o HSL. Confirma que la app de destino interpreta el mismo formato de color.

¿Coincidirá el color de pantalla del comprobador de contraste de colores con la impresión?

No automáticamente. Las pantallas RGB emisivas y el papel y la tinta reflectantes usan gamuts y modelos de mezcla distintos, por lo que aún se necesitan perfiles de impresión y pruebas.

¿Puedo aprobar un token de diseño solo con el comprobador de contraste de colores?

Úsalo como candidato, luego prueba el fondo real, el modo oscuro, los estados interactivos y el contraste del texto antes de nombrar y aprobar un token.