Comprobador de contraste de color
Comprueba localmente el contraste entre el color del texto y el color de fondo según la fórmula de luminancia relativa WCAG, determina por separado los umbrales para texto normal y texto grande AA/AAA y permite exportar informes.
Cómo utilizar el comprobador de contraste de color
Los valores de color solo calculan la luminancia relativa y el contraste en el navegador actual; no se suben ni se guardan.
Introduce dos colores
Usa el selector de color o pega un valor #RRGGBB para establecer el color de primer plano y el color de fondo; la vista previa se actualizará al mismo tiempo.
Umbral de comprobación
Haz clic en Comprobar para consultar por separado el estado de aprobación de AA del texto normal, AAA del texto normal y AA del texto grande.
Copiar registro de comprobación
Después de aprobar la comprobación, puedes copiar el informe o descargar TXT, que registra los valores de color, las proporciones y los resultados de cada nivel de umbral.
Limitaciones y notas
- La versión inicial solo acepta #RGB o #RRGGBB sin transparencia; para los colores semitransparentes, primero debes determinar el fondo de composición real.
- 4.5:1 se aplica al texto normal AA; 3:1 se aplica a texto grande AA; 7:1 es el umbral de referencia para texto normal AAA; también debes comprobar el tamaño de fuente, el peso tipográfico y el contraste de los elementos no textuales.
- La herramienta solo calcula un par de colores sólidos; no simula degradados, imágenes, sombras, renderizado de fuentes ni fondos complejos.
Preguntas frecuentes
¿Qué significa 4.5:1?
Es el umbral mínimo de AA para el texto normal de WCAG; el umbral de AA para texto normal de tamaño grande es 3:1.
¿Por qué no se puede determinar directamente un color transparente?
El color final del primer plano o del fondo transparentes depende del orden de composición y de la imagen subyacente; es más fiable determinar primero el color sólido que se muestra realmente.
¿Tener un contraste aprobado garantiza la accesibilidad?
No necesariamente. También se deben comprobar el tamaño de fuente, el peso de la fuente, los estados, el foco, los componentes no textuales, los fondos de imagen y el resultado de visualización en dispositivos reales.