WCAG Contrast Ratio Calculator
Check if your color combinations meet accessibility standards for text and UI components
Cómo usar esta herramienta
Introduce tus colores de primer plano (texto/icono) y de fondo usando los selectores de color o escribiendo valores hexadecimales (p. ej., #FF5733). Selecciona el tipo de elemento que estás probando: texto normal, texto grande o componentes de interfaz. Haz clic en Calcular para ver la relación de contraste y el cumplimiento de WCAG para cada estándar. Usa Restablecer para empezar de nuevo con los colores predeterminados. La comparación visual muestra cómo se ven tus colores juntos.
Fórmula y lógica
La herramienta calcula la luminancia relativa de cada color usando la fórmula del espacio de color sRGB: cada canal RGB se convierte a espacio lineal (si ≤ 0.03928, se divide por 12.92; de lo contrario, se aplica ((c+0.055)/1.055)^2.4). Luminancia = 0.2126×R + 0.7152×G + 0.0722×B. Relación de contraste = (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia más clara y L2 la más oscura. Esto sigue las especificaciones de WCAG 2.1.
Notas prácticas para negocios
Para sitios de comercio electrónico, asegúrate de que las descripciones de productos, precios y botones de llamada a la acción cumplan al menos con WCAG AA para texto normal (4.5:1) para evitar riesgos legales y mejorar la conversión. Si tus colores de marca no cumplen, ajusta ligeramente el color más claro; a menudo, un pequeño aumento de brillo puede lograr el cumplimiento sin un rediseño drástico. Los componentes de interfaz (botones, iconos, campos de formulario) solo requieren 3:1, lo que ofrece más flexibilidad. Prueba las combinaciones de colores tanto en modo claro como oscuro si tu sitio lo admite. Recuerda que los requisitos de contraste también se aplican al texto sobre imágenes: usa superposiciones o sombras de texto para mantener la legibilidad.
Por qué esta herramienta es útil
El cumplimiento de accesibilidad es cada vez más un requisito legal para las empresas, con un aumento de demandas. Esta herramienta te ayuda a auditar tu sitio de forma proactiva, evitando costosas correcciones y daños a la reputación. Más allá del cumplimiento, un buen contraste mejora la legibilidad para todos los usuarios, especialmente en entornos brillantes o para personas con baja visión, lo que impacta directamente en la participación del usuario y las ventas. Para comerciantes y emprendedores, es un paso de validación rápido antes de lanzar nuevas páginas o campañas.
Preguntas frecuentes
¿Cuál es la diferencia entre el cumplimiento AA y AAA?
AA es el estándar legal mínimo en muchas jurisdicciones (4.5:1 para texto normal). AAA es un objetivo más alto (7:1 para texto normal) que mejora aún más la accesibilidad, pero es más difícil de lograr con colores de marca vibrantes. La mayoría de las empresas buscan AA en el contenido principal y AAA cuando es posible.
¿Se aplican estas relaciones a logotipos y elementos decorativos?
No. Los requisitos de contraste de WCAG se aplican a texto y componentes de interfaz que transmiten información. Los logotipos, imágenes puramente decorativas e imágenes de fondo grandes están exentos. Sin embargo, si hay texto incrustado en una imagen, ese texto debe cumplir con las relaciones de contraste.
¿Cómo corrijo una combinación de colores que no cumple?
Ajusta el color más claro para que sea más oscuro o el más oscuro para que sea más claro. Aumenta la diferencia en luminancia. Herramientas como esta te ayudan a iterar rápidamente. Para componentes de interfaz, considera añadir sombras sutiles o contornos para mejorar la separación sin cambiar el color principal de la marca.
Orientación adicional
Prueba regularmente la paleta de colores de tu sitio, especialmente después de rediseños. Usa esta calculadora junto con simuladores de daltonismo (como Coblis) para asegurarte de que tus diseños funcionen para usuarios con discapacidades visuales. Para comercio electrónico, presta especial atención a las pantallas de precios, mensajes de error y etiquetas de campos de formulario: son críticos para la conversión y la accesibilidad. Documenta tu paleta de colores con sus relaciones de contraste para referencia futura. Ten en cuenta que WCAG 2.2 (la más reciente) mantiene los mismos requisitos de contraste, por lo que esta herramienta sigue siendo actual.