Verificador de Contraste de Color (WCAG)

Verifica que tus colores cumplen los estándares de accesibilidad WCAG — gratis, instantáneo.

¿Qué es?

El Verificador de Contraste de Color es una herramienta gratuita de accesibilidad que calcula el ratio de contraste entre un color de primer plano y uno de fondo según la especificación WCAG 2.1. Introduce o elige dos colores y la herramienta muestra instantáneamente el ratio de contraste, si pasa los niveles WCAG AA y AAA para texto normal y grande, y una vista previa en vivo.

Cómo usarla

  1. Elige el color del texto con el selector de color o escribiendo un código hex.
  2. Elige el color de fondo de la misma manera.
  3. El ratio de contraste y las insignias WCAG se actualizan al instante.
  4. Comprueba la vista previa en vivo para ver la legibilidad real del texto.
  5. Haz clic en "Exportar Informe PNG" para descargar un resumen del resultado.

Por qué usarla

La accesibilidad web no es solo una buena práctica — en muchos países es un requisito legal. Las directrices WCAG 2.1 especifican que el texto normal debe alcanzar al menos un ratio de 4,5:1 (AA) e idealmente 7:1 (AAA). Detectar problemas de contraste al principio del proceso de diseño evita costosas correcciones posteriores.

Preguntas frecuentes

¿Cuál es el requisito de contraste WCAG?

WCAG 2.1 Nivel AA requiere un ratio de 4,5:1 para texto normal y 3:1 para texto grande. Nivel AAA requiere 7:1 para texto normal y 4,5:1 para texto grande.

¿Qué cuenta como "texto grande" en WCAG?

El texto grande se define como al menos 18 puntos (24px) en peso normal, o al menos 14 puntos (18,66px) en negrita.

¿Puedo introducir colores como RGB o HSL?

Los campos aceptan códigos hex y puedes usar el selector de color integrado que soporta cualquier modelo de color.

¿Pasar el nivel AA garantiza la accesibilidad del sitio?

El contraste es un factor importante, pero la accesibilidad completa incluye también tamaño de fuente, navegación por teclado y compatibilidad con lectores de pantalla.

¿Qué contiene el PNG exportado?

El PNG muestra ambos colores, el ratio de contraste y el estado pass/fail para los cuatro criterios WCAG.