Diseño · 4 min de lectura ·
Contraste de color y WCAG: cómo hacer que el texto se lea bien
Qué significa una relación de contraste de 4,5:1, qué texto necesita AA o AAA y arreglos rápidos para las combinaciones de colores que más fallan.
Un texto gris claro sobre blanco queda elegante en el archivo de diseño y cuesta leerlo en un móvil al sol, con la vista cansada o con baja visión. Las pautas de accesibilidad WCAG convierten «legible» en un número que se puede comprobar.
La relación de contraste
El contraste es una relación de 1:1 (el mismo color) a 21:1 (negro sobre blanco). Se basa en la luminancia relativa, lo claro que parece cada color al ojo, donde el verde cuenta más y el azul menos. Por eso un texto amarillo sobre blanco casi no se ve y el azul sobre blanco se lee bien.
Los umbrales
Texto normal Texto grande
AA (mínimo) 4,5:1 3:1
AAA (reforzado) 7:1 4,5:1
Texto grande = al menos 24px, o 18,66px en negritaAA es el nivel al que remiten la mayoría de las leyes y políticas de accesibilidad, así que tómalo como mínimo. AAA merece la pena en textos largos de lectura. Los iconos, los bordes de los campos y los indicadores de foco que transmiten información necesitan al menos 3:1 según WCAG 2.1.
Combinaciones que suelen fallar
Texto gris de los placeholders, texto blanco sobre colores de marca vivos como naranja, amarillo o verde claro, y texto sobre fotos. Los márgenes pueden ser mínimos: #777777 sobre blanco da unos 4,48:1, justo por debajo de AA, mientras que #767676 da unos 4,54:1 y aprueba.
Arreglos rápidos
Oscurece el texto o el fondo uno o dos tonos en lugar de cambiar el matiz; pequeños cambios de luminosidad mueven mucho la relación. Haz grandes y en negrita las etiquetas de los botones de colores vivos, o usa texto oscuro en vez de blanco. Sobre fotos, pon una capa oscura detrás del texto.
El contraste no es la única regla de color
WCAG también dice que el color no puede ser la única forma de transmitir información. Un campo de formulario marcado como erróneo solo con un borde rojo, o un gráfico que distingue sus líneas solo por el color, falla a las personas con daltonismo, aproximadamente 1 de cada 12 hombres. Añade un icono, una etiqueta de texto, un patrón o un estilo de línea distinto.
Modo oscuro
Las mismas proporciones se aplican a fondos oscuros. El blanco puro sobre negro puro llega a 21:1, pero puede resultar duro y hacer que las letras parezcan brillar para algunos lectores; un gris claro sobre un gris muy oscuro sigue superando AA con facilidad y es más cómodo para leer textos largos. Revisa ambos temas, porque una pareja que pasa en modo claro a menudo falla al invertir los colores.
Texto sobre imágenes y degradados
Sobre una foto o un degradado, el fondo cambia detrás de cada letra. Mide el contraste con la parte más clara del fondo que queda detrás del texto, no con la media. Una capa oscura semitransparente o una franja sólida detrás del texto hacen que el resultado sea predecible.
Lo que viene
El borrador de WCAG 3 explora un nuevo método de contraste llamado APCA, que tiene en cuenta con más precisión el tamaño y el grosor de la letra. Todavía es un borrador: las leyes y auditorías actuales se refieren a WCAG 2.1 y 2.2, así que los umbrales de 4,5:1 y 3:1 siguen siendo los que hay que cumplir.
Comprueba una combinación
El comprobador de contraste de color de 4Dev muestra la relación para cualquier color de texto y de fondo, con una vista previa en vivo y un aprobado o suspenso para AA y AAA, en texto normal y grande. El cálculo usa la fórmula de WCAG 2 y se hace en tu navegador.