Validar un diseño web
Comprobar los pares de texto y fondo antes de programar evita rehacer la paleta cuando alguien detecta el problema.
Comprobador de contraste
Comprobador de contraste WCAG gratis. Verifica accesibilidad de colores para web. Herramienta esencial para diseñadores.
🔒 Este archivo se procesa en tu navegador. No se sube a ningún servidor.
…
Para qué sirve
El contraste entre un texto y su fondo determina si se puede leer con comodidad. Se mide como una relación numérica entre las luminosidades de ambos colores, que va de 1:1 cuando son idénticos hasta 21:1 en el caso del negro puro sobre blanco puro.
Las normas WCAG, que son la referencia internacional de accesibilidad web, fijan los umbrales. Para texto de tamaño normal, 4.5:1 es el mínimo del nivel AA, que es el que se exige habitualmente y el que recoge la legislación de accesibilidad de muchos países para webs públicas. El nivel AAA, más estricto, pide 7:1.
Esto no es solo cuestión de cumplir una norma. El gris claro sobre blanco que tan elegante queda en la pantalla del diseñador se vuelve ilegible al sol, en un móvil con poco brillo o para cualquier persona con la vista cansada, que son muchísimas más de las que se suele suponer.
Cómo funciona
- Indica el color del texto y el color de fondo que quieres comprobar.
- La herramienta calcula al instante el ratio de contraste entre ambos.
- Comprueba si cumple los niveles AA y AAA de las normas de accesibilidad WCAG.
Cuándo usarlo
Cumplir normativa
Las webs de administraciones públicas y muchos pliegos exigen nivel AA. La comprobación documenta que se cumple.
Textos sobre imagen
Un título sobre una foto necesita comprobarse contra la zona más clara de esa foto, que es donde peor se lee.
Consejos prácticos
- El texto grande y en negrita tiene un umbral más permisivo, 3:1, pero conviene no apurarlo si puede evitarse.
- Los textos secundarios en gris son el fallo más habitual: suelen quedarse por debajo de 4.5:1 sin que nadie lo note.
- Comprueba también los estados de los enlaces y botones, no solo el texto normal.
- Si un par no llega al mínimo, suele bastar con oscurecer el texto en lugar de cambiar el color de fondo.
Preguntas frecuentes
¿Qué ratio necesito para que sea accesible?
Para texto normal, un mínimo de 4.5:1 cumple el nivel AA (el estándar habitual) y 7:1 cumple el nivel AAA, más exigente.
¿Por qué es importante el contraste de color?
Un contraste bajo dificulta la lectura a personas con baja visión y hace tu web menos accesible y más difícil de leer para todo el mundo, especialmente al aire libre o en pantallas de mala calidad.