# Auto ink: how Gradiently picks light or dark type for every line

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

A gradient is light in one place and dark in another, so no single text colour suits all of it. Auto ink decides line by line, and the Mark helps from behind.

## The short version

- Auto ink is a Gradiently setting that picks light or dark type for each line of text, whichever reads better on the part of the Mark right behind it.
- Both inks come from the Mark's own palette, so the type always belongs to the background rather than defaulting to pure white or black.
- Text can also be fixed to the light ink or the dark ink when you want one colour regardless of the background.
- Auto ink works together with the Mark's reaction, which settles the material behind words, from Off through Invisible, Subtle and Clear to Bold.
- Neither uses boxes, shadows or blur, and you choose how strongly the Mark responds.

**Auto ink** is how Gradiently chooses the colour of your type. For each line of text set to Auto, it looks at the part of the Mark directly behind it and picks the light ink or the dark ink, whichever reads better there. Both inks come from the Mark's own palette, so a headline over a pale corner turns deep while a caption over a dark band turns light, and both still look like the same brand.

## Why one text colour fails on a gradient

On a flat background you choose a text colour once. A gradient changes as it goes: the top of a story might be nearly white and the bottom nearly black. White text that reads beautifully at the bottom vanishes at the top, and a long headline can cross both. That is the core problem in [text on a gradient background](https://gradiently.design/guide/text-on-gradient), and the usual fixes, boxes behind words and drop shadows, cover up the very background you chose.

A vertical story announcing a studio sale, where the text colour struggles against lighter and darker areas of the gradient

One fixed colour across a changing background: parts of the type fight the material.

The same studio sale story with each line in the light or dark ink that reads best, and calmer material behind the words

Auto ink with the Mark reacting: each line takes the ink that reads, and the material settles behind it.

## How Auto ink chooses light or dark

Every Mark carries a light ink and a dark ink drawn from its palette: a pale tone and a deep tone that belong with its colours. When a line is set to Auto, Gradiently measures the material in the area that line covers and gives it whichever ink stands out more. Move the text and the choice follows. Resize the design to a story or a banner, where the light lands somewhere else, and each line is chosen again.

- Light ink: #fbf3ea
- Peach light: #e9a27c
- Rose middle: #9c4f6b
- Plum shadow: #3b1f3f
- Dark ink: #1a0f1f

An example Mark palette with its two inks at either end. The inks are tinted with the Mark's own warmth, not pure white and pure black.

The idea behind it is the same contrast measure used in the web's accessibility guidelines: compare how light the text is with how light the background is. Here is the principle in a few lines of code, for anyone building something similar on the 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
```

The principle only, not Gradiently's own code. A real background varies under a line, so the area behind it has to be measured, not a single pixel.

For the numbers themselves, WCAG asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text. [Colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility) explains the ratios, and [WebAIM's contrast checker](https://webaim.org/resources/contrastchecker/) lets you test any pair.

## Auto, light or dark: the three ink modes

| Mode | What it does | Use it when |
| --- | --- | --- |
| Auto | Picks the light or dark ink per line from what is behind it | Almost always: headlines, details, captions on a changing background |
| Light | Always uses the Mark's light ink | A dark Mark where you want every line to match, such as a quote card |
| Dark | Always uses the Mark's dark ink | A pale, papery Mark, or print where you want one consistent ink |

Text starts on Auto. Switching a line to a fixed ink is one choice in the type colour settings, and Back to Auto ink returns it.

You can still colour text with any colour from your brand kit or the Mark's palette. Auto ink is the default because it is the choice that keeps working when the design moves to another size.

## How the Mark helps from behind

Choosing the right ink is half the job. The other half is the background itself. A Mark knows where the words are: its calmest, best contrasting region moves behind the text, colours near the letters deepen or lift, and busy detail relaxes. The full mechanism is in [a background that adapts to text](https://gradiently.design/guide/text-reacts-to-background). Auto ink then picks the ink for that settled area, so the two reinforce each other.

| Reaction | What happens behind your words |
| --- | --- |
| Off | The material ignores your words |
| Invisible | Only where it is needed; nobody will notice |
| Subtle | Balanced: the look stays, the words read |
| Clear | Words always win |
| Bold | The most contrast it gives, calm a little wider |

The reaction levels you can choose for a design, from the material ignoring words to giving the most contrast it can.

Past the presets, four dials let you tune it: **Tone**, how far the material settles behind words for contrast; **Calm**, how much its warp and busyness relax; **Bend**, a slight bend of the pattern at the edge of the words; and **Reach**, how far around the words it responds. You choose how strongly it acts, so a poster can stay wild while a menu stays quiet.

## What Auto ink deliberately avoids

### Avoid

- A solid box behind every line
- Drop shadows that smudge the edges of letters
- Blurring the background behind the text
- Pure white type on a pale corner

### Do

- Let each line take the ink that reads
- Let the Mark settle a calmer area behind words
- Keep the inks in the Mark's own palette
- Raise the reaction level for small or long text

Boxes and shadows work, but they announce themselves and hide the background. [Alternatives to text shadows](https://gradiently.design/guide/text-shadow-alternatives) covers why, and [text on a busy background](https://gradiently.design/guide/type-on-busy-backgrounds) has more ways to keep words readable without them.

## Getting the most from Auto ink

1. **Leave text on Auto** Only fix a line to light or dark when you have a specific reason, such as matching a printed set.
2. **Pick a reaction for the job** Subtle suits most social posts. Choose Clear or Bold for small type, long details or anything read at a distance.
3. **Check every size** After resizing, look at each format. The ink is chosen again for each one, which is usually what you want.
4. **Keep headlines short** A line that crosses from the lightest to the darkest part of a Mark is harder for any ink. Break it into two lines.

## FAQ

### What is Auto ink in Gradiently?

A type colour setting that picks the Mark's light or dark ink for each line, depending on which reads better against the part of the background behind it.

### Can I turn Auto ink off?

Yes. Set a line to always use the light ink or the dark ink, or give it any colour you like. Back to Auto ink returns it.

### Does Auto ink add shadows or boxes behind text?

No. It only changes the type colour. The Mark itself settles a calmer area behind the words, without boxes, shadows or blur.

### What contrast ratio should text have on a background?

WCAG asks for at least 4.5:1 for body text and 3:1 for large text.

### Why did my text change colour after I resized the design?

In a new size the light falls in a different place, so Auto ink picks the ink again for each line to keep it readable.