Comprobador de contraste de colores
Respuesta breve
Comprueba las proporciones de contraste de color texto-fondo frente a los estándares WCAG AA/AAA.
Contraste justo — comprueba el uso en texto grande.
El veloz zorro marrón salta
El veloz zorro marrón salta
Cómo mejorar
El nivel AA de WCAG exige un ratio de contraste mínimo de 4.5:1 para texto normal y de 3:1 para texto grande (18pt, o 14pt en negrita). Apunta a 7:1 (AAA) siempre que puedas — mantiene el texto legible para personas con baja visión y bajo luz solar intensa.
Qué hace
Calcula la relación de contraste WCAG entre cualquier color de primer plano y de fondo que introduzcas, usando la misma fórmula de luminancia relativa de la especificación WCAG, y la compara con los umbrales AA y AAA para texto normal y texto grande (4,5:1 / 3:1 para AA, 7:1 / 4,5:1 para AAA). Muestra una vista previa de texto en directo con tus colores junto a una insignia de superado o fallido para cada umbral.
Por qué importa
El texto con poco contraste es el fallo de accesibilidad detectado automáticamente más común en las páginas de inicio según el informe anual Million de WebAIM, y es uno de los más fáciles de corregir con un cambio de color. El criterio de éxito 1.4.3 de WCAG 2.1 fija las relaciones mínimas, y la norma EN 301 549 — la norma en la que se basa la Ley Europea de Accesibilidad — las aplica al contenido web.
Cómo funciona
-
Introduce o elige un color de primer plano (texto) y un color de fondo
-
Calculamos la relación de contraste de luminancia relativa WCAG entre ambos colores
-
Comparamos la relación con los umbrales AA y AAA para texto normal y texto grande
-
Ves una vista previa en directo de tu texto sobre tu fondo junto a una insignia de superado o fallido para cada umbral
Ejemplo de entrada y salida
foreground: #767676 background: #ffffff
contrast ratio: 4.54:1 texto normal AA (4.5:1) PASS texto grande AA (3:1) PASS texto normal AAA (7:1) FAIL texto grande AAA (4.5:1) PASS
Quién lo usa
-
Diseñador
Valida la paleta de colores de marca frente a WCAG antes de fijarla. Muchos pasteles "modernos" fallan el 4,5:1 sobre blanco — mejor descubrirlo antes de aplicarlo a toda la marca.
-
Auditor de accesibilidad
Comprueba cada combinación de color de texto y fondo frente a los umbrales AA y AAA antes de aprobar la declaración del Anexo V de la EAA de un cliente.
-
Desarrollador frontend
Detecta regresiones de contraste introducidas por cambios de tema en variables CSS antes de que lleguen a producción.
Preguntas frecuentes
¿Qué relación WCAG necesito?
4,5:1 para texto normal, 3:1 para texto grande (≥18pt o ≥14pt en negrita) y componentes de interfaz. WCAG 2.1 AAA exige 7:1 — un listón más alto que la mayoría de las marcas no se marca como objetivo.
¿Esto comprueba imágenes e iconos?
Solo contraste de texto, y solo para los dos colores que introduces aquí. El contraste en imágenes (por ejemplo, texto sobre imagen en banners principales) necesita revisión manual — no hay un escaneo automático de la página.
¿Qué contraste exige la EAA?
Para el contenido web, la norma EN 301 549 v3.2.1 aplica el nivel AA de WCAG 2.1, incluido el 1.4.3 — así que el texto necesita al menos 4,5:1 frente a su fondo (3:1 para texto grande). Comprueba cada combinación que use tu sitio.