Bakgrunn for tekst: det som gjør ordene lette å lese

En god bakgrunn for tekst har tre ting i området bak ordene: sterk kontrast mot bokstavene, svært få små detaljer og jevne toner fremfor lyse og mørke flekker. Farge betyr langt mindre enn folk tror. En fiolett gradient kan bære teksten vakkert, og et grått foto kan ødelegge den, avhengig av disse tre egenskapene. Denne guiden viser hvordan du vurderer enhver bakgrunn, enten foto, gradient eller tekstur, og hva du gjør når den ikke fungerer.

Kontrast: den første egenskapen

Kontrast er forskjellen i lyshet mellom bokstavene og det som ligger rett bak dem. Retningslinjene for tilgjengelig webinnhold setter den målbare grensen: et forhold på minst 4,5:1 for vanlig tekst og 3:1 for stor tekst. WebAIMs kontrastsjekk beregner dette for to valgfrie farger.

På en flat farge holder én sjekk. På en gradient eller et foto endrer bakgrunnen seg under hvert ord. Sjekk derfor det lyseste punktet bak lys tekst og det mørkeste bak mørk tekst. Det er der lesbarheten svikter først. Fargekontrast og tilgjengelighet går grundigere inn i standardene.

Detaljer: hvorfor travle bakgrunner er tunge å lese

Kontrast er nødvendig, men ikke nok. En bakgrunn full av detaljer på størrelse med bokstavene gjør lesingen vanskelig selv når forholdet består, fordi øyet ikke kan skille bokstavformene fra formene bak. Blader, grus, folkemengder, fine striper og små mønstre er verst. Store, myke former er best: en himmel, en uskarp vegg, en jevn gradient.

Tekstur er greit når kornet er mye mindre enn bokstavene, som filmkorn eller papirstruktur. Det blir et problem når teksturens trekk nærmer seg størrelsen på strekene i skriften. Hvis du liker et mønster, skaler det opp til formene er tydelig større enn bokstavene, eller hold det unna ordene. Tekst på travle bakgrunner dekker mønstre grundigere, og lesbar tekst på foto dekker bilder.

Tonespenn: lyse og mørke flekker under én linje

Den tredje egenskapen er den folk lett overser. Hvis én tekstlinje krysser både et lyst og et mørkt felt, fungerer ingen enkelt tekstfarge: hvitt forsvinner på det lyse og svart på det mørke. En god bakgrunn for tekst holder et smalt tonespenn under hver linje, helt lyst eller helt mørkt.

Slik tester du enhver bakgrunn for tekst

1. 1

   Mys

   Lukk øynene halvveis. Detaljer forsvinner, og bare toner står igjen. Hvis ordene glir inn i bakgrunnen, er kontrasten for lav.

2. 2

   Gjør den uskarp

   Legg kraftig uskarphet på en kopi av bare bakgrunnen. Det som blir igjen under tekstområdet, er tonen bokstavene faktisk ligger på.

3. 3

   Vis i gråtoner

   Farge kan lure deg til å tro at kontrasten er god. Gråtoner viser bare lyshet, som er det lesbarheten avhenger av.

4. 4

   Sjekk ytterpunktene

   Mål kontrast ved de lyseste og mørkeste punktene bak ordene, ikke gjennomsnittet.

5. 5

   Se på den på mobilen

   På armlengdes avstand, i dagslys og i størrelsen folk faktisk ser den.

Rett en bakgrunn som kjemper mot teksten

De fleste løsninger legger til noe: en boks, en skygge, et mørkt felt. De fungerer, men hver er en lapp som får designet til å se reddet ut. Prøv løsningene i denne rekkefølgen, fra minst til mest synlig.

På nettet er et forsiktig gradientoverlegg på én side av et toppbilde en god variant av den femte løsningen: det mørkner bare området under ordene og lar resten av bildet være.

.hero {
  min-height: 70vh;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(15 12 30 / 0.85) 0%, rgb(15 12 30 / 0.45) 45%, rgb(15 12 30 / 0) 70%),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
}

Gradiently bygger de minst synlige løsningene inn i selve bakgrunnen. En Mark vet hvor ordene dine er: det roligste området med best kontrast flytter seg bak teksten, farger nær bokstavene mørkner eller lysner, travle detaljer dempes, og Auto-tekstfarge velger lys eller mørk skrift til hver linje fra Markens palett. Det er ingen bokser, skygger eller uskarphet, og du velger hvor sterkt den reagerer. Slik fungerer Auto-tekstfarge forklarer detaljene, og tekst på en gradient gir den manuelle metoden for alle gradienter.