Qué es Comprobador de contraste CSS?
La relación de contraste WCAG mide la diferencia de luminancia entre dos colores. Una relación de 4.5:1 cumple el estándar AA para texto normal, y 7:1 cumple AAA. Estos umbrales ayudan a garantizar que las personas con baja visión, deficiencia de visión de color o que leen en una pantalla con iluminación difícil puedan leer el contenido. Esta herramienta calcula la relación precisa a partir de los valores hexadecimales que ingrese y muestra si la combinación pasa el nivel que necesita.
Respuesta rápida
Verifique si dos combinaciones de colores cumplen los estándares de contraste WCAG antes de publicar. La herramienta calcula la relación precisa e indica si el texto normal, el texto grande y los componentes de UI pasan los niveles AA o AAA.
Last updated: 2026-06-11
Limitaciones
- El selector de color devuelve solo valores hexadecimales. No admite entradas RGB, HSL o nombres de color directamente.
- La herramienta verifica pares de colores sólidos. No evalúa contraste en texto con gradiente, sombra de texto o imágenes de fondo.
- Las relaciones de contraste se calculan a partir de los colores que ingrese. Si alguno es transparente, el resultado no reflejará el contraste real.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ingrese el color de primer plano usando un código hexadecimal, valor RGB o selector de color.
- Ingrese el color de fondo de la misma manera.
- Lea el resultado de la relación de contraste y los indicadores de aprobación/rechazo WCAG AA y AAA.
- Ajuste cualquiera de los colores hasta que la relación cumpla su nivel de accesibilidad objetivo.
Para qué puedes usarla
- Verificar si el texto del cuerpo sobre un fondo claro cumple los estándares de legibilidad WCAG AA.
- Validar combinaciones de colores de marca en botones, insignias y componentes de UI.
- Preparar especificaciones de diseño accesibles antes de entregarlas a desarrollo.