Auto-inkt: zo kiest Gradiently lichte of donkere tekst per regel

Auto-inkt is hoe Gradiently de kleur van je tekst kiest. Voor elke tekstregel die op Auto staat, kijkt het naar het deel van de Mark direct erachter en kiest het de lichte of de donkere inkt, wat daar het best leest. Beide inkten komen uit het eigen palet van de Mark, dus een kop boven een bleke hoek wordt diep terwijl een bijschrift boven een donkere band licht wordt, en beide zien er nog steeds uit als hetzelfde merk.

Waarom één tekstkleur op een verloop faalt

Op een egale achtergrond kies je één keer een tekstkleur. Een verloop verandert onderweg: de bovenkant van een story kan bijna wit zijn en de onderkant bijna zwart. Witte tekst die onderaan prachtig leest, verdwijnt bovenaan, en een lange kop kan beide doorkruisen. Dat is het kernprobleem in tekst op een verloopachtergrond, en de gebruikelijke oplossingen, vlakken achter woorden en slagschaduwen, verbergen juist de achtergrond die je koos.

Hoe Auto-inkt licht of donker kiest

Elke Mark heeft een lichte en een donkere inkt uit zijn palet: een bleke tint en een diepe tint die bij zijn kleuren horen. Als een regel op Auto staat, meet Gradiently het materiaal in het gebied dat die regel beslaat en geeft het de inkt die het meest opvalt. Verplaats de tekst en de keuze volgt. Schaal het ontwerp naar een story of een banner, waar het licht ergens anders valt, en elke regel wordt opnieuw gekozen.

Het idee erachter is dezelfde contrastmeting als in de toegankelijkheidsrichtlijnen van het web: vergelijk hoe licht de tekst is met hoe licht de achtergrond is. Hier staat het principe in een paar regels code, voor wie op het web iets vergelijkbaars bouwt.

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

Voor de getallen zelf vraagt WCAG een contrastverhouding van minstens 4,5:1 voor lopende tekst en 3:1 voor grote tekst. Kleurcontrast en toegankelijkheid legt de verhoudingen uit, en met de contrastchecker van WebAIM test je elk paar.

Auto, licht of donker: de drie inktmodi

Je kunt tekst nog steeds kleuren met elke kleur uit je huisstijlkit of het palet van de Mark. Auto-inkt is de standaard omdat het de keuze is die blijft werken wanneer het ontwerp naar een ander formaat gaat.

Zo helpt de Mark van achteren

De juiste inkt kiezen is het halve werk. De andere helft is de achtergrond zelf. Een Mark weet waar de woorden staan: zijn rustigste, best contrasterende gebied schuift achter de tekst, kleuren dicht bij de letters worden dieper of lichter en drukke details ontspannen. Het volledige mechanisme staat in een achtergrond die zich aanpast aan tekst. Auto-inkt kiest dan de inkt voor dat tot rust gekomen gebied, zodat de twee elkaar versterken.

Naast de presets laten vier regelaars je het afstellen: Toon, hoe ver het materiaal achter woorden tot rust komt voor contrast; Rust, hoeveel de vervorming en drukte ontspannen; Buiging, een lichte buiging van het patroon aan de rand van de woorden; en Bereik, hoe ver rond de woorden het reageert. Jij kiest hoe sterk het werkt, zodat een poster wild kan blijven terwijl een menu rustig blijft.

Wat Auto-inkt bewust vermijdt

Vlakken en schaduwen werken, maar ze vallen op en verbergen de achtergrond. Alternatieven voor tekstschaduwen legt uit waarom, en tekst op een drukke achtergrond geeft meer manieren om woorden zonder die leesbaar te houden.

Het meeste uit Auto-inkt halen

1. 1

   Laat tekst op Auto staan

   Zet een regel alleen op licht of donker als je daar een specifieke reden voor hebt, zoals het afstemmen op een gedrukte set.

2. 2

   Kies een reactie voor de klus

   Subtiel past bij de meeste socialposts. Kies Duidelijk of Krachtig voor kleine tekst, lange details of alles wat van een afstand wordt gelezen.

3. 3

   Controleer elk formaat

   Bekijk na het schalen elk formaat. De inkt wordt voor elk opnieuw gekozen, wat meestal precies is wat je wilt.

4. 4

   Houd koppen kort

   Een regel die van het lichtste naar het donkerste deel van een Mark loopt, is voor elke inkt moeilijker. Breek hem af in twee regels.