Accesibilidad Web 100% Client-Side

Verificador Contraste WCAG

Comprueba al instante si tus combinaciones de color cumplen con los estándares de accesibilidad digital WCAG 2.1 (AA y AAA).

Muestras de Previsualización en Vivo

Texto Grande (Heading 24px)

El diseño accesible beneficia a todos los usuarios

Texto Normal (Body 15px)

Un contraste adecuado mejora la legibilidad para personas con baja visión o fatiga ocular, y en condiciones de luz solar intensa.

Texto en Negrita (14pt Bold)

Texto en negrita con mayor peso visual y definición.

Campo de texto interactivo...

Ratio de Contraste

Excelente Contraste (AAA)

17.85 : 1

1:13:1 (AA Grande)4.5:1 (AA Normal)7:1 (AAA)21:1

Combinaciones Accesibles Sugeridas

Color de Texto (Foreground)

Color de Fondo (Background)

Cumplimiento Normativo WCAG 2.1

Texto Normal (<18pt)

Párrafos, descripciones y cuerpo general de lectura.

Nivel AA (≥ 4.5:1)

Pasa

Nivel AAA (≥ 7.0:1)

Pasa

Texto Grande (≥18pt o 14pt negrita)

Títulos principales, encabezados H1/H2 y banners.

Nivel AA (≥ 3.0:1)

Pasa

Nivel AAA (≥ 4.5:1)

Pasa

Componentes Gráficos e Interfaz

Botones, bordes de campos de texto e iconos funcionales.

Nivel AA (≥ 3.0:1)

Pasa

Criterio de conformidad SC 1.4.11

Cómo verificar el contraste de color WCAG

Asegura que tu diseño web sea legible e inclusivo para todos los usuarios.

1. Introduce los colores de texto y fondo

Escribe el código hexadecimal o selecciónalo visualmente con el selector de color.

2. Analiza los ratios obtenidos

Verifica si el ratio alcanza el mínimo de 4.5:1 para nivel AA o 7:1 para nivel AAA.

3. Realiza ajustes si no se cumple el estándar

Usa el botón de invertir o aclara/oscurece uno de los tonos hasta obtener el indicador verde.

Preguntas Frecuentes sobre Contraste

El nivel AA es el estándar legal y comercial exigido en la mayoría de normativas internacionales (mínimo 4.5:1 para texto normal). El nivel AAA es el estándar óptimo y más estricto (mínimo 7:1).

Texto con tamaño de al menos 18 puntos (aprox. 24px) o texto en negrita de al menos 14 puntos (aprox. 18.5px).

Sí, según el Criterio de Conformidad 1.4.11 de WCAG 2.1, los componentes de interfaz visual y objetos gráficos requieren un ratio mínimo de 3:1 frente a colores adyacentes.