TU PRÓXIMO GRAN PASO

Diseño / RECURSO GRATUITO

Comprobador de contraste de colores para texto

Calcula el contraste entre texto y fondo. Comprueba los umbrales WCAG AA y AAA para texto normal y grande con colores HEX.

HerramientaAcceso gratuitoSin formulario de descarga

Introduce el color del texto y el del fondo para calcular su relación de contraste. La herramienta compara la pareja con los umbrales de contraste para texto de WCAG: AA normal, AA grande, AAA normal y AAA grande.

TU MESA DE TRABAJO

Prueba una pareja de colores.

Compara texto y fondo con colores sólidos. El resultado se mantiene legible fuera de la muestra.

Colores de texto y fondo

La comparación no envía colores ni analiza una URL. Mide únicamente esta pareja de colores sólidos.

Cómo leer el resultado.

  1. Usa los colores que realmente se tocan.

    Escribe el HEX del texto y el del fondo inmediato. Si hay una imagen, una transparencia o un degradado, esta prueba de dos colores sólidos no representa toda la composición.

  2. Elige el umbral adecuado.

    Para AA, el texto normal requiere al menos 4,5:1 y el texto grande 3:1. Para AAA, los valores son 7:1 y 4,5:1 respectivamente.

  3. Revisa el estado más difícil.

    Comprueba también enlaces, textos secundarios y botones al pasar el cursor o recibir foco. Un resultado válido en una pareja no evalúa toda la página.

Una comprobación concreta, un siguiente paso claro.

Si una pareja no supera el umbral que necesitas, prueba a oscurecer el texto o aclarar el fondo, y vuelve a medir. Mantén el resultado fuera de las muestras para poder leerlo incluso cuando pruebes dos colores muy parecidos.

El contraste de componentes e información gráfica tiene su propio criterio. Esta herramienta muestra comprobaciones de texto; no analiza automáticamente iconos, campos, bordes, imágenes ni toda la accesibilidad del sitio.

Antes de seguir, resolvamos esto.

¿Un 4,49:1 supera el mínimo 4,5:1?

No. La comprobación utiliza el valor calculado completo. El número que mostramos puede redondearse para facilitar su lectura, pero el estado se decide antes de redondear.

¿Puedo revisar el modo oscuro?

Sí. Introduce los colores que uses en ese modo. El tema de esta página no cambia la pareja de colores de la muestra.

¿Un resultado AA certifica mi web?

No. Solo indica que esta pareja de colores sólidos supera el umbral elegido para texto. Otros contenidos y requisitos necesitan revisión adicional.