Esta herramienta calcula la relación de contraste entre dos colores para verificar el cumplimiento de las pautas WCAG en activos digitales de negocios. Vendedores de comercio electrónico, especialistas en marketing y equipos web la utilizan para garantizar que el texto en sitios web, anuncios y páginas de productos sea legible. Ayuda a cumplir con los estándares de accesibilidad requeridos para muchas operaciones comerciales en línea.
Contrast Ratio Calculator (WCAG)
Check color contrast compliance for web and digital business assets
Contrast Ratio Results
Cómo usar esta herramienta
Ingresa el código hexadecimal de tu texto (color de primer plano) y el color de fondo usando los campos de texto o los selectores de color. Selecciona el nivel de cumplimiento de WCAG que necesitas verificar en el menú desplegable. Haz clic en Calcular relación de contraste para ver tus resultados. Usa el botón Restablecer para borrar todo y comenzar de nuevo. Copia la relación de contraste a tu portapapeles con un clic para compartirla fácilmente con tu equipo de diseño o marketing.
Fórmula y lógica
La relación de contraste se calcula utilizando la fórmula estándar de WCAG 2.1 para luminancia relativa:
- Primero, convierte los códigos de color hexadecimales a valores RGB, luego normaliza cada canal RGB a una escala de 0-1.
- Calcula la luminancia relativa para cada color usando la fórmula: 0.2126*R + 0.7152*G + 0.0722*B, donde R, G, B se ajustan por corrección gamma.
- La relación de contraste es (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia más clara y L2 es la luminancia más oscura.
Los umbrales de cumplimiento de WCAG son:
- Texto normal AA: mínimo 4.5:1
- Texto grande AA (18pt+ o 14pt+ en negrita): mínimo 3:1
- Texto normal AAA: mínimo 7:1
- Texto grande AAA (18pt+ o 14pt+ en negrita): mínimo 4.5:1
Notas prácticas
Para equipos de negocio y comercio electrónico, estos consejos prácticos te ayudan a aplicar los resultados de la relación de contraste en operaciones reales:
- Las páginas de productos de comercio electrónico deben cumplir con los estándares AA de WCAG para evitar demandas de accesibilidad, que han aumentado significativamente para los minoristas en línea en los últimos años.
- Los correos electrónicos de marketing con texto de bajo contraste a menudo ven tasas de clics más bajas, ya que los usuarios tienen dificultades para leer el contenido en dispositivos móviles.
- Usa pares de colores de alto contraste para los botones de llamada a la acción (por ejemplo, texto blanco sobre fondos de color de marca) para mejorar las tasas de conversión.
- Al renovar tu marca, prueba todas las nuevas paletas de colores contra los estándares WCAG antes de lanzarlas para evitar costosos ajustes en el sitio web después del lanzamiento.
- Las auditorías de accesibilidad de terceros para sitios de comercio electrónico a menudo verifican primero las relaciones de contraste, por lo que las pruebas previas te ahorran tiempo y costos de auditoría.
Por qué esta herramienta es útil
Los propietarios de pequeñas empresas, vendedores de comercio electrónico y equipos de marketing necesitan verificaciones confiables de relación de contraste para cumplir con los requisitos legales de accesibilidad y mejorar la experiencia del usuario. Los cálculos manuales de contraste son propensos a errores y consumen mucho tiempo, especialmente al probar múltiples combinaciones de colores para sitios web, anuncios y gráficos de redes sociales. Esta herramienta proporciona resultados instantáneos y precisos de cumplimiento WCAG sin necesidad de software externo ni suscripciones. Ayuda a evitar sanciones legales, mejora la legibilidad para clientes con discapacidades visuales y aumenta las métricas de participación para los activos digitales de tu negocio.
Preguntas frecuentes
¿Qué nivel de WCAG necesito para mi sitio web de comercio electrónico?
La mayoría de los sitios de comercio electrónico deben cumplir con los estándares AA de WCAG para todo el contenido de texto y así cumplir con la ADA y las leyes internacionales de accesibilidad. Se recomienda AAA para texto crítico como instrucciones de pago, mensajes de error y descripciones de productos para maximizar la legibilidad.
¿Puedo usar esta herramienta para los colores de anuncios en redes sociales?
Sí, esta herramienta funciona para cualquier activo digital, incluidos anuncios en redes sociales, plantillas de correo electrónico e interfaces de aplicaciones móviles. El alto contraste en los anuncios mejora la legibilidad en pantallas pequeñas, lo que lleva a un mejor compromiso y un mayor retorno de la inversión publicitaria para las pequeñas empresas.
¿Con qué frecuencia debo verificar las relaciones de contraste en mi sitio web?
Verifica las relaciones de contraste cada vez que actualices el diseño de tu sitio web, lances nuevas campañas de marketing o agregues contenido nuevo. Se recomiendan auditorías trimestrales para sitios de comercio electrónico activos para garantizar el cumplimiento continuo a medida que agregas nuevas páginas de productos o banners promocionales.
Orientación adicional
Prueba siempre las relaciones de contraste en condiciones del mundo real: visualiza los colores en dispositivos móviles, bajo luz solar brillante y con diferentes niveles de brillo de pantalla para garantizar la legibilidad. Combina esta herramienta con verificaciones manuales de tamaños de texto, ya que los umbrales de texto grande de WCAG dependen del tamaño de fuente y el peso, no solo de la relación de contraste. Mantén un registro de las combinaciones de colores aprobadas para tu marca para acelerar el trabajo de diseño futuro y mantener estándares de accesibilidad consistentes en todos los materiales comerciales. Para equipos que trabajan con diseñadores externos, comparte los resultados de la relación de contraste directamente desde la herramienta para garantizar que los entregables cumplan con tus requisitos de accesibilidad antes de la aprobación final.