Auto-tekstfarge: slik velger Gradiently lys eller mørk tekst per linje

Auto-tekstfarge er måten Gradiently velger fargen på teksten din. For hver tekstlinje som står på Auto, ser den på den delen av Marken som ligger rett bak og velger lys eller mørk tekstfarge, alt etter hva som leses best der. Begge fargene kommer fra Markens egen palett, så en overskrift over et blekt hjørne blir dyp mens en bildetekst over et mørkt felt blir lys, og begge ser likevel ut som samme merkevare.

Hvorfor én tekstfarge svikter på en gradient

På en flat bakgrunn velger du tekstfarge én gang. En gradient endrer seg underveis: toppen av en story kan være nesten hvit og bunnen nesten svart. Hvit tekst som leses nydelig nederst forsvinner øverst, og en lang overskrift kan krysse begge deler. Det er kjerneproblemet med tekst på gradientbakgrunn, og de vanlige løsningene, bokser bak ordene og skygger, dekker til nettopp den bakgrunnen du valgte.

Slik velger Auto-tekstfarge lys eller mørk

Hver Mark har en lys og en mørk tekstfarge hentet fra paletten: en blek tone og en dyp tone som hører til fargene. Når en linje står på Auto, måler Gradiently materialet i området linjen dekker og gir den den fargen som skiller seg mest ut. Flytt teksten, så følger valget etter. Endre størrelsen på designet til en story eller et banner, der lyset lander et annet sted, så velges hver linje på nytt.

Ideen bak er det samme kontrastmålet som brukes i nettets retningslinjer for tilgjengelighet: sammenlign hvor lys teksten er med hvor lys bakgrunnen er. Her er prinsippet i noen få kodelinjer, for den som bygger noe lignende på nett.

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

Når det gjelder tallene, krever WCAG et kontrastforhold på minst 4,5:1 for brødtekst og 3:1 for stor tekst. Fargekontrast og tilgjengelighet forklarer forholdstallene, og WebAIMs kontrastsjekker lar deg teste hvilket som helst fargepar.

Auto, Lys eller Mørk: de tre fargemodusene

Du kan fortsatt gi teksten hvilken som helst farge fra merkevaresettet ditt eller Markens palett. Auto-tekstfarge er standard fordi det er valget som fortsetter å fungere når designet flyttes til en annen størrelse.

Slik hjelper Marken til bakfra

Å velge riktig tekstfarge er halve jobben. Den andre halvparten er selve bakgrunnen. En Mark vet hvor ordene står: det roligste området med best kontrast flytter seg bak teksten, farger nær bokstavene blir dypere eller lysere, og travle detaljer roer seg. Hele mekanismen finner du i en bakgrunn som tilpasser seg teksten. Auto-tekstfarge velger så fargen for det roligere området, slik at de to forsterker hverandre.

Utover forhåndsvalgene lar fire hjul deg finjustere: Tone, hvor mye materialet dempes bak ordene for å gi kontrast; Ro, hvor mye forvrengningen og uroen slapper av; Bøy, en svak bøyning av mønsteret langs kanten av ordene; og Rekkevidde, hvor langt rundt ordene det reagerer. Du bestemmer hvor sterkt det virker, så en plakat kan forbli vill mens en meny forblir rolig.

Hva Auto-tekstfarge bevisst unngår

Bokser og skygger fungerer, men de roper om oppmerksomhet og skjuler bakgrunnen. Alternativer til tekstskygger forklarer hvorfor, og tekst på en travel bakgrunn har flere måter å holde ordene lesbare uten dem.

Få mest mulig ut av Auto-tekstfarge

1. 1

   La teksten stå på Auto

   Lås bare en linje til lys eller mørk når du har en konkret grunn, for eksempel å matche et trykt sett.

2. 2

   Velg en reaksjon som passer jobben

   Diskré passer de fleste innlegg i sosiale medier. Velg Tydelig eller Kraftig for liten skrift, lange detaljer eller alt som leses på avstand.

3. 3

   Sjekk hver størrelse

   Se på hvert format etter at du har endret størrelse. Tekstfargen velges på nytt for hvert av dem, og det er som regel det du vil.

4. 4

   Hold overskriftene korte

   En linje som går fra den lyseste til den mørkeste delen av en Mark er vanskeligere for enhver tekstfarge. Del den i to linjer.