./prontouso.com

UTILIDADES DE DISEÑO

Verificador de Contraste

Verifica la relación de contraste WCAG entre un color de texto y un color de fondo, con resultados de aprobado/reprobado para AA y AAA, tanto en texto normal como grande.

Estado de la herramientaSe ejecuta en tu navegador
Vista previa

Opciones

El texto normal se ve así.

Texto grande

"Texto grande" significa 18pt (24px) o más, o 14pt (18,7px) y negrita.

Resultados

Cumple con AA para texto
Relación de contraste
17.08:1
CategoríaAAAAA
Texto grandeApruebaAprueba
Texto pequeñoApruebaAprueba
Gráficos e interfazApruebaN/A

Cómo funciona

  1. Ingresa tus datos

    Completa los valores, pega el texto o sube el archivo que necesita esta herramienta.

  2. Obtén el resultado al instante

    La mayoría de las herramientas se actualizan mientras escribes; algunas usan un solo botón. De cualquier forma, el resultado aparece aquí mismo.

  3. Usa tu resultado

    Copia, descarga o comparte lo que genere la herramienta — el control siempre es tuyo.

Privacidad y procesamiento — Se ejecuta localmente en tu navegador. Esta herramienta no sube tu entrada a ningún servidor.

¿Qué es Verificador de Contraste?

Verifica la relación de contraste WCAG entre un color de texto y un color de fondo, y comprueba si aprueba AA y AAA tanto en texto normal como grande.

ENTIENDE LA HERRAMIENTA

Cómo verificar el contraste de color

Qué significa la relación

La relación de contraste va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco), calculada a partir de la luminancia relativa de cada color usando la fórmula definida en la especificación WCAG 2.x.

Umbrales AA y AAA

  • AA, texto normal: al menos 4.5:1.
  • AA, texto grande: al menos 3:1.
  • AAA, texto normal: al menos 7:1.
  • AAA, texto grande: al menos 4.5:1.
  • Texto grande significa 18pt (24px) de peso regular, o 14pt (aproximadamente 18.7px) en negrita, según la definición de WCAG.

Leer la vista previa

El cuadro de muestra presenta ambos tamaños de texto renderizados con tus dos colores, lo cual es una forma más rápida de juzgar la legibilidad que solo el número de la relación.

Cómo usarlo

  • Elige o escribe un color de primer plano (texto) y un color de fondo.
  • Lee la relación de contraste y los cuatro resultados de aprobado/reprobado.
  • Usa el botón de intercambio para verificar el par en la otra dirección.

Notas sobre el contraste

La relación usa el cálculo de luminancia relativa de WCAG 2.x para colores sRGB. La transparencia debe probarse contra el color de fondo final ya compuesto.

Preguntas frecuentes

¿A qué nivel debería apuntar?

AA es la base ampliamente exigida para la accesibilidad web, incluso bajo la mayoría de los requisitos legales de accesibilidad. AAA es más estricto y se recomienda cuando puedas lograrlo, especialmente para el texto del cuerpo.

¿Esto verifica algo más aparte del contraste?

No. El contraste de color es una parte de la accesibilidad del texto; el tamaño de fuente, el peso y el espaciado también afectan la legibilidad, pero no se evalúan aquí.

¿Por qué hay umbrales separados para texto grande?

WCAG permite una relación más baja para texto grande porque los trazos más grandes y gruesos se mantienen legibles con menor contraste que el texto pequeño del cuerpo.

¿El alfa o la transparencia afectan la relación?

El cálculo de contraste de WCAG se basa en los colores finales visibles. Si tu interfaz usa transparencia, primero muestrea o calcula el color compuesto sobre su fondo real, y luego prueba ese par.

Herramientas relacionadas