Verificador de Contraste WCAG

Qué son los estándares de contraste WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) fijan unos ratios de contraste mínimos para que el texto sea legible para personas con discapacidad visual. No es un capricho burocrático: alrededor de 1 de cada 12 hombres y 1 de cada 200 mujeres tienen algún tipo de deficiencia en la percepción del color. Y hay muchas más personas con baja visión para quienes un texto con poco contraste es directamente ilegible.

Cómo funcionan los ratios de contraste

El ratio de contraste mide la diferencia de luminosidad entre dos colores. La escala va de 1:1 (ningún contraste, mismo color) a 21:1 (máximo contraste, negro sobre blanco puro). Cuanto más alto el número, más fácil de leer.

Los niveles WCAG, explicados

Nivel AA (el estándar habitual)

Lo que la mayoría de los sitios tienen que cumplir. Requisitos:

• Texto normal: ratio mínimo de 4,5:1
• Texto grande (18pt o más, o 14pt en negrita): ratio mínimo de 3:1

Nivel AAA (el nivel reforzado)

Más exigente, para máxima accesibilidad:

• Texto normal: ratio mínimo de 7:1
• Texto grande: ratio mínimo de 4,5:1

Errores habituales que este verificador detecta

Texto gris claro sobre fondo blanco

A los diseñadores les encanta el gris suave por la estética que da, pero #999999 sobre blanco suspende el nivel AA. Para aprobar necesitas al menos #767676. Para el cuerpo del texto, cuanto más oscuro, mejor.

Colores corporativos que no funcionan como texto

El amarillo vibrante o el verde lima de tu marca pueden quedar estupendos en el logo, pero como texto sobre fondo blanco resultan ilegibles. Es uno de los fallos más comunes que nadie detecta hasta que alguien lo señala.

Texto encima de imágenes

El texto blanco sobre una foto pierde contraste justo en las zonas más claras. Esta herramienta te ayuda a escoger un color de capa superpuesta que mantenga la legibilidad en cualquier parte de la imagen.

Texto de marcador en formularios

Los placeholders suelen ser grises muy suaves. Aunque hay debate sobre si WCAG los cubre explícitamente, hacerlos legibles siempre es buena práctica de diseño.

Cómo arreglar una combinación que falla

Si tus colores no superan la prueba, tienes varias salidas:

• Oscurece el texto claro — un par de puntos de luminosidad pueden marcar la diferencia
• Aclara el fondo oscuro — lo mismo aplicado al fondo
• Aumenta el tamaño de fuente — el texto grande tiene requisitos más bajos
• Añade una capa de contraste — para texto sobre imágenes, un fondo semitransparente resuelve el problema sin cambiar el diseño

Obligaciones legales

Varios países exigen el cumplimiento de WCAG de forma explícita:

• EE. UU. — la ADA y la Sección 508 hacen referencia directa a WCAG
• UE — la norma EN 301 549 exige WCAG 2.1 AA
• Reino Unido — los sitios del sector público deben cumplir WCAG 2.1 AA

Aunque no haya ley que te obligue, cumplir con WCAG reduce tu exposición legal y hace tu sitio usable para muchísima más gente. Tiene sentido en todos los frentes.