Prueba SEO Tools

Comprobador de contraste

Comprobador de contraste de color WCAG para calcular la relación de contraste del texto.

Relación de contraste 21:1

Texto normal

WCAG AA: Pass

WCAG AAA: Pass

Ejemplo de texto normal - 16px

Texto grande

WCAG AA: Pass

WCAG AAA: Pass

Ejemplo de texto grande 18 pt/24 px

Objetos gráficos y componentes de la interfaz de usuario

WCAG AA: Pass

Calcula la relación de contraste para un tamaño de texto normal.
Calcula la relación de contraste para textos de gran tamaño.
Calcule la relación de contraste para los componentes de la interfaz de usuario.
Seleccione el color en el selector de colores
Configurar la luminosidad del color

Cómo usar el comprobador de contraste

Elige el color de fondo
Elige el color de primer plano
Ajusta la luminosidad si es necesario
Compruebe la auditoría para ver texto normal y grande

PREGUNTAS MÁS FRECUENTES

¿Cómo funciona el comprobador de contraste?

Debe evaluar el color del texto y el fondo. Según las directrices del WCAG 2.1, estas son: Texto grande: el texto con un tamaño mínimo de 18 píxeles requiere una relación de contraste de 3:1; texto pequeño: el texto con un tamaño inferior a 18 píxeles requiere una relación de contraste de 4, 5:1.

¿Por qué mi sitio web debe tener suficiente contraste de colores?

El texto sobre un fondo con una relación de contraste baja suele ser difícil de leer. Esto no solo afecta negativamente a las personas con discapacidad visual, sino que también es un inconveniente para todos los usuarios. Un ejemplo es leer un texto en un teléfono celular afuera en un día soleado.

¿Qué significa la accesibilidad del sitio web?

Un sitio web accesible es un sitio web diseñado para que las personas con discapacidades visuales o auditivas puedan usarlo sin restricciones. Por ejemplo, esto garantiza que todos los elementos del sitio tengan suficiente contraste de color, es decir, el color del texto es muy diferente del color de fondo.

¿Las imágenes y los vídeos deben cumplir con los requisitos de contraste de color de las WCAG?

Algunos componentes gráficos y de interfaz requieren una relación de contraste de al menos 3:1. Sin embargo, esto no incluye logotipos, imágenes decorativas ni archivos multimedia generales.

Productos

Sitios web

Sobre

language

Comprobador de contraste

Comprobador de contraste de color WCAG para calcular la relación de contraste del texto.

Texto normal

Texto grande

Objetos gráficos y componentes de la interfaz de usuario

Cómo usar el comprobador de contraste

PREGUNTAS MÁS FRECUENTES

¿Cómo funciona el comprobador de contraste?

¿Por qué mi sitio web debe tener suficiente contraste de colores?

¿Qué significa la accesibilidad del sitio web?

¿Las imágenes y los vídeos deben cumplir con los requisitos de contraste de color de las WCAG?