Tekst på gradient: slik blir den lesbar hver gang

For at tekst på gradient alltid skal være lesbar, legger du ordene over den roligste strekningen i gradienten, velger lys eller mørk tekstfarge etter lysheten i fargen rett bak, holder liten tekst unna mellomtonene og tester kontrasten på det verste punktet, ikke gjennomsnittet. Størrelse og vekt gjør resten: stor, solid skrift tåler en bakgrunn i endring som tynn, liten skrift ikke klarer.

Hvorfor tekst på en gradient er vanskeligere enn det ser ut

På en ensfarget flate er kontrasten mellom tekst og bakgrunn ett tall. På en gradient endrer den seg langs overgangen. Hvit tekst kan være skarp mot den mørke enden og nesten usynlig mot den lyse, noen ganger innenfor ett enkelt ord. Gradienten under viser hvor fort det skjer.

Tersklene kommer fra WCAGs veiledning om kontrast: 4,5:1 for vanlig tekst og 3:1 for stor tekst, omtrent 24 piksler og oppover, eller rundt 19 piksler i fet. Fargekontrast forklarer reglene med enkle ord.

Steg 1: finn det rolige området

Hver gradient har strekninger der fargen endrer seg sakte, og strekninger der den endrer seg fort. Teksten hører hjemme i den sakte delen, fordi kontrasten under den holder seg nesten konstant. På en lineær gradient er det som regel den ene enden, på en radial gradient er det midten eller ytterkanten, og på en mesh eller aurora er det den fargeflaten som er størst og jevnest.

Styrer du gradienten selv, bygger du inn det rolige området: hold en farge lenger ved å gjenta et stopp, slik det første eksempelet gjør. Har du fått gradienten utlevert, flytter du teksten i stedet for å kjempe mot den.

Steg 2: velg tekstfarge etter lyshet, ikke fargetone

Kontrast handler om lyshet. En sterk fiolett og en sterk oransje kan se like kraftige ut, men hvitt leses godt på den fiolette og dårlig på den oransje, fordi oransje er mye lysere. Når du velger tekstfarge, ser du bort fra fargetonen og spør: er fargen bak denne linjen mørk eller lys?

Tonede tekstfarger føles mer gjennomtenkte enn ren hvit og svart. Ta en svært blek tone av gradientens lyseste farge og en svært dyp nyanse av den mørkeste. De bærer paletten inn i skriften og har som regel nok kontrast. Grumsete gradienter forklarer hvorfor midten av en overgang mister lyshetskontrast i utgangspunktet.

Steg 3: hold deg unna mellomtonefellen

Se på magentaraden i tabellen: 4,7:1 med hvit og 4,2:1 med nesten svart. Ingen av tekstfargene har mye å gå på. Farger med middels lyshet ligger midt i de fleste gradienter, akkurat der folk pleier å midtstille teksten. Liten tekst der blir på grensen uansett hvilken tekstfarge du velger.

• Flytt teksten mot den mørkere eller lysere enden.
• Forskyv gradienten slik at stoppet bak teksten blir mørkere eller lysere.
• Gjør teksten stor og fet, slik at den lavere terskelen på 3:1 for stor tekst gjelder.
• Spar mellomtonene til pynt, former og luft, ikke ord.

.banner {
  /* The dark stop is held to 45%, so the headline on the left sits on one lightness. */
  background: linear-gradient(90deg, #1e1b4b 0%, #1e1b4b 45%, #7c3aed 70%, #ec4899 100%);
  color: #f5f3ff; /* a pale violet tint rather than pure white */
}

.banner h1 {
  max-width: 40%;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Steg 4: bruk størrelse og vekt

Kraftigere og større bokstaver har mer flate og leses som former, så de tåler en bakgrunn i endring bedre. Hårtynne og lette vekter brytes opp når fargen bak dem skifter. På en gradient setter du brødtekst i regular, medium eller bold i stedet for lette vekter, og holder overskriftene romslige. Skrifter for sosiale medier lister opp solide skrifter som leses på mobil.

Steg 5: test i mobilstørrelse og i gråtoner

1. 1

   Mål det verste punktet

   Hent den lyseste fargen bak lys tekst, eller den mørkeste bak mørk tekst, og sjekk forholdet.

2. 2

   Se det i gråtoner

   Fjern metningen i en kopi av designet. Når fargetonen er borte, blir svak lyshetskontrast åpenbar.

3. 3

   Se på det på en mobil

   På en armlengdes avstand, helst i dagslys. Liten tekst på gradienter svikter der først.

4. 4

   Mys

   Lukk øynene halvveis. Teksten skal fortsatt skille seg fra bakgrunnen som en form.

For bakgrunner som er mer urolige enn en gradient, som bilder og teksturer, se tekst på urolige bakgrunner. I Gradiently flytter Marks det roligste området sitt bak ordene, og Auto blekk velger lys eller mørk tekst for hver linje fra Markens egen palett, så metoden over skjer mens du skriver.