♿

verificador contraste WCAG

Comprueba la relación de contraste de color para el cumplimiento de accesibilidad WCAG AA y AAA.

Herramientas de diseño Se ejecuta localmente No se envían datos
WCAG AA / AAA accesibilidad color
Color de primer plano
Color de fondo
Vista previa
Texto normal — El rápido zorro marrón salta sobre el perro perezoso.
Texto grande (24px normal)
Texto grande (18.67px en negrita)
Componente de interfaz
—
Relación de contraste
Nivel Texto normal Texto grande Componentes de UI
AA — — —
AAA — — N/D
WCAG 2.1 — AA requiere ≥ 4.5:1 para texto normal, ≥ 3:1 para texto grande y componentes de UI. AAA requiere ≥ 7:1 para texto normal, ≥ 4.5:1 para texto grande. Texto grande = 18 pt (24 px) normal o 14 pt negrita (18.67 px).

¿Qué es el comprobador de contraste?

Comprueba la relación de contraste de color para cumplir con la accesibilidad WCAG AA y AAA. Verifica al instante las combinaciones de color de primer plano y fondo para texto normal, texto grande y componentes de interfaz.

Cómo usar el comprobador de contraste

  1. Introduce o selecciona el color del texto en primer plano.
  2. Introduce o selecciona el color de fondo detrás de él.
  3. Consulta al instante la relación de contraste y el resultado de aprobado o no aprobado de WCAG.
  4. Ajusta cualquiera de los dos colores hasta que la combinación cumpla tu objetivo de accesibilidad.

Herramientas relacionadas

🎨
selector de color
Convierte colores entre HEX, RGB, HSL y CMYK
 🌈
generador gradientes CSS
Crea degradados CSS lineales y radiales con vista previa en vivo
 🎨
generador paleta colores
Genera paletas de colores complementarias, análogas y triádicas
Entiende el contraste de color ▾
Ejemplo
Entrada Comprobando texto gris medio sobre un fondo blanco:
Salida Resultado: cumple AA para texto grande (≥ 3:1), pero no cumple AA para texto normal (requiere 4.5:1). Oscurece un poco el gris para cumplir todos los niveles AA.
Casos de uso comunes
  • Comprueba el contraste de botones y enlaces antes de publicar actualizaciones de la interfaz
  • Valida los colores de texto en sistemas de marca y guías de estilo
  • Revisa la legibilidad de los gráficos de marketing
  • Prueba rápidamente combinaciones de oscuro sobre claro y claro sobre oscuro
Preguntas frecuentes
¿Cuál es la diferencia entre los niveles de contraste AA y AAA?

WCAG AA requiere una relación de 4.5:1 para texto normal y de 3:1 para texto grande —el requisito legal estándar. AAA requiere 7:1 para texto normal y 4.5:1 para texto grande, lo que ofrece una accesibilidad mejorada para usuarios con baja visión grave.

¿Esto comprueba el contraste de elementos no textuales (iconos, bordes)?

Sí — WCAG 1.4.11 (Contraste de elementos no textuales) requiere 3:1 para componentes de interfaz y elementos gráficos. El resultado AA para componentes de interfaz de la tabla cubre este requisito.

Mis colores cumplen AA pero no AAA — ¿tengo que corregirlos?

El cumplimiento de AAA no es obligatorio para todo el contenido. WCAG AA es el requisito legal estándar en la mayoría de las jurisdicciones. Apunta a AAA cuando sea posible, pero AA es suficiente para el cumplimiento legal.

¿Qué se considera texto grande?

WCAG define el texto grande como 18pt (24px) o más para peso normal, o 14pt (aproximadamente 18.67px) o más para texto en negrita. El texto grande tiene un requisito de contraste menor (3:1 para AA) porque es inherentemente más fácil de leer.