Texto legible sobre imágenes: relación de contraste y reglas

Un texto sobre una imagen es legible cuando la diferencia de luminosidad entre el color de sus letras y el fondo que tienen justo detrás es lo bastante grande. Esa diferencia se mide con la relación de contraste. Las pautas de accesibilidad web, WCAG, recomiendan al menos 4,5:1 para el texto normal y al menos 3:1 para el texto grande. Lo difícil sobre una imagen es que el fondo no es de un solo color, así que la relación debe juzgarse frente a la zona más complicada que hay bajo el texto.

Este artículo explica cómo se calcula la relación de contraste, qué significan los umbrales, cómo medir sobre un fondo variado, qué técnicas mejoran la legibilidad y qué errores son frecuentes. En la última sección encontrará cómo aplica la misma medida Design Studio de Yeşilçam Studios.

¿Qué es la relación de contraste y cómo se calcula?

La relación de contraste de WCAG se basa en la luminancia relativa de dos colores. La luminancia relativa expresa lo luminosos que le parecen al ojo los componentes rojo, verde y azul de un color, de 0 (negro) a 1 (blanco). Como el ojo es más sensible al verde y menos al azul, los componentes no pesan lo mismo: el verde aporta alrededor del 72 por ciento, el rojo el 21 por ciento y el azul el 7 por ciento.

La relación se calcula así: se suma 0,05 a la luminancia del color más claro, se suma 0,05 a la luminancia del color más oscuro y se divide el primero entre el segundo. El resultado va de 1:1 (el mismo color) a 21:1 (blanco sobre negro). El tono por sí solo no crea contraste; un rojo y un verde de la misma luminancia pueden verse vivos uno junto al otro, pero son difíciles de leer como texto.

¿Qué significan los umbrales 4,5:1 y 3:1?

Caso	Relación mínima (AA)	Nivel más estricto (AAA)
Texto normal	4,5:1	7:1
Texto grande (unos 18 puntos o más, o 14 puntos en negrita)	3:1	4,5:1
Componentes de interfaz y gráficos con significado	3:1	No definido

Los umbrales se escribieron para la web, pero su lógica vale también para la impresión y las imágenes de redes sociales. El texto grande se lee con una relación más baja porque las formas de las letras son amplias. El texto corrido pequeño, las fechas, las direcciones y las notas al pie necesitan una relación más alta. Los carteles se ven a distancia y las imágenes para redes, en la pequeña pantalla de un móvil, a menudo al sol, así que mantenerse por encima de los umbrales marca una diferencia real en condiciones reales.

¿Cómo se mide el contraste sobre un fondo variado?

Sobre un fondo de color plano, la medición es un solo número. Sobre una foto o una ilustración, bajo el texto conviven zonas claras y oscuras. Fijarse en el color medio engaña: si el 80 por ciento de un titular está sobre un cielo oscuro y el 20 por ciento sobre una nube brillante, la media parece correcta, pero las letras que caen sobre la nube desaparecen.

1. Identifique la zona que ocupa el texto y el entorno inmediato de las letras; ese es el fondo que afecta a la lectura.
2. Para cada píxel de fondo de esa zona, calcule la relación de contraste con el color del texto.
3. Fíjese en la parte más débil, no en la media. Un método práctico es tomar el límite del 10 por ciento más bajo de las relaciones.
4. Compare ese valor con el umbral que corresponde al tipo de texto: 3:1 para titulares y texto grande, 4,5:1 para el resto.
5. Si no llega, aplique una de las técnicas siguientes y vuelva a medir.

¿Por qué cambian las condiciones de lectura en carteles, pantallas y redes sociales?

La misma relación da resultados distintos según las condiciones de lectura. Medir el contraste es un punto de partida; también hay que tener en cuenta dónde y cómo se verá el diseño.

• Carteles y roll-ups. Se ven a distancia, a menudo al pasar. El titular debe leerse en pocos segundos, así que un tamaño grande, un peso tipográfico fuerte y un fondo tranquilo importan tanto como la propia relación.
• Pantallas de móvil. Las imágenes para redes aparecen como un pequeño cuadrado en el feed, a menudo con el brillo bajado o con la pantalla al sol. Un subtítulo que se lee bien a pantalla completa puede desaparecer en la pequeña vista previa del feed.
• Material impreso. El papel no emite luz; refleja la luz del entorno. En papel mate los tonos oscuros se aclaran un poco y los colores se apagan; una relación que pasa justo en pantalla puede quedarse corta impresa.

Un hábito práctico: revise el diseño a su tamaño final y en sus condiciones finales. Mire una imagen para redes reducida en un móvil, un cartel reducido en pantalla como si se viera a distancia y un trabajo de impresión con la vista previa de impresión.

¿Qué técnicas mejoran la legibilidad?

• Elección del color. Lo primero que conviene probar es cambiar el color del texto: una versión muy clara o muy oscura del mismo tono, otro color de su paleta, blanco o un casi negro. Es la vía que menos altera el carácter del diseño.
• Pasar a una zona tranquila. Una parte plana y con poco detalle de la imagen (cielo, pared, suelo) es un lugar natural para el texto. Dejar ese espacio libre al construir la composición da el resultado más limpio.
• Franja o caja de fondo. Poner una franja sólida o semitransparente detrás del texto hace que la relación no dependa del fondo. Queda natural en estilos gráficos planos como el diseño suizo.
• Contorno (trazo). Un contorno fino en un color contrastado alrededor de las letras separa el texto de un fondo recargado. En estilos como el arte pop y el cómic forma parte de la estética.
• Sombra y velo. Una sombra suave, o un degradado que oscurece la imagen hacia la zona del texto (un velo), aumenta el contraste. Como implica transparencia en la impresión, puede influir en la elección del estándar PDF.
• Tipografía y tamaño. Un peso más fuerte y un tamaño mayor se leen mejor con la misma relación. Las tipografías finas son las primeras en desaparecer sobre las imágenes.

¿Cuáles son los errores más frecuentes?

• Decidir por el color medio. La parte más clara o más oscura del fondo hace invisible parte del texto.
• Dejar que el texto pase por encima del producto o del logotipo. No se puede leer ni el producto ni el texto. Texto, producto y logotipo deben ocupar zonas separadas.
• Olvidar la pérdida de color en la impresión. Una relación que pasa justo en pantalla puede quedar por debajo del umbral cuando los colores se apagan en CMYK; los detalles, en el artículo sobre CMYK y RGB.
• Confiar solo en el tono. Verde sobre rojo o morado sobre azul, con una luminancia parecida, resulta ilegible para lectores con alteraciones de la visión del color.
• Aplicar la misma solución a todos los textos. Una sombra que basta para un titular grande no salvará una pequeña línea de dirección.

¿Cómo se mide y se corrige la legibilidad en Yeşilçam Studios?

Design Studio no pinta los textos en la imagen; cada texto es una capa independiente y editable. Eso permite medir el fondo real que hay bajo el texto. La medida es la misma que se describe en este artículo: toma el 10 por ciento más bajo de las relaciones de contraste de los píxeles que hay bajo el texto y en un anillo alrededor de sus letras. El umbral es 3:1 para los titulares y los textos grandes en relación con la altura del lienzo, y 4,5:1 para el resto.

Cuando Sam prepara un diseño, los textos se comprueban con esta medida frente al fondo real; el texto que no llega se mueve, cambia de color o recibe un contorno o una franja acordes con el estilo. También se comprueba el texto que pasa por encima de un producto o de un logotipo. Al seleccionar una capa de texto en el editor, el indicador «Legibilidad» muestra la relación medida: «Se lee bien» si basta y, si no, «Contraste bajo» con la relación mínima necesaria. En ese caso aparece el botón «Hacer legible»; primero busca el color más cercano al actual que supere el umbral (una versión más clara u oscura del mismo tono, colores de las paletas del diseño y de la marca, blanco, un casi negro); si ninguno basta, añade al texto un contorno contrastado. También puede ajustar el contorno usted mismo con los campos «Contorno del texto» y «Grosor del contorno».

Al exportar, el cuadro le avisa, indicando cuántas, si alguna capa de texto no destaca lo suficiente del fondo; el aviso no bloquea la descarga. El indicador de legibilidad y «Hacer legible» del editor no cuestan tokens adicionales. Para un recorrido pantalla por pantalla, consulte la guía del editor y la legibilidad; para su primer diseño, consulte la guía para empezar con Design Studio.

Preguntas frecuentes

¿WCAG no es solo para la web? Las pautas se escribieron para contenido web, pero la relación de contraste es un método general para medir la diferencia de luminancia entre colores. Es una buena referencia para carteles, cartas de menú e imágenes para redes con la misma lógica.

¿Basta 3:1 para un titular? Para titulares grandes y en negrita, 3:1 es el nivel mínimo de WCAG. Para un cartel que se lee a distancia o una pantalla vista al sol, una relación más alta es más segura.

¿Por qué medir el 10 por ciento más bajo y no la media? El lector tropieza con la parte más débil del texto. La media oculta las letras que se pierden sobre una nube brillante o una sombra oscura; la franja más baja detecta ese riesgo.

¿Estropeará «Hacer legible» los colores del diseño? Primero elige el color más cercano al actual que supere el umbral, de modo que el cambio sea el menor posible. Si no le gusta el resultado, deshágalo y ajuste a mano el color o el contorno.

¿Da problemas el contorno al imprimir? No. El contorno se dibuja como vector junto con el texto y se mantiene nítido en la salida PDF/X-4, SVG y EPS.