¿Qué es el contraste de colores en accesibilidad web?
El contraste de colores es la diferencia de luminosidad entre el color del texto y el color de fondo. Un contraste adecuado es esencial para que todas las personas puedan leer el contenido de una página web, especialmente personas mayores, personas con baja visión o daltonismo.
¿Cómo funciona esta calculadora?
Nuestra calculadora aplica la fórmula oficial de las WCAG 2.1 (Web Content Accessibility Guidelines) del W3C. Convierte cada color de hex a su luminancia relativa y calcula el ratio de contraste, que va desde 1:1 (sin contraste) hasta 21:1 (contraste máximo, blanco sobre negro).
Niveles de conformidad WCAG
Las WCAG definen dos niveles de conformidad para el contraste de colores:
- Nivel AA: ratio mínimo de 4.5:1 para texto normal y 3:1 para texto grande (18px bold o 24px regular).
- Nivel AAA: ratio mínimo de 7:1 para texto normal y 4.5:1 para texto grande. Es el nivel más exigente.
¿Por qué es importante el contraste?
Según la OMS, más de 2.200 millones de personas en el mundo tienen algún tipo de deficiencia visual. Un contraste adecuado no solo mejora la accesibilidad, sino también la experiencia de usuario general, la legibilidad bajo luz solar directa y el posicionamiento SEO, ya que Google valora la accesibilidad web.
Consejos para mejorar el contraste
- Evita texto gris claro sobre fondo blanco: es el error más común.
- Los colores de marca pueden usarse en botones y encabezados, pero asegúrate de que cumplen el ratio mínimo.
- Usa esta herramienta durante el diseño, no solo al final del proyecto.
- El texto sobre imágenes necesita una capa de superposición semitransparente para garantizar el contraste.
- Prueba tus colores tanto en modo claro como en modo oscuro si tu web los soporta.