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

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, y las soluciones habituales, cajas detrás de las palabras y sombras paralelas, tapan precisamente el fondo que elegiste.

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.

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.

// 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

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 explica las relaciones, y el comprobador de contraste de WebAIM te permite probar cualquier pareja.

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

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. La tinta automática elige después la tinta para esa zona ya asentada, así que las dos se refuerzan.

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

Las cajas y las sombras funcionan, pero se hacen notar y esconden el fondo. Alternativas a las sombras de texto explica por qué, y texto sobre fondos cargados tiene más formas de mantener las palabras legibles sin ellas.

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

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