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

[Canonical HTML page](https://gradiently.design/es/guide/gradient-background-for-text)

Algunos fondos sostienen las palabras sin esfuerzo y otros pelean con cada letra. La diferencia se reduce a tres propiedades que puedes comprobar en un minuto.

## The short version

- Un buen fondo para texto tiene tres propiedades donde van las palabras: contraste suficiente, poco detalle fino y una gama estrecha de tonos.
- Las WCAG piden una relación de contraste de al menos 4,5:1 para el texto normal y de 3:1 para el texto grande.
- El detalle de un tamaño parecido al de las letras, como follaje, multitudes o patrones recargados, perjudica la lectura más que el color.
- Entrecerrar los ojos ante un diseño, desenfocarlo o verlo en escala de grises muestra enseguida si la zona del texto es lo bastante tranquila.
- Llevar las palabras a una parte más tranquila del fondo suele ser mejor que añadirles una caja o una sombra detrás.

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](https://webaim.org/resources/contrastchecker/) la calcula para dos colores cualesquiera.

| Texto | Fondo | Relación de contraste | Veredicto |
| --- | --- | --- | --- |
| Blanco `#ffffff` | Índigo profundo `#1e1b4b` | 16:1 | Excelente a cualquier tamaño |
| Blanco `#ffffff` | Violeta `#7c3aed` | 5,7:1 | Aprueba para texto de párrafo |
| Blanco `#ffffff` | Pizarra `#64748b` | 4,8:1 | Aprueba por poco |
| Blanco `#ffffff` | Rosa `#f472b6` | 2,6:1 | Suspende, incluso en texto grande |
| Casi negro `#1a1a1a` | Rosa `#f472b6` | 6,6:1 | Aprueba: mismo rosa, tinta más oscura |
| Blanco `#ffffff` | Naranja `#fb923c` | 2,3:1 | Suspende |

Relaciones reales para combinaciones habituales. Los rosas, naranjas, amarillos y turquesas claros intensos necesitan texto oscuro, por mucho que el blanco parezca lo adecuado.

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](https://gradiently.design/es/guide/color-contrast-accessibility) 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.

- Liso: sostiene bien el texto: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- Luz suave: texto abajo a la izquierda: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Rayas finas: pelean con cada letra: `repeating-linear-gradient(45deg, #1e1b4b 0px, #1e1b4b 6px, #7c3aed 6px, #7c3aed 12px)`
- Anillos pequeños: ilegible: `repeating-radial-gradient(circle at 50% 50%, #4c1d95 0px, #4c1d95 4px, #c4b5fd 4px, #c4b5fd 9px)`

Los mismos dos colores de cuatro maneras. La pareja de arriba sostiene las palabras con facilidad; la de abajo tiene detalle a escala de letra y complica cualquier texto.

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](https://gradiently.design/es/guide/type-on-busy-backgrounds) trata los patrones con más detalle y [texto legible sobre fotos](https://gradiently.design/es/guide/readable-text-on-photos) 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.

Un post vertical en el que el titular atraviesa zonas claras y oscuras de un degradado y partes de él cuestan de leer

El titular cruza partes claras y oscuras del fondo, así que algunas letras desaparecen sea cual sea el color de la tinta.

El mismo post con una zona tranquila y de tono uniforme del degradado detrás del titular, de modo que se lee cada letra

El mismo fondo con una zona uniforme y más profunda detrás de las palabras. Ahora un solo color de tinta funciona para todas las letras.

## Cómo probar cualquier fondo para texto

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. **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. **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. **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. **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.

### Prueba primero

- Lleva las palabras a la parte más tranquila del fondo
- Recorta o recoloca el fondo para que una zona tranquila quede detrás
- Cambia la tinta: texto oscuro en zonas claras, claro en oscuras
- Haz la tipografía más grande y más gruesa
- Oscurece o aclara el fondo solo alrededor de las palabras

### Úsalo con moderación

- Cajas o franjas sólidas detrás del texto
- Sombras paralelas en las letras
- Contornos alrededor de las letras
- Un desenfoque fuerte sobre toda la imagen
- Una capa oscura sobre todo el fondo

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.

```css
.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;
}
```

Oscurece el lado izquierdo, donde está el titular, y se desvanece por completo al 70 por ciento del ancho. Comprueba el contraste en el punto más claro detrás del texto.

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](https://gradiently.design/es/guide/auto-ink-legibility) explica los detalles y [texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) da el método manual para cualquier degradado.

## FAQ

### ¿Cuál es el mejor color de fondo para texto?

Cualquier color que contraste mucho con el texto, al menos 4,5:1 para el texto normal. Los fondos muy claros o muy oscuros son los más fáciles; los tonos medios intensos como el rosa, el naranja y el amarillo necesitan texto oscuro.

### ¿Qué relación de contraste necesita el texto?

Las WCAG piden al menos 4,5:1 para el texto normal y 3:1 para el texto grande.

### ¿Por qué mi texto cuesta de leer aunque el contraste apruebe?

Probablemente el fondo tiene detalle de un tamaño parecido al de las letras, o manchas claras y oscuras bajo la misma línea. Lleva las palabras a una zona más tranquila y uniforme.

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

Primero lleva las palabras a la zona más tranquila o reencuadra la imagen. Si no es posible, oscurece o aclara solo la zona detrás del texto, y usa cajas o sombras como último recurso.

### ¿Se lee mejor el texto blanco o el negro sobre color?

Depende de la luminosidad del color. Los colores oscuros necesitan texto blanco; los claros e intensos suelen leerse mejor con un casi negro.