Verificador de Contraste de Color WCAG

Accesibilidad web y contraste de color: guía completa

La accesibilidad web es el conjunto de principios y técnicas que garantizan que los sitios web y las aplicaciones digitales sean utilizables por todas las personas, independientemente de sus capacidades físicas, sensoriales o cognitivas. Dentro de la accesibilidad visual, el contraste entre el texto y su fondo es uno de los factores más críticos y, al mismo tiempo, uno de los más fáciles de medir y corregir.

Las Web Content Accessibility Guidelines (WCAG), publicadas por el World Wide Web Consortium (W3C), son el estándar internacional de referencia. Su versión 2.1 está adoptada por legislaciones de accesibilidad en la Unión Europea (directiva 2016/2102), Estados Unidos (ADA y Section 508), España (Real Decreto 1112/2018) y muchos otros países. Cumplir con WCAG no solo mejora la experiencia de los usuarios con discapacidades, sino que también reduce el riesgo legal y mejora el SEO.

La fórmula que usa WCAG para calcular el contraste se basa en la luminancia relativa, que refleja cómo el ojo humano percibe el brillo de cada canal de color. El rojo, el verde y el azul no contribuyen por igual a la luminosidad percibida: el verde es el más influyente (71.52%), seguido del rojo (21.26%) y el azul (7.22%). Esta ponderación hace que, por ejemplo, un amarillo puro parezca mucho más brillante que un azul del mismo valor numérico.

Al planificar la paleta de colores de un proyecto digital, es recomendable seguir este proceso:

1. Define tu color de marca o identidad visual.
2. Genera variantes oscuras y claras usando el modelo HSL.
3. Verifica que las combinaciones de texto sobre fondo superen 4.5:1 (AA) o 7:1 (AAA).
4. Documenta las combinaciones aprobadas en el sistema de diseño.
5. Aplica los colores de manera consistente en toda la interfaz.

Es importante entender que las reglas de contraste WCAG aplican a texto funcional: párrafos, títulos, etiquetas de formularios, botones y cualquier texto que transmita información. Los elementos puramente decorativos (imágenes de fondo, patrones, ilustraciones sin texto) están exentos de estos requisitos, aunque siguen siendo buenas prácticas mantener contrastes razonables para todos los elementos visuales.

Nuestro verificador calcula automáticamente la luminancia de ambos colores, la relación de contraste resultante y muestra una vista previa de cómo se verá el texto en tiempo real. También indica claramente si la combinación aprueba o falla en cada nivel WCAG para texto normal y grande, facilitando decisiones de diseño informadas y documentadas.