Verificador de Contraste de Color
Verifica la relación de contraste WCAG entre los colores de texto y fondo.
Vista previa de texto grande
Asà se ve la vista previa de texto normal.
Acerca del Verificador de Contraste de Color
Verifica si la combinación de colores de texto y fondo cumple con los requisitos de contraste de accesibilidad WCAG 2.1. AA es el estándar mÃnimo recomendado; AAA es el estándar mejorado para una mejor legibilidad.
¿Qué es esta herramienta?
Verifica si una combinación de color de primer plano (texto) y de fondo cumple con los estándares de contraste de accesibilidad WCAG 2.1. Obtén al instante la relación de contraste y los resultados de aprobado/fallido para los niveles de cumplimiento AA y AAA.
Cómo usar
- Elige o escribe un valor hexadecimal para el color de primer plano (texto).
- Elige o escribe un valor hexadecimal para el color de fondo.
- Revisa la vista previa en vivo y los resultados de aprobado/fallido para cada nivel WCAG.
Casos de uso común
- Verificar que las combinaciones de color de texto y fondo cumplan las pautas de accesibilidad antes de publicar un diseño
- Elegir combinaciones de colores legibles para botones, enlaces y texto de cuerpo
- Auditar un sitio web o aplicación existente en cuanto a cumplimiento de accesibilidad
Consejos y trucos
- AA (4.5:1) es el estándar mínimo que la mayoría de los sitios web deberían cumplir para texto normal.
- El texto grande (18pt+, o 14pt+ en negrita) tiene una relación mínima requerida más baja, ya que es más fácil de leer con menor contraste.
Preguntas frecuentes
¿Cuál es la diferencia entre cumplimiento de WCAG AA y AAA?
AA es el estándar mínimo que la mayoría de los sitios web deberían cumplir, requiriendo una relación de contraste de 4.5:1 para texto normal. AAA es un estándar más estricto requiriendo 7:1, destinado a contenido donde la máxima legibilidad es crítica.
¿Por qué el texto grande tiene una relación de contraste requerida más baja?
El texto más grande (18pt+ regular, o 14pt+ en negrita) es inherentemente más fácil de leer con menor contraste, así que WCAG establece una relación mínima reducida de 3:1 para AA en texto grande en comparación con 4.5:1 para texto normal.
¿Cómo se calcula realmente la relación de contraste?
Se basa en la luminancia relativa de ambos colores, calculada según la fórmula WCAG, y se expresa como una relación de 1:1 (sin contraste, colores idénticos) hasta 21:1 (contraste máximo, negro sobre blanco).
¿Qué pasa si mi combinación de colores falla la verificación de contraste?
Intenta oscurecer el color del texto, aclarar el fondo o aumentar el tamaño del texto para caer bajo el umbral de texto grande, que tiene una relación requerida más baja.
¿Se envían los colores que pruebo a algún lado?
No. La relación de contraste se calcula completamente en tu navegador usando fórmulas estándar de WCAG — no se transmiten ni almacenan datos de color.
Verifica la relación de contraste WCAG entre los colores de texto y fondo. Comprueba el cumplimiento de accesibilidad AA/AAA al instante, gratis y online.