# Texto sobre fondos recargados sin recurrir a una caja

[Canonical HTML page](https://gradiently.design/es/guide/type-on-busy-backgrounds)

Los arreglos habituales son un panel oscuro, una sombra o un desenfoque. Todos funcionan, y todos se hacen notar. Hay una forma más discreta de que las palabras se lean.

## The short version

- El texto sobre un fondo recargado cuesta de leer porque el contraste cambia de una letra a otra y los bordes del fondo compiten con las formas de las letras.
- Las cajas, los velos, las sombras y los desenfoques hacen legible el texto, pero cada uno tapa parte del fondo y cambia cómo se siente el diseño.
- Colocar las palabras sobre la zona más tranquila y uniforme del fondo es el arreglo que menos le cuesta al diseño.
- Elegir tinta clara u oscura para cada línea, según lo que hay realmente detrás, mantiene legible cada línea sobre un fondo que va de claro a oscuro.
- Un fondo que se reorganiza alrededor de las palabras, calmándose y oscureciéndose detrás de ellas, puede hacer legible el texto sin ningún parche visible.

Hacer legible el **texto sobre un fondo recargado** se reduce a dos cosas: lo que hay justo detrás de las letras y el color de las letras. Los arreglos comunes, una caja, una sombra o un desenfoque, cambian lo que hay detrás de las letras tapándolo. Los mejores arreglos ponen las palabras donde el fondo ya está tranquilo, eligen la tinta de cada línea y, cuando la herramienta lo permite, dejan que el fondo haga sitio en lugar de ponerle un parche.

Un titular colocado directamente sobre una textura degradada detallada, con las letras compitiendo contra el fondo

Sin tocar: la textura atraviesa las palabras.

El mismo titular y la misma textura, con la parte más tranquila del fondo desplazada detrás de las palabras

Haciendo sitio: la parte tranquila de la textura queda detrás de ellas.

## Por qué el texto y los fondos recargados chocan

Leer depende del contraste entre cada letra y lo que la rodea. Sobre un color liso, ese contraste es igual en todas partes. Sobre una foto, un patrón o un degradado animado, cambia sin parar: una letra cae sobre una luz, la siguiente sobre una sombra, y la palabra se rompe en trozos. El detalle lo empeora, porque los propios bordes y formas del fondo se parecen un poco a los trazos de las letras, y el ojo tiene que separar unos de otros.

Por eso las pautas de contraste, como las proporciones de [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility), son difíciles de aplicar sobre fondos recargados: no hay un único color de fondo con el que medir. La prueba honesta es el peor punto, la zona más clara detrás de un texto claro o la más oscura detrás de un texto oscuro.

## Los arreglos habituales y lo que cuesta cada uno

Todos los arreglos estándar funcionan cambiando lo que hay justo detrás de las letras. Todos son legítimos, y todos le quitan algo al fondo que elegiste.

| Arreglo | Cómo funciona | Qué cuesta |
| --- | --- | --- |
| Caja sólida | Un panel de color liso detrás del texto | Tapa el fondo; parece una etiqueta |
| Panel translúcido | Una caja transparente que oscurece o aclara | Enturbia los colores de debajo; se ve el borde |
| Velo | Un degradado suave que se oscurece detrás del texto | Oscurece todo un lado de la imagen |
| Sombra paralela | Un halo oscuro alrededor de cada letra | Parece anticuada si es intensa; enturbia el color |
| Parche desenfocado | Desenfoca el fondo detrás de las palabras | Parece sin terminar; delata dónde va el texto |
| Contorno | Una línea de contraste alrededor de cada letra | Cambia el carácter de la tipografía |

Seis arreglos habituales. Todos funcionan; todos se ven.

Si usas uno, úsalo con suavidad. Un velo que se desvanece sobre una zona amplia se nota menos que una caja, y una sombra suave y ancha parece menos anticuada que una dura. Esta es una versión contenida para la web:

```css
.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}
```

Un velo y una sombra suaves. Comprueba el resultado con un verificador de contraste como el de [WebAIM](https://webaim.org/resources/contrastchecker/) en el punto más claro detrás del texto.

## Mejor: pon las palabras donde el fondo está tranquilo

La mayoría de los fondos recargados tienen una zona más tranquila: un trozo de cielo, una mancha suave de color, un área desenfocada. Mover el texto ahí, o recortar para que esa zona caiga donde va el texto, resuelve el problema sin tapar nada. Cuando elijas o crees un fondo, busca uno con una zona tranquila donde suelan ir tus palabras.

- Recargado: el texto chocará con esto: `repeating-linear-gradient(45deg, #1d3557 0px, #1d3557 12px, #e63946 12px, #e63946 24px, #f1faee 24px, #f1faee 36px)`
- Una zona tranquila en el centro: `radial-gradient(ellipse at 50% 50%, #f1faee 0%, #a8dadc 35%, #457b9d 70%, #1d3557 100%)`

Los mismos tres colores, dos bases muy distintas para las palabras. Las rayas dan a cada letra un fondo diferente; un campo radial da al centro una zona clara y uniforme donde el texto oscuro se lee limpio.

La misma idea vale para las fotos, donde el recorte, el desenfoque y el duotono pueden crear calma; [texto sobre imagen](https://gradiently.design/es/guide/text-over-image) recorre siete técnicas. En los degradados, la zona tranquila suele estar donde el color cambia más despacio; [texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) muestra cómo encontrarla.

## Elige la tinta de cada línea

Un fondo que va de claro a oscuro no se resuelve con un solo color de tinta. El texto blanco se lee en la mitad oscura y desaparece en la clara. En lugar de forzar un panel detrás, elige la tinta línea a línea: tinta clara donde el fondo detrás de esa línea es oscuro, tinta oscura donde es claro. Saca las dos tintas de la propia paleta del fondo, un tono profundo y otro pálido, para que se sientan parte del diseño y no pegadas encima.

### Una tinta para todo

- Titular blanco sobre un campo claro y oscuro
- La mitad de las letras pierden contraste
- Una caja añadida para salvarlo
- El fondo desaparece bajo la caja

### Tinta elegida por línea

- Cada línea comprobada contra lo que tiene detrás
- Tinta clara sobre zonas oscuras, oscura sobre claras
- Ambas tintas sacadas de la paleta del fondo
- Sin necesidad de parches

## Que se mueva el fondo, no las palabras

El arreglo más discreto de todos es un fondo que sabe dónde están las palabras. Así se comporta un Mark de Gradiently: en lugar de quedar tapado, se reorganiza. Todo el material se desliza para que su zona más tranquila y con mejor contraste quede detrás del texto; cerca de las letras, los colores se oscurecen bajo el texto claro y se aclaran bajo el oscuro; las crestas recargadas se relajan. Nada de eso es una forma que puedas señalar. Se lee como el diseño, porque es el diseño.

La otra mitad es la tinta. Pon el texto en **Tinta automática** y cada línea elige la tinta clara u oscura que mejor se lee contra lo que hay realmente detrás, de una pareja sacada de la propia paleta del Mark. Mueve un titular de una zona luminosa a una oscura y cambia sin hacer ruido. Tú decides cuánto responde el fondo: apenas, equilibrado o un escenario claro para un titular que tiene que impactar.

> El mejor arreglo de legibilidad es el que nadie nota.

## Lista de comprobación para texto sobre fondos recargados

1. **Busca primero la zona tranquila** Coloca o recorta para que las palabras queden sobre la parte más uniforme del fondo.
2. **Revisa el peor punto** Mide el contraste en el punto más claro detrás del texto claro o en el más oscuro detrás del texto oscuro, no la media.
3. **Elige la tinta por línea** Clara sobre oscuro, oscura sobre claro, ambas sacadas de la paleta del fondo.
4. **Usa el peso y el tamaño** Una tipografía más gruesa y más grande aguanta fondos más recargados. Los pesos finísimos no. En [fuentes para redes sociales](https://gradiently.design/es/guide/fonts-for-social-media) hay tipografías que resisten.
5. **Pon parches solo como último recurso** Si no queda otra, usa el arreglo más suave: un velo suave antes que una caja, una sombra ancha y tenue antes que una dura.

## FAQ

### ¿Cómo hago legible el texto sobre un fondo recargado?

Pon las palabras sobre la parte más tranquila del fondo, elige tinta clara u oscura para cada línea según lo que tenga detrás y usa un peso más grueso y un tamaño mayor. Recurre a un velo suave solo si no basta.

### ¿Es una sombra paralela una buena forma de hacer legible el texto?

Una sombra suave, ancha y tenue puede ayudar. Una sombra dura e intensa hace que el texto parezca anticuado y enturbia el color, así que úsala con moderación.

### ¿Cómo compruebo el contraste sobre un fondo recargado?

Mide en el peor punto, como la zona más clara detrás de un texto claro, en lugar del color medio. Un verificador de contraste te da la proporción para esa pareja.

### ¿Qué es la tinta automática en Gradiently?

La tinta automática elige texto claro u oscuro para cada línea a partir de la propia paleta del Mark, según lo que hay realmente detrás de esa línea, y cambia si el texto se mueve.