Fondo para texto: qué hace que las palabras se lean bien

Un buen fondo para texto tiene tres cosas en la zona que queda detrás de las palabras: un contraste fuerte con las letras, muy poco detalle fino y una gama de tonos uniforme en lugar de manchas claras y oscuras. El color importa mucho menos de lo que se cree. Un degradado violeta puede sostener el texto de maravilla y una foto gris puede arruinarlo, según esas tres propiedades. Esta guía explica cómo evaluar cualquier fondo, ya sea foto, degradado o textura, y qué hacer cuando falla.

Contraste: la primera propiedad

El contraste es la diferencia de luminosidad entre las letras y lo que tienen justo detrás. Las Pautas de Accesibilidad para el Contenido Web fijan el listón medible: una relación de al menos 4,5:1 para el texto normal y de 3:1 para el texto grande. El comprobador de contraste de WebAIM la calcula para dos colores cualesquiera.

Sobre un color plano basta con una comprobación. Sobre un degradado o una foto, el fondo cambia bajo cada palabra, así que comprueba el punto más claro detrás del texto claro y el punto más oscuro detrás del texto oscuro. Ahí es donde el texto falla primero. Contraste de color y accesibilidad profundiza en los estándares.

Detalle: por qué cuesta leer sobre fondos recargados

El contraste es necesario, pero no suficiente. Un fondo lleno de detalle del mismo tamaño que las letras dificulta la lectura aunque la relación apruebe, porque el ojo no consigue separar la forma de las letras de las formas que tienen detrás. Hojas, grava, multitudes, rayas finas y patrones pequeños son los peores. Las formas grandes y suaves son las mejores: un cielo, una pared desenfocada, un degradado liso.

La textura no es un problema cuando su grano es mucho más pequeño que las letras, como el grano de película o la textura del papel. Lo es cuando sus rasgos se acercan al tamaño de los trazos de tu tipografía. Si te encanta un patrón, amplíalo hasta que sus formas sean claramente mayores que las letras, o mantenlo lejos de las palabras. Texto sobre fondos recargados trata los patrones con más detalle y texto legible sobre fotos trata las imágenes.

Gama de tonos: manchas claras y oscuras bajo una línea

La tercera propiedad es la que pilla a todo el mundo. Si una sola línea de texto cruza una mancha clara y otra oscura, ningún color de texto puede funcionar: el blanco desaparece en la parte clara y el negro en la oscura. Un buen fondo para texto mantiene una gama de tonos estrecha bajo cada línea, todo claro o todo oscuro.

Cómo probar cualquier fondo para texto

1. 1

   Entrecierra los ojos

   Cierra los ojos a medias. El detalle se desvanece y solo queda el tono. Si las palabras se disuelven en el fondo, el contraste es demasiado bajo.

2. 2

   Desenfócalo

   Aplica un desenfoque fuerte a una copia del fondo solo. Lo que quede bajo la zona del texto es el tono sobre el que realmente están las letras.

3. 3

   Míralo en escala de grises

   El color puede hacerte creer que el contraste está bien. La escala de grises muestra solo la luminosidad, que es de lo que depende la legibilidad.

4. 4

   Comprueba los extremos

   Mide el contraste en los puntos más claro y más oscuro detrás de las palabras, no la media.

5. 5

   Míralo en un móvil

   Con el brazo extendido, a la luz del día y al tamaño al que la gente lo verá de verdad.

Cómo arreglar un fondo que pelea con el texto

La mayoría de los arreglos añaden algo: una caja, una sombra, una franja oscura. Funcionan, pero cada uno es un parche que hace que el diseño parezca rescatado. Prueba los arreglos en este orden, del menos visible al más visible.

En la web, una superposición de degradado suave en un lado de la imagen principal es una versión digna del quinto arreglo: oscurece solo la zona bajo las palabras y deja el resto de la imagen intacto.

.hero {
  min-height: 70vh;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(15 12 30 / 0.85) 0%, rgb(15 12 30 / 0.45) 45%, rgb(15 12 30 / 0) 70%),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
}

Gradiently integra los arreglos menos visibles en el propio fondo. Un Mark sabe dónde están tus palabras: su zona más tranquila y con mejor contraste se coloca detrás del texto, los colores cerca de las letras se oscurecen o se aclaran, el detalle recargado se relaja y Tinta automática elige texto claro u oscuro para cada línea a partir de la paleta del Mark. No hay cajas, sombras ni desenfoques, y tú eliges con qué intensidad responde. Cómo funciona Tinta automática explica los detalles y texto sobre un degradado da el método manual para cualquier degradado.