Comprobador de contraste de colores

Compara dos colores HEX sólidos con los criterios de contraste de texto WCAG 2.2.

Preparando la herramienta…

Probar un ejemplo explicado

Compara dos colores HEX sólidos con los criterios de contraste de texto WCAG 2.2.

Comprueba las unidades y opciones y pulsa el botón de cálculo de la herramienta. El ejemplo es ficticio; sustituye los valores para tu propio cálculo.

Texto de ejemplo

Color del texto: #000000
Color de fondo: #ffffff

Resultado esperado

Relación de contraste: 21.000000:1
WCAG 2.2 AA — texto normal (4.5:1): Cumple
WCAG 2.2 AA — texto grande (3:1): Cumple
WCAG 2.2 AAA — texto normal (7:1): Cumple
WCAG 2.2 AAA — texto grande (4.5:1): Cumple
La comprobación usa la relación completa; el valor mostrado está redondeado.

El comprobador calcula la relación de contraste entre el texto y el fondo y la compara con los umbrales WCAG AA y AAA.

Esperando a la herramienta. La explicación sigue disponible sin JavaScript.

Método y límites

Introduce los dos colores HEX opacos, uno para el texto y otro para el fondo. Consulta la relación y los criterios que cumple.

Solo comprueba el contraste de texto con colores sólidos. No verifica tamaño ni grosor de fuente, elementos gráficos, estados interactivos u otros requisitos de accesibilidad.

✓ Procesamiento local✓ Sin cuenta✓ Datos procesados aquí✓ Gratis

Respuesta rápida

El comprobador calcula la relación de contraste entre el texto y el fondo y la compara con los umbrales WCAG AA y AAA.

El código de la página y sus recursos se cargan desde el sitio; las herramientas diseñadas para el procesamiento local gestionan los datos introducidos en el navegador.

Cómo usarla

Introduce los dos colores HEX opacos, uno para el texto y otro para el fondo. Consulta la relación y los criterios que cumple.

Límites

Solo comprueba el contraste de texto con colores sólidos. No verifica tamaño ni grosor de fuente, elementos gráficos, estados interactivos u otros requisitos de accesibilidad.

Preguntas frecuentes

¿Superar la prueba significa que toda la página es accesible?

No. Solo se comprueba el contraste de texto entre dos colores sólidos y opacos; no se revisan otros requisitos de accesibilidad.

¿Qué se considera texto grande en WCAG?

WCAG define texto grande como al menos 18 puntos en peso normal o 14 puntos en negrita. La herramienta informa de los umbrales de contraste correspondientes.

Fuentes y referencias

Estas referencias documentan las normas y fuentes citadas; no validan el resultado de la herramienta.