El texto gris claro sobre un fondo blanco puede parecer elegante y minimalista a simple vista, y ser completamente ilegible para usuarios con discapacidad visual, luz solar intensa en la pantalla o simplemente fatiga visual al final de un día laboral. El contraste de color es uno de los criterios más "técnicos" de accesibilidad (hay números exactos que cumplir), pero también es uno de los más fáciles de probar y corregir de antemano.
En resumen: lo que cubre esta guía
Qué proporciones requiere WCAG
WCAG define relaciones de contraste entre 1:1 y 21:1. Para el texto normal, el criterio 1.4.3 exige en el nivel AA una relación mínima de 4,5:1 respecto al fondo; el nivel AAA exige 7:1. Existen excepciones para texto grande y determinados contenidos decorativos o inactivos. Las obligaciones legales dependen del ámbito aplicable.
Por qué se permite menos contraste en texto grande
El texto grande sigue siendo legible incluso con un contraste más bajo, por lo que WCAG establece un umbral más fácil: 3:1 en el nivel AA (en lugar de 4,5:1) y 4,5:1 en el nivel AAA (en lugar de 7:1). "Texto grande" se define como texto de 18 puntos o más (aproximadamente 24 px), o 14 puntos o más (aproximadamente 18,7 px) si está en negrita. Los títulos grandes, por ejemplo, pueden "permitir" un contraste ligeramente menor que el de un párrafo normal y aun así cumplir con el requisito.
Cómo comprobar una relación de contraste en la práctica
No es necesario calcularlo manualmente: herramientas gratuitas como WebAIM Contrast Checker le permiten ingresar el texto y los códigos de color de fondo y obtener inmediatamente la proporción exacta y una puntuación de aprobado/reprobado para cada nivel. Vale la pena comprobar no sólo el texto sobre un fondo sólido, sino también el texto sobre imágenes de fondo o degradados, donde el contraste puede variar entre diferentes áreas de la misma imagen, por lo que es mejor probar el punto más "problemático".
💡 Consejo práctico
El criterio WCAG 1.4.11 exige generalmente una relación de 3:1 con los colores adyacentes para la información visual necesaria para identificar los componentes de interfaz y sus estados. Esto no obliga automáticamente a que todos los bordes de botón alcancen ese contraste; los bordes decorativos o innecesarios para la identificación se evalúan de otra forma.
Cómo elegir una paleta de colores accesible por adelantado
El método más eficaz es comprobar el contraste en la etapa de diseño de la plantilla, no en cada documento por separado. Al elegir los colores de la marca para los títulos, el cuerpo del texto y los enlaces, vale la pena confirmar de antemano que cada combinación de texto y fondo que utilice cumpla con al menos 4,5:1. De esta manera, cada documento nuevo creado a partir de la plantilla "hereda" automáticamente el contraste adecuado, en lugar de verificar cada documento por separado una vez que ya se ha escrito.
Probar la demostración
La prueba de este sitio es actualmente una simulación con datos de ejemplo. No realiza una auditoría real de su URL ni de sus archivos PDF. Está prevista la conexión con el motor de auditoría.
Ver la demostración