Texto sobre imagen: siete formas de que las palabras se lean

El texto sobre imagen se lee cuando la zona justo detrás de las letras es tranquila y claramente más clara o más oscura que el texto. Siete técnicas te llevan ahí: recortar para que las palabras caigan en una zona tranquila, añadir un scrim, teñir la foto, desenfocarla, enmarcar el texto, elegir la tinta por luminosidad y colocar las palabras donde la mirada ya descansa. Los buenos diseños suelen combinar dos, y ninguno necesita una caja sólida sobre la foto.

El mismo problema aparece con los degradados y los fondos con patrones; texto sobre un degradado y texto sobre fondos recargados cubren esos casos. Esta guía se centra en las fotos.

Por qué el texto desaparece sobre las fotos

Dos cosas dificultan la lectura de las letras sobre una imagen: el bajo contraste y el detalle. El bajo contraste significa que las letras están demasiado cerca en luminosidad de lo que tienen detrás, como un texto blanco sobre un cielo luminoso. El detalle significa que el fondo tiene bordes y texturas a la misma escala que las letras, como hojas, multitudes o tela, así que la vista no consigue separar unas de otras. Cada técnica de las que siguen reduce uno de los dos problemas, o los dos.

Siete técnicas para que el texto sobre imágenes se lea

1. Recorta hacia una zona tranquila

Antes de añadir nada, mueve la foto. La mayoría de las fotos tienen una zona tranquila: el cielo, una pared, el agua, una sombra, un fondo desenfocado. Recorta o recoloca para que las palabras caigan ahí. Es la única técnica que no añade nada, y por eso es la que se ve más limpia. Cuando hagas fotos para un diseño, deja ese espacio a propósito.

2. Añade un scrim

Un scrim es un degradado suave de oscuro a transparente, colocado solo donde va el texto, normalmente en la parte inferior o superior de la imagen. Oscurece la zona detrás de las palabras y se desvanece antes de llegar al sujeto, así que la mayor parte de la foto parece intacta. Es la técnica estándar en tarjetas, imágenes de cabecera y miniaturas de vídeo.

.photo-card {
  position: relative;
  isolation: isolate;
}

.photo-card img {
  position: relative;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim: dark at the bottom, clear by 60% up. */
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.72) 0%,
    rgb(0 0 0 / 0.38) 30%,
    rgb(0 0 0 / 0) 60%
  );
}

.photo-card h2 {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 1.5rem;
  color: #fff;
  text-wrap: balance;
}

3. Tiñe la foto: duotono o lavado

Llevar una foto a dos colores (un duotono) o ponerle encima un lavado de un solo color comprime su rango de luminosidad. La foto se vuelve más tranquila y homogénea, y un texto en una tinta que contraste se lee en cualquier parte. También lleva las fotos a los colores de tu marca, algo útil cuando las imágenes vienen de muchas fuentes.

4. Desenfoca detrás de las palabras

El desenfoque elimina el detalle fino que pelea con las letras y conserva el color y la luz de la foto. Desenfoca toda la imagen para un fondo suave, o solo una franja detrás del texto. Usa suficiente desenfoque para que desaparezcan los bordes; un desenfoque leve solo parece un error. Fondos desenfocados cuenta cuánto usar.

5. Enmarca el texto

A veces la respuesta correcta es un espacio despejado: una franja de color sólido, un panel o una composición dividida con la foto a un lado y las palabras al otro. Es honesto y siempre se lee. Saca el color del marco de la foto para que forme parte de la imagen en lugar de taparla.

6. Elige la tinta por luminosidad

Decide entre texto claro u oscuro según la luminosidad de la zona que tiene detrás, no según el color que te guste. Luego compruébalo: busca al menos 4,5:1 para el texto normal y 3:1 para el texto grande, los niveles de contraste de las WCAG. Toma muestras de los píxeles más claros y más oscuros detrás de las letras y prueba ambos con una herramienta como el comprobador de contraste de WebAIM. Una sombra suave, como text-shadow: 0 1px 12px rgb(0 0 0 / 0.45), puede ayudar al texto pequeño, pero no puede salvar un mal recorte.

7. Coloca las palabras donde descansa la mirada

Pon el texto donde la foto lleva la mirada: a lo largo de un horizonte, en el espacio hacia el que mira una persona o en el lado opuesto al sujeto. Evita poner palabras sobre caras, manos o el producto, y mantenlas lejos de los bordes que las plataformas tapan con botones o recortan en algunas pantallas.

Qué técnica usar con cada foto

Mantener coherente el texto sobre imágenes en toda una marca

Cuando varias personas hacen posts, elige una o dos técnicas y déjalas por escrito: por ejemplo, un scrim inferior con una intensidad fija para cada post con foto, y un duotono en los colores de la marca para las frases. En el estudio de Gradiently, las fotos se pueden recortar y teñir con los colores del Mark en monocromo, duotono o lavado, así que los posts con foto quedan en la misma familia que el resto de tus diseños. Anota la regla en tu guía de estilo de marca.