Baggrund til tekst: hvad der gør ord lette at læse

En god baggrund til tekst har tre ting i området bag ordene: stærk kontrast til bogstaverne, meget få fine detaljer og et jævnt toneområde frem for lyse og mørke pletter. Farve betyder langt mindre, end folk tror. En violet gradient kan bære tekst smukt, og et gråt foto kan ødelægge den, afhængigt af de tre egenskaber. Denne guide viser, hvordan du bedømmer enhver baggrund, foto, gradient eller tekstur, og hvad du gør, når en svigter.

Kontrast: den første egenskab

Kontrast er forskellen i lyshed mellem bogstaverne og det, der ligger direkte bag dem. Web Content Accessibility Guidelines sætter den målbare grænse: et forhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst. WebAIMs kontrastberegner udregner det for to vilkårlige farver.

På en flad farve er ét tjek nok. På en gradient eller et foto ændrer baggrunden sig under hvert ord, så tjek det lyseste punkt bag lys tekst og det mørkeste punkt bag mørk tekst. Det er dér, tekst svigter først. Farvekontrast og tilgængelighed går dybere ind i standarderne.

Detaljer: hvorfor travle baggrunde er svære at læse

Kontrast er nødvendig, men ikke nok. En baggrund fuld af detaljer i samme størrelse som bogstaverne gør læsning svær, selv når forholdet består, fordi øjet ikke kan skille bogstavernes former fra formerne bag dem. Blade, grus, menneskemængder, fine striber og små mønstre er de værste syndere. Store, bløde former er de bedste: en himmel, en sløret væg, en glat gradient.

Tekstur er fin, når dens korn er meget mindre end bogstaverne, som filmkorn eller papirets struktur. Det bliver et problem, når teksturens elementer nærmer sig størrelsen på stregerne i din skrift. Elsker du et mønster, så skalér det op, til formerne er tydeligt større end bogstaverne, eller hold det væk fra ordene. Tekst på travle baggrunde går mere i detaljer med mønstre, og læselig tekst på fotos handler om billeder.

Toneområde: lyse og mørke pletter under én linje

Den tredje egenskab er den, folk falder i. Hvis en enkelt tekstlinje krydser både en lys og en mørk plet, kan ingen enkelt tekstfarve virke: hvid forsvinder på den lyse del og sort på den mørke. En god baggrund til tekst holder et snævert toneområde under hver linje, enten helt lyst eller helt mørkt.

Sådan tester du enhver baggrund til tekst

1. 1

   Knib øjnene sammen

   Luk øjnene halvt. Detaljerne forsvinder, og kun tonen bliver tilbage. Opløses ordene i baggrunden, er kontrasten for lav.

2. 2

   Slør det

   Læg en kraftig sløring på en kopi af baggrunden alene. Det, der er tilbage under tekstområdet, er den tone, bogstaverne reelt står på.

3. 3

   Se det i gråtoner

   Farve kan narre dig til at tro, at kontrasten er fin. Gråtoner viser kun lysheden, og det er den, læseligheden afhænger af.

4. 4

   Tjek yderpunkterne

   Mål kontrasten ved de lyseste og mørkeste punkter bag ordene, ikke gennemsnittet.

5. 5

   Se det på en telefon

   I en armslængdes afstand, i dagslys, i den størrelse folk faktisk vil se det.

Sådan retter du en baggrund, der kæmper mod teksten

De fleste løsninger tilføjer noget: en boks, en skygge, et mørkt bånd. De virker, men hver af dem er et plaster, der får designet til at se reddet ud. Prøv løsningerne i denne rækkefølge, fra mindst synlig til mest.

På nettet er et blidt gradientlag på den ene side af et heltebillede en anstændig udgave af den femte løsning: det gør kun området under ordene dybere og lader resten af billedet 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 mindst synlige løsninger ind i selve baggrunden. En Mark ved, hvor dine ord står: dens roligste område med bedst kontrast flytter ind bag teksten, farverne nær bogstaverne bliver dybere eller lysere, travle detaljer falder til ro, og Automatisk tekstfarve vælger lys eller mørk skrift til hver linje ud fra Markens palet. Der er ingen bokse, skygger eller sløring, og du vælger, hvor kraftigt den reagerer. Sådan virker Automatisk tekstfarve forklarer detaljerne, og tekst på en gradient giver den manuelle metode til enhver gradient.