Verificador de Contraste WCAG – Supera las Pruebas AA y AAA

Prueba la herramienta gratuita abajo. Funciona en tu navegador, sin registro y sin descarga.

Qué es el contraste y por qué importa

Un texto solo se lee bien cuando destaca lo suficiente sobre su fondo. Las Pautas de Accesibilidad para el Contenido Web, conocidas como WCAG, fijan relaciones de contraste mínimas para el texto: 4,5 a 1 para texto normal en nivel AA, 3 a 1 para texto grande en nivel AA, y relaciones más estrictas de 7 a 1 y 4,5 a 1 en nivel AAA. Este verificador mide la relación para cualquier pareja de colores y dice al instante qué niveles pasa.

El cálculo usa la luminancia relativa, que mide lo brillante que parece un color al ojo humano, no solo sus números de rojo, verde y azul. La herramienta lo calcula con la biblioteca tinycolor en tu navegador, y además muestra tu texto con los dos colores para que puedas juzgarlo con tus propios ojos.

Cómo se usa

Elige un color de texto y un color de fondo con los selectores de color, o escribe valores hexadecimales directamente. La relación se actualiza al cambiar cualquier color, y los cuatro resultados de aprobado o suspenso se actualizan con ella. Pulsa el botón de intercambio para invertir la pareja y revisar también la combinación al revés.

Prueba primero texto negro sobre blanco: la relación es de 21 a 1, la más alta posible, y pasa todos los niveles. Luego prueba un gris medio sobre blanco y mira cómo la relación cae por debajo del listón AA. Esa caída explica por qué muchos diseños de texto gris que a simple vista parecen buenos suspenden las revisiones de accesibilidad.

A quién afecta un contraste bajo

El contraste bajo afecta a más gente de lo que muchos diseñadores esperan. Afecta a lectores mayores, a personas con baja visión y a cualquiera que lea en un móvil bajo el sol. También afecta a todo lector cuando está cansado o lee rápido. Un buen contraste no es solo una regla de accesibilidad; es buen diseño sin más.

Muchas webs suspenden las revisiones de contraste en textos secundarios, como pies de foto, notas al pie y textos de ejemplo en formularios. Revisar esos textos pequeños con esta herramienta es una mejora rápida, porque corregir un color suele ser un cambio de una sola línea.

Elegir colores que pasen

Para el texto del cuerpo, busca al menos el nivel AA normal, es decir, una relación de 4,5 a 1 o más. El texto oscuro sobre fondo claro es el camino más seguro. Si quieres un texto de color, oscúrecelo hasta que pase, en lugar de aclarar el fondo. Para títulos grandes, el mínimo AA grande es de 3 a 1, pero pasar el AA normal es mejor cuando se puede.

Prueba cada pareja de texto y fondo que uses de verdad, incluidos botones, enlaces y texto sobre fotos. Una pareja que pasa sobre blanco puede suspender sobre un fondo con tinte.

Preguntas frecuentes

¿Qué relación necesito? Para texto normal, 4,5 a 1 para AA y 7 a 1 para AAA. Para texto grande, 3 a 1 para AA y 4,5 a 1 para AAA.

¿Qué cuenta como texto grande? En WCAG, el texto grande es de al menos 18 puntos, o 14 puntos en negrita.

¿Mi elección de color se envía a un servidor? No. La revisión se hace en tu navegador.

¿Pasar el contraste significa que mi web es accesible? No, pero es una de las revisiones más importantes y más fáciles de pasar.

Una auditoría rápida de contraste para tu web

Elige los cinco estilos de texto que tu web usa más: texto del cuerpo, títulos, enlaces, pies de foto y etiquetas de botones. Para cada uno, anota su color de texto y su color de fondo, luego pasa la pareja por el verificador y apunta la relación y los cuatro resultados. La mayoría de las webs pasan el texto del cuerpo con facilidad y suspenden en algún lugar sorprendente, muchas veces un pie de foto gris claro sobre blanco o un texto blanco sobre un color de marca pálido. Corrige los suspensos oscureciendo el texto paso a paso hasta que pase, y prueba otra vez tras cada paso, porque muchas veces basta un cambio pequeño. No confíes en la negrita para salvar una pareja que suspende: la negrita ayuda a leer, pero el listón WCAG para texto normal sigue igual salvo que el texto sea de verdad grande. Registra las parejas finales en tu guía de estilo, con sus relaciones al lado, para que futuros diseñadores mantengan las combinaciones que pasan en lugar de inventar otras nuevas que suspenden. Una auditoría de una hora como esta corrige la queja de accesibilidad más común de la web, y te deja un conjunto documentado de colores que puedes defender.

Repite la auditoría cada vez que cambien los colores de tu marca. Una paleta de marca nueva es el momento más habitual en que parejas que pasaban se rompen sin ruido, porque nadie vuelve a revisar textos que antes pasaban.

También en inglés

Esta herramienta también está disponible en inglés: WCAG Contrast Ratio Checker – Pass AA and AAA Tests.