Bakgrund för text: vad som gör ord lätta att läsa

En bra bakgrund för text har tre saker i ytan bakom orden: stark kontrast mot bokstäverna, mycket lite finstilta detaljer och ett jämnt tonomfång i stället för ljusa och mörka fläckar. Färg betyder mycket mindre än folk tror. En violett gradient kan bära text vackert och ett grått foto kan förstöra den, beroende på de tre egenskaperna. Den här guiden visar hur du bedömer vilken bakgrund som helst, foto, gradient eller textur, och vad du gör när en inte håller.

Kontrast: den första egenskapen

Kontrast är skillnaden i ljushet mellan bokstäverna och det som ligger direkt bakom dem. Web Content Accessibility Guidelines sätter den mätbara ribban: ett förhållande på minst 4,5:1 för vanlig text och 3:1 för stor text. WebAIM:s kontrastkontroll räknar ut det för vilka två färger som helst.

På en enfärgad yta räcker en kontroll. På en gradient eller ett foto ändras bakgrunden under varje ord, så kontrollera den ljusaste punkten bakom ljus text och den mörkaste punkten bakom mörk text. Det är där text fallerar först. Färgkontrast och tillgänglighet går djupare in på standarderna.

Detaljer: varför stökiga bakgrunder är svåra att läsa

Kontrast är nödvändig men inte tillräcklig. En bakgrund full av detaljer i samma storlek som bokstäverna gör läsningen svår även när förhållandet klarar kravet, eftersom ögat inte kan skilja bokstävernas former från formerna bakom. Löv, grus, folkmassor, fina ränder och små mönster är de värsta syndarna. Stora, mjuka former är bäst: en himmel, en suddig vägg, en jämn gradient.

Textur går bra när dess korn är mycket mindre än bokstäverna, som filmkorn eller papperskorn. Den blir ett problem när texturens detaljer närmar sig storleken på strecken i din text. Om du älskar ett mönster, skala upp det tills dess former är tydligt större än bokstäverna, eller håll det borta från orden. Text på stökiga bakgrunder går igenom mönster mer ingående, och läsbar text på foton tar upp bilder.

Tonomfång: ljusa och mörka fläckar under en rad

Den tredje egenskapen är den som överrumplar folk. Om en enda textrad korsar både en ljus och en mörk fläck kan ingen enskild textfärg fungera: vit försvinner på den ljusa delen och svart på den mörka. En bra bakgrund för text håller ett smalt tonomfång under varje rad, antingen helt ljust eller helt mörkt.

Så testar du vilken bakgrund som helst för text

1. 1

   Kisa

   Blunda halvt. Detaljerna bleknar och bara tonen återstår. Om orden löses upp i bakgrunden är kontrasten för låg.

2. 2

   Sudda ut den

   Lägg en kraftig oskärpa på en kopia av enbart bakgrunden. Det som återstår under textytan är den ton som bokstäverna egentligen vilar på.

3. 3

   Se den i gråskala

   Färg kan lura dig att tro att kontrasten är bra. Gråskala visar bara ljushet, vilket är det läsbarheten beror på.

4. 4

   Kontrollera ytterligheterna

   Mät kontrasten vid de ljusaste och mörkaste punkterna bakom orden, inte medelvärdet.

5. 5

   Titta på den i en mobil

   På en armlängds avstånd, i dagsljus, i den storlek som folk faktiskt ser den.

Åtgärda en bakgrund som kämpar mot texten

De flesta åtgärder lägger till något: en ruta, en skugga, ett mörkt band. De fungerar, men var och en är en lapp som får designen att se räddad ut. Prova åtgärderna i den här ordningen, från minst synliga till mest synliga.

På webben är en mild gradienttäckning på ena sidan av en hero-bild en respektabel version av den femte åtgärden: den fördjupar bara området under orden och lämnar resten av bilden ifred.

.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 in de minst synliga åtgärderna i själva bakgrunden. En Mark vet var dina ord finns: dess lugnaste område med bäst kontrast flyttas bakom texten, färger nära bokstäverna fördjupas eller lyfts, stökiga detaljer slappnar av och Auto-bläck väljer ljus eller mörk text för varje rad ur Markens palett. Det finns inga rutor, skuggor eller oskärpa, och du väljer hur starkt den reagerar. Så fungerar Auto-bläck förklarar detaljerna, och text på en gradient ger den manuella metoden för vilken gradient som helst.