Contraste de color WCAG: guía práctica de accesibilidad
Aprende qué son las relaciones de contraste WCAG, por qué importan y cómo comprobarlas para un diseño accesible.
¿Qué es el contraste de color WCAG y por qué importa?
Las WCAG (Web Content Accessibility Guidelines) definen la relación de contraste mínima entre el texto y su fondo que se considera accesible. Las guías establecen relaciones de 4.5:1 para texto normal y 3:1 para texto grande en el nivel AA, y de 7:1 y 4.5:1 respectivamente en el nivel AAA.
El contraste de color accesible no es solo un requisito más: afecta directamente a si los usuarios con baja visión, daltonismo o los que leen bajo luz solar intensa pueden leer tu contenido. Diseñar con el contraste en mente hace que tu producto lo pueda usar una audiencia más amplia, y es obligatorio por ley en muchas jurisdicciones.
Casos de uso comunes
- Cuerpo de texto y titulares: verificar combinaciones de前景 y fondo en los diseños
- Botones y enlaces: asegurar que los CTA se lean con claridad sobre sus fondos
- Campos de formulario: comprobar el contraste de etiquetas y placeholders
- Gráficos y visualizaciones: lograr que las etiquetas de datos destaquen sobre los elementos visuales
- UI móvil: compensar reflejos y tamaños de pantalla pequeños
Método 1: Usa el verificador de contraste WCAG gratuito de UtilBoxx (Recomendado)
Nuestro verificador de contraste de color WCAG calcula al instante la relación de contraste entre dos colores y la evalúa según los umbrales AA y AAA. Así se usa:
- Ve a utilboxx.com/es/tools/color/contrast
- Elige un color de primer plano y un color de fondo (hex, RGB o selector)
- Observa la relación de contraste y el estado pass/fail para AA y AAA
- Prueba los ajustes sugeridos directamente en la herramienta
- Copia los valores para tu sistema de diseño
Por qué funciona este método:
- Actualización en vivo al ajustar colores
- Muestra de un vistazo el estado AA, AAA, AA Large y AAA Large
- Sugiere alternativas accesibles cuando una combinación falla
- Incluye un simulador visual (normal, baja visión, daltonismo)
- 100% en el navegador, sin imágenes subidas
Método 2: Calcular el contraste a mano
La fórmula de relación de contraste está definida por WCAG:
- Convierte cada color a su luminancia relativa
- Calcula (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro
- Redondea a dos decimales
Por ejemplo, negro (#000000) sobre blanco (#FFFFFF) da una relación 21:1, el máximo posible.
Si no quieres hacer el cálculo, nuestro verificador de contraste es más rápido.
Método 3: Usa las herramientas de desarrollo del navegador
La mayoría de los navegadores modernos incluyen inspectores de accesibilidad. En Chrome DevTools, haz clic en "Inspeccionar" y abre la pestaña "Accessibility" en el panel Elements para ver la relación de contraste de cualquier elemento de la página. Ideal para depurar código en producción.
Preguntas frecuentes
¿Qué relación de contraste es buena?
Para AA, apunta a al menos 4.5:1 en texto normal y 3:1 en texto grande. Para AAA, busca 7:1 y 4.5:1 respectivamente. Por encima de 7:1 es excelente.
¿Qué cuenta como "texto grande"?
WCAG define texto grande como 18pt (24px) normal o 14pt (18,66px) en negrita. El texto grande tiene un umbral más relajado porque se lee mejor con menos contraste.
¿Se aplica el contraste a elementos no textuales?
Sí. WCAG 2.1 introdujo un mínimo de 3:1 para componentes de UI y objetos gráficos. Iconos, bordes de campos de formulario y elementos de gráficos deben cumplir este mínimo.
¿Cómo verifico el contraste sobre degradados e imágenes?
Coloca una muestra de color sólido bajo el texto en el peor caso (la parte más clara del fondo) y compruébalo. Para imágenes, sube la opacidad de una capa o añade text-shadow para mantener la legibilidad.
Conclusión
El contraste accesible es fundamental para un diseño inclusivo. El verificador de contraste WCAG de UtilBoxx hace que verificar combinaciones sea rápido, visual y formativo.