Texto sobre fondo degradado: cómo hacer que siempre se lea

Para poner texto sobre un fondo degradado y que siempre se lea, coloca las palabras sobre el tramo más tranquilo del degradado, elige tinta clara u oscura según la luminosidad del color que tienen justo detrás, mantén el texto pequeño lejos de los tonos medios y mide el contraste en el peor punto, no en el promedio. El tamaño y el peso hacen el resto: una tipografía grande y robusta aguanta un fondo cambiante que una fina y pequeña no aguanta.

Por qué el texto sobre un degradado es más difícil de lo que parece

Sobre un color plano, el contraste entre el texto y el fondo es un solo número. Sobre un degradado, cambia a lo largo de la mezcla. Un texto blanco puede verse nítido sobre el extremo oscuro y casi invisible sobre el claro, a veces dentro de una misma palabra. El degradado de abajo muestra lo rápido que ocurre.

Los umbrales vienen de la guía de contraste de las WCAG: 4,5:1 para el texto normal y 3:1 para el texto grande, a partir de unos 24 píxeles, o unos 19 píxeles en negrita. Contraste de color explica las reglas en palabras sencillas.

Paso 1: encuentra la zona tranquila

Todo degradado tiene tramos donde el color cambia despacio y tramos donde cambia rápido. El texto va en la parte lenta, porque el contraste bajo él se mantiene casi constante. En un degradado lineal suele ser uno de los extremos; en uno radial, el centro o el borde exterior; en uno de malla o aurora, la mancha de color más grande y uniforme.

Si controlas el degradado, incorpora la zona tranquila: mantén un color durante más tiempo repitiendo una parada, como hace el primer ejemplo. Si el degradado te viene dado, mueve el texto en lugar de pelearte con él.

Paso 2: elige la tinta por luminosidad, no por tono

El contraste es cuestión de luminosidad. Un violeta vivo y un naranja vivo pueden parecer igual de fuertes, pero el blanco se lee bien sobre el violeta y mal sobre el naranja, porque el naranja es mucho más claro. Al elegir la tinta, olvídate del tono y pregúntate: ¿el color detrás de esta línea es oscuro o claro?

Las tintas teñidas se ven más cuidadas que el blanco y el negro puros. Toma un tinte muy pálido del color más claro del degradado y un tono muy profundo del más oscuro; llevan la paleta al texto y suelen tener contraste suficiente. Degradados turbios explica por qué las mezclas intermedias pierden contraste de luminosidad.

Paso 3: no caigas en la trampa de los tonos medios

Mira la fila del magenta en la tabla: 4,7:1 con blanco y 4,2:1 con casi negro. Ninguna tinta tiene mucho margen. Los colores de luminosidad media están en el centro de la mayoría de los degradados, que es justo donde la gente suele centrar el texto. El texto pequeño ahí quedará al límite elijas la tinta que elijas.

• Mueve el texto hacia el extremo más oscuro o más claro.
• Desplaza el degradado para que la parada detrás del texto sea más oscura o más clara.
• Haz el texto grande y en negrita, para que se aplique el umbral más bajo de 3:1 del texto grande.
• Reserva los tonos medios para la decoración, las formas y el espacio, no para las palabras.

.banner {
  /* The dark stop is held to 45%, so the headline on the left sits on one lightness. */
  background: linear-gradient(90deg, #1e1b4b 0%, #1e1b4b 45%, #7c3aed 70%, #ec4899 100%);
  color: #f5f3ff; /* a pale violet tint rather than pure white */
}

.banner h1 {
  max-width: 40%;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Paso 4: usa el tamaño y el peso

Las letras más gruesas y más grandes tienen más superficie y se leen como formas, así que toleran mejor un fondo cambiante. Los pesos finísimos y ligeros se desdibujan cuando cambia el color que tienen detrás. Sobre un degradado, compón el texto de cuerpo en regular, medium o bold en lugar de pesos ligeros, y usa titulares generosos. Las mejores fuentes para redes sociales recoge fuentes robustas que se leen en el móvil.

Paso 5: prueba a tamaño de móvil y en escala de grises

1. 1

   Mide el peor punto

   Toma una muestra del color más claro detrás del texto claro, o del más oscuro detrás del texto oscuro, y comprueba la relación.

2. 2

   Míralo en escala de grises

   Quita la saturación a una copia del diseño. Sin el tono, un contraste de luminosidad débil salta a la vista.

3. 3

   Míralo en un móvil

   Con el brazo estirado y, si puedes, a la luz del día. El texto pequeño sobre degradados falla ahí primero.

4. 4

   Entrecierra los ojos

   Cierra los ojos a medias. El texto debería seguir separándose del fondo como una forma.

Para fondos más recargados que un degradado, como fotos y texturas, mira texto sobre fondos recargados. En Gradiently, los Marks desplazan su zona más tranquila detrás de las palabras, y la tinta Automático elige texto claro u oscuro en cada línea a partir de la propia paleta del Mark, así que el método de arriba ocurre mientras escribes.