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.
On this page
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, and the usual fixes, boxes behind words and drop shadows, cover up the very background you chose.
One fixed colour across a changing background: parts of the type fight the material.
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.
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.
// 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 inkFor 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 explains the ratios, and WebAIM's contrast checker lets you test any pair.
Auto, light or dark: the three ink modes
Use it when
Use it when
Use it when
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. Auto ink then picks the ink for that settled area, so the two reinforce each other.
What happens behind your words
What happens behind your words
What happens behind your words
What happens behind your words
What happens behind your words
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 covers why, and text on a busy background 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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile