Automatisk tekstfarve: lys eller mørk tekst til hver linje

Automatisk tekstfarve er den måde, Gradiently vælger farven på din tekst. For hver tekstlinje, der er sat til Automatisk, ser den på den del af Marken, der ligger lige bagved, og vælger enten den lyse eller den mørke farve, alt efter hvad der kan læses bedst dér. Begge farver kommer fra Markens egen palet, så en overskrift over et blegt hjørne bliver mørk, mens en billedtekst over et mørkt bånd bliver lys, og begge ligner stadig det samme brand.

Hvorfor én tekstfarve fejler på en gradient

På en flad baggrund vælger du tekstfarven én gang. En gradient ændrer sig, mens den løber: toppen af en story kan være næsten hvid og bunden næsten sort. Hvid tekst, der læses smukt nederst, forsvinder øverst, og en lang overskrift kan krydse begge dele. Det er kerneproblemet i tekst på gradientbaggrund, og de sædvanlige løsninger, bokse bag ordene og slagskygger, dækker netop den baggrund, du valgte.

Sådan vælger Automatisk tekstfarve lys eller mørk

Hver Mark har en lys og en mørk tekstfarve hentet fra sin palet: en bleg tone og en dyb tone, der hører til dens farver. Når en linje er sat til Automatisk, måler Gradiently materialet i det område, linjen dækker, og giver den den farve, der træder tydeligst frem. Flyt teksten, og valget følger med. Tilpas designet til en story eller et banner, hvor lyset falder et andet sted, og hver linje vælges igen.

Idéen bag er det samme kontrastmål, som bruges i webbets tilgængelighedsretningslinjer: sammenlign, hvor lys teksten er, med, hvor lys baggrunden er. Her er princippet i nogle få linjer kode til alle, der bygger noget lignende på nettet.

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

Hvad tallene angår, kræver WCAG et kontrastforhold på mindst 4,5:1 til brødtekst og 3:1 til stor tekst. Farvekontrast og tilgængelighed forklarer forholdene, og WebAIM's kontrastkontrol lader dig teste ethvert farvepar.

Automatisk, lys eller mørk: de tre tekstfarvetilstande

Du kan stadig farve tekst med en vilkårlig farve fra dit brandkit eller Markens palet. Automatisk tekstfarve er standard, fordi det er det valg, der bliver ved med at virke, når designet flyttes til en anden størrelse.

Sådan hjælper Marken bagfra

At vælge den rigtige farve er halvdelen af arbejdet. Den anden halvdel er selve baggrunden. En Mark ved, hvor ordene er: dens roligste område med bedst kontrast flytter sig bag teksten, farver nær bogstaverne bliver dybere eller lysere, og travle detaljer slapper af. Hele mekanismen står i en baggrund, der tilpasser sig tekst. Automatisk tekstfarve vælger så farven til det område, der har lagt sig til ro, så de to forstærker hinanden.

Ud over forudindstillingerne kan du finjustere med fire skydere: Tone, hvor meget materialet lægger sig bagved ord for kontrastens skyld; Ro, hvor meget dets vridning og uro dæmpes; Bøjning, en let bøjning af mønsteret ved kanten af ordene; og Rækkevidde, hvor langt omkring ordene det reagerer. Du vælger selv, hvor kraftigt det virker, så en plakat kan forblive vild, mens en menu forbliver stille.

Hvad Automatisk tekstfarve bevidst undgår

Bokse og skygger virker, men de gør opmærksom på sig selv og skjuler baggrunden. Alternativer til tekstskygger forklarer hvorfor, og tekst på en travl baggrund har flere måder at holde ord læsbare på uden dem.

Sådan får du mest ud af Automatisk tekstfarve

1. 1

   Lad teksten stå på Automatisk

   Lås kun en linje til lys eller mørk, når du har en bestemt grund, for eksempel for at matche et trykt sæt.

2. 2

   Vælg en reaktion, der passer til opgaven

   Diskret passer til de fleste opslag på sociale medier. Vælg Tydelig eller Markant til lille tekst, lange detaljer eller alt, der læses på afstand.

3. 3

   Tjek hver størrelse

   Efter en ændring af størrelse bør du se på hvert format. Farven vælges igen for hvert af dem, hvilket som regel er det, du vil have.

4. 4

   Hold overskrifterne korte

   En linje, der løber fra den lyseste til den mørkeste del af en Mark, er sværere for enhver farve. Del den i to linjer.