Verificador de contraste WCAG
Comprueba el ratio de contraste entre un color de texto y un color de fondo según los umbrales de accesibilidad WCAG, antes de usarlos en tu sitio.
Ejemplo de título
Este es un ejemplo de párrafo de texto usando el color de texto y el color de fondo elegidos arriba, para valorar visualmente la legibilidad además de la puntuación WCAG.
Cómo funciona
Las recomendaciones WCAG definen ratios de contraste mínimos entre el texto y su fondo para garantizar que un sitio siga siendo legible para personas con baja visión o en condiciones de visualización difíciles (pantalla poco luminosa, reflejos). Antes de validar una combinación de colores elegida en Figma o una guía de estilo, esta herramienta calcula el ratio real entre los dos colores e indica si cumple los umbrales AA (nivel mínimo recomendado) y AAA (nivel reforzado).
¿Cuál es la diferencia entre «texto normal» y «texto grande»?
El umbral de contraste exigido depende del tamaño del texto: un texto grande (a partir de unos 18pt, o 14pt en negrita) sigue siendo legible con un contraste menor que un texto de tamaño normal, ya que las formas de las letras son más grandes y fáciles de distinguir.
¿Debo apuntar a AA o AAA?
El nivel AA es el estándar generalmente recomendado y suficiente para la mayoría de sitios web (y a menudo una obligación legal según la jurisdicción). El nivel AAA es más estricto y recomendado para contenido donde la accesibilidad es prioritaria, pero a veces es difícil de alcanzar con ciertas paletas de marca sin modificarlas notablemente.
Procesamiento 100% local: el cálculo del ratio de contraste se realiza directamente en tu navegador mediante WebAssembly, sin ninguna llamada a un servidor externo.