# Tinta automática: cómo elige Gradiently texto claro u oscuro

[Canonical HTML page](https://gradiently.design/es/guide/auto-ink-legibility)

Un degradado es claro en un sitio y oscuro en otro, así que ningún color de texto sirve para todo él. La tinta automática decide línea a línea, y el Mark ayuda desde detrás.

## The short version

- La tinta automática es un ajuste de Gradiently que elige texto claro u oscuro para cada línea, el que se lea mejor sobre la parte del Mark que tiene justo detrás.
- Ambas tintas salen de la propia paleta del Mark, así que el texto siempre pertenece al fondo en lugar de recurrir al blanco o al negro puros.
- El texto también puede fijarse en la tinta clara o en la oscura cuando quieres un solo color sea cual sea el fondo.
- La tinta automática trabaja junto con la reacción del Mark, que asienta el material detrás de las palabras, desde Desactivado pasando por Invisible, Sutil y Claro hasta Marcado.
- Ninguna de las dos usa cajas, sombras ni desenfoque, y tú eliges con cuánta fuerza responde el Mark.

La **tinta automática** es la forma en que Gradiently elige el color de tu texto. Para cada línea de texto en modo automático, mira la parte del Mark que tiene justo detrás y elige la tinta clara o la oscura, la que se lea mejor ahí. Ambas tintas salen de la propia paleta del Mark, así que un titular sobre una esquina pálida se vuelve profundo mientras un pie de texto sobre una franja oscura se vuelve claro, y los dos siguen pareciendo de la misma marca.

## Por qué un solo color de texto falla sobre un degradado

Sobre un fondo plano eliges el color del texto una vez. Un degradado cambia a medida que avanza: la parte superior de una historia puede ser casi blanca y la inferior casi negra. Un texto blanco que se lee de maravilla abajo desaparece arriba, y un titular largo puede cruzar ambas zonas. Ese es el problema central del [texto sobre un fondo degradado](https://gradiently.design/es/guide/text-on-gradient), y las soluciones habituales, cajas detrás de las palabras y sombras paralelas, tapan precisamente el fondo que elegiste.

Una historia vertical que anuncia las rebajas de un estudio, donde el color del texto lucha contra las zonas más claras y más oscuras del degradado

Un solo color fijo sobre un fondo que cambia: partes del texto pelean con el material.

La misma historia de rebajas con cada línea en la tinta clara u oscura que mejor se lee, y un material más tranquilo detrás de las palabras

Tinta automática con el Mark reaccionando: cada línea toma la tinta que se lee, y el material se asienta detrás.

## Cómo elige la tinta automática entre clara y oscura

Cada Mark lleva una tinta clara y una tinta oscura sacadas de su paleta: un tono pálido y un tono profundo que encajan con sus colores. Cuando una línea está en modo automático, Gradiently mide el material en la zona que cubre esa línea y le da la tinta que más destaca. Mueve el texto y la elección lo sigue. Adapta el diseño a una historia o a un banner, donde la luz cae en otro sitio, y cada línea se elige de nuevo.

- Tinta clara: #fbf3ea
- Melocotón claro: #e9a27c
- Rosa medio: #9c4f6b
- Sombra ciruela: #3b1f3f
- Tinta oscura: #1a0f1f

Un ejemplo de paleta de Mark con sus dos tintas en los extremos. Las tintas llevan la calidez del propio Mark, no son blanco y negro puros.

La idea de fondo es la misma medida de contraste que usan las pautas de accesibilidad de la web: comparar lo claro que es el texto con lo claro que es el fondo. Aquí tienes el principio en unas pocas líneas de código, para quien quiera construir algo parecido en la web.

```js
// Relative luminance of an sRGB colour, as defined in WCAG
function luminance([r, g, b]) {
  const c = [r, g, b].map((v) => {
    v /= 255
    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
}

const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

// Pick whichever ink contrasts more with the colour behind the line
function pickInk(behind, lightInk, darkInk) {
  return contrast(behind, lightInk) >= contrast(behind, darkInk) ? lightInk : darkInk
}

pickInk([156, 79, 107], [251, 243, 234], [26, 15, 31]) // the light ink
```

Solo el principio, no el código de Gradiently. Un fondo real varía bajo una línea, así que hay que medir la zona que tiene detrás, no un solo píxel.

En cuanto a las cifras, 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. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) explica las relaciones, y el [comprobador de contraste de WebAIM](https://webaim.org/resources/contrastchecker/) te permite probar cualquier pareja.

## Automática, clara u oscura: los tres modos de tinta

| Modo | Qué hace | Úsalo cuando |
| --- | --- | --- |
| Automática | Elige la tinta clara u oscura en cada línea según lo que tiene detrás | Casi siempre: titulares, detalles y pies de texto sobre un fondo que cambia |
| Clara | Usa siempre la tinta clara del Mark | Un Mark oscuro en el que quieres que todas las líneas coincidan, como una tarjeta con cita |
| Oscura | Usa siempre la tinta oscura del Mark | Un Mark pálido, como de papel, o impresión en la que quieres una sola tinta coherente |

El texto empieza en automático. Pasar una línea a una tinta fija es una opción en los ajustes de color del texto, y Volver a la tinta automática la devuelve.

Sigues pudiendo colorear el texto con cualquier color de tu kit de marca o de la paleta del Mark. La tinta automática es la opción por defecto porque es la que sigue funcionando cuando el diseño pasa a otro tamaño.

## Cómo ayuda el Mark desde detrás

Elegir la tinta correcta es la mitad del trabajo. La otra mitad es el propio fondo. Un Mark sabe dónde están las palabras: su zona más tranquila y con mejor contraste se desplaza detrás del texto, los colores cercanos a las letras se oscurecen o se aclaran y el detalle recargado se relaja. El mecanismo completo está en [un fondo que se adapta al texto](https://gradiently.design/es/guide/text-reacts-to-background). La tinta automática elige después la tinta para esa zona ya asentada, así que las dos se refuerzan.

| Reacción | Qué pasa detrás de tus palabras |
| --- | --- |
| Desactivado | El material ignora tus palabras |
| Invisible | Solo donde hace falta; nadie lo notará |
| Sutil | Equilibrado: el estilo se mantiene, las palabras se leen |
| Claro | Las palabras siempre ganan |
| Marcado | El mayor contraste que da, calmado un poco más ancho |

Los niveles de reacción que puedes elegir para un diseño, desde que el material ignore las palabras hasta que dé el mayor contraste posible.

Más allá de los ajustes predefinidos, cuatro controles te permiten afinarlo: **Tono**, cuánto se asienta el material detrás de las palabras para dar contraste; **Calma**, cuánto se relajan su deformación y su ajetreo; **Curvatura**, una leve curva del patrón en el borde de las palabras; y **Alcance**, hasta dónde responde alrededor de las palabras. Tú eliges con cuánta fuerza actúa, así que un póster puede seguir siendo salvaje mientras una carta se mantiene tranquila.

## Lo que la tinta automática evita a propósito

### Evita

- Una caja sólida detrás de cada línea
- Sombras paralelas que emborronan los bordes de las letras
- Desenfocar el fondo detrás del texto
- Texto blanco puro sobre una esquina pálida

### Haz

- Deja que cada línea tome la tinta que se lee
- Deja que el Mark asiente una zona más tranquila detrás de las palabras
- Mantén las tintas en la propia paleta del Mark
- Sube el nivel de reacción para texto pequeño o largo

Las cajas y las sombras funcionan, pero se hacen notar y esconden el fondo. [Alternativas a las sombras de texto](https://gradiently.design/es/guide/text-shadow-alternatives) explica por qué, y [texto sobre fondos cargados](https://gradiently.design/es/guide/type-on-busy-backgrounds) tiene más formas de mantener las palabras legibles sin ellas.

## Cómo sacar el máximo partido a la tinta automática

1. **Deja el texto en automático** Fija una línea en clara u oscura solo cuando tengas un motivo concreto, como igualar un conjunto impreso.
2. **Elige una reacción para cada trabajo** Sutil encaja con la mayoría de las publicaciones en redes. Elige Claro o Marcado para texto pequeño, detalles largos o cualquier cosa que se lea a distancia.
3. **Revisa cada tamaño** Después de adaptar el tamaño, mira cada formato. La tinta se elige de nuevo en cada uno, que normalmente es lo que quieres.
4. **Mantén cortos los titulares** Una línea que cruza de la parte más clara a la más oscura de un Mark es más difícil para cualquier tinta. Divídela en dos líneas.

## FAQ

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

Un ajuste del color del texto que elige la tinta clara u oscura del Mark para cada línea, según cuál se lea mejor contra la parte del fondo que tiene detrás.

### ¿Puedo desactivar la tinta automática?

Sí. Haz que una línea use siempre la tinta clara o la oscura, o dale el color que quieras. Volver a la tinta automática la devuelve.

### ¿La tinta automática añade sombras o cajas detrás del texto?

No. Solo cambia el color del texto. Es el propio Mark el que asienta una zona más tranquila detrás de las palabras, sin cajas, sombras ni desenfoque.

### ¿Qué relación de contraste debe tener el texto sobre un fondo?

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

### ¿Por qué mi texto cambió de color al adaptar el tamaño del diseño?

En un tamaño nuevo la luz cae en otro sitio, así que la tinta automática vuelve a elegir la tinta para cada línea y mantenerla legible.