Cómo usarla
- 1Elige el color del texto y el del fondo.
- 2Mira el ratio de contraste y los resultados AA y AAA.
- 3Comprueba cómo se ve el texto de muestra.
- 4Si no cumple, pulsa «Sugerir color» para obtener el más cercano que sí cumple.
Niveles WCAG
El nivel AA exige un ratio de al menos 4,5:1 para texto normal y 3:1 para texto grande (desde unos 24 px, o 18,5 px en negrita). El nivel AAA, más estricto, pide 7:1 y 4,5:1. AA es el estándar al que suelen remitir las normativas de accesibilidad, como la europea, aplicable a webs públicas y a cada vez más servicios privados.
Por qué importa el contraste
Un contraste bajo dificulta la lectura a personas con baja visión o daltonismo, pero también a cualquiera que use el móvil al sol. El texto gris claro sobre blanco es uno de los fallos de accesibilidad más comunes en la web.
Sugerencia de color
Si la combinación no pasa, la herramienta busca el color más parecido al tuyo que cumple, para que mantengas la identidad de la marca sin sacrificar la legibilidad.
Preguntas frecuentes
¿Qué ratio de contraste necesito?
Para cumplir WCAG AA, 4,5:1 en texto normal y 3:1 en texto grande. Es el nivel recomendado para la mayoría de webs.
¿Cómo se calcula el ratio?
Se compara la luminancia relativa de los dos colores con la fórmula de WCAG. El resultado va de 1:1 (sin contraste) a 21:1 (negro sobre blanco).
¿El contraste afecta al SEO?
No directamente, pero mejora la experiencia de usuario y las auditorías de accesibilidad, como la de Lighthouse, lo revisan.
¿No te convencen los resultados?
Habla con Webin Agency sobre webs rápidas y optimizadas para SEO, e-commerce y gestión de Google Ads.