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

[Canonical HTML page](https://gradiently.design/sv/guide/gradient-background-for-text)

Vissa bakgrunder bär ord utan ansträngning och andra kämpar mot varje bokstav. Skillnaden handlar om tre egenskaper som du kan kontrollera på en minut.

## The short version

- En bra bakgrund för text har tre egenskaper där orden sitter: tillräcklig kontrast, lite finstilta detaljer och ett smalt tonomfång.
- WCAG kräver ett kontrastförhållande på minst 4,5:1 för vanlig text och 3:1 för stor text.
- Detaljer av ungefär samma storlek som bokstäverna, som lövverk, folkmassor eller stökiga mönster, skadar läsningen mer än färg gör.
- Att kisa åt en design, sudda ut den eller se den i gråskala visar snabbt om textytan är lugn nog.
- Att flytta orden till en lugnare del av bakgrunden är oftast bättre än att lägga en ruta eller skugga bakom dem.

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](https://webaim.org/resources/contrastchecker/) räknar ut det för vilka två färger som helst.

| Text | Bakgrund | Kontrastförhållande | Utlåtande |
| --- | --- | --- | --- |
| Vit `#ffffff` | Djup indigo `#1e1b4b` | 16:1 | Utmärkt i alla storlekar |
| Vit `#ffffff` | Violett `#7c3aed` | 5,7:1 | Godkänt för brödtext |
| Vit `#ffffff` | Skiffer `#64748b` | 4,8:1 | Precis godkänt |
| Vit `#ffffff` | Rosa `#f472b6` | 2,6:1 | Underkänt, även för stor text |
| Nästan svart `#1a1a1a` | Rosa `#f472b6` | 6,6:1 | Godkänt: samma rosa, mörkare bläck |
| Vit `#ffffff` | Orange `#fb923c` | 2,3:1 | Underkänt |

Verkliga förhållanden för vanliga kombinationer. Klara rosa, orangea, gula och ljusa blågröna toner behöver mörk text, hur rätt vit text än känns på dem.

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](https://gradiently.design/sv/guide/color-contrast-accessibility) 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.

- Jämn: bär text väl: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- Ett mjukt ljus: orden lågt till vänster: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Fina ränder: kämpar mot varje bokstav: `repeating-linear-gradient(45deg, #1e1b4b 0px, #1e1b4b 6px, #7c3aed 6px, #7c3aed 12px)`
- Små ringar: oläsligt: `repeating-radial-gradient(circle at 50% 50%, #4c1d95 0px, #4c1d95 4px, #c4b5fd 4px, #c4b5fd 9px)`

Samma två färger på fyra sätt. De två översta bär ord lätt, de två nedersta har detaljer i bokstävernas skala och gör all text till en kamp.

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](https://gradiently.design/sv/guide/type-on-busy-backgrounds) går igenom mönster mer ingående, och [läsbar text på foton](https://gradiently.design/sv/guide/readable-text-on-photos) 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.

Ett stående inlägg där rubriken löper över ljusa och mörka områden i en gradient och delar av den är svåra att läsa

Rubriken korsar ljusa och mörka delar av bakgrunden, så en del bokstäver försvinner oavsett bläckfärg.

Samma inlägg med ett lugnt, jämnt tonat område av gradienten bakom rubriken så att varje bokstav går att läsa

Samma bakgrund med ett jämnt, djupare område bakom orden. Nu fungerar en bläckfärg för varje bokstav.

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

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. **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. **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. **Kontrollera ytterligheterna** Mät kontrasten vid de ljusaste och mörkaste punkterna bakom orden, inte medelvärdet.
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.

### Prova först

- Flytta orden till den lugnaste delen av bakgrunden
- Beskär eller flytta bakgrunden så att ett lugnt område ligger bakom dem
- Byt bläck: mörk text på ljusa områden, ljus på mörka
- Gör texten större och tyngre
- Fördjupa eller lyft bakgrunden bara kring orden

### Använd sparsamt

- Enfärgade rutor eller band bakom text
- Slagskuggor på bokstäver
- Konturer runt bokstäver
- Kraftig oskärpa över hela bilden
- En mörk täckning över hela bakgrunden

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.

```css
.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;
}
```

Fördjupar vänstra sidan, där rubriken sitter, och tonar ut till ingenting vid 70 procent. Kontrollera kontrasten vid den ljusaste punkten bakom texten.

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](https://gradiently.design/sv/guide/auto-ink-legibility) förklarar detaljerna, och [text på en gradient](https://gradiently.design/sv/guide/text-on-gradient) ger den manuella metoden för vilken gradient som helst.

## FAQ

### Vilken är den bästa bakgrundsfärgen för text?

Vilken färg som helst som kontrasterar starkt mot texten, minst 4,5:1 för vanlig text. Mycket ljusa eller mycket mörka bakgrunder är enklast, medan klara mellantoner som rosa, orange och gult behöver mörk text.

### Vilket kontrastförhållande behöver text?

WCAG kräver minst 4,5:1 för vanlig text och 3:1 för stor text.

### Varför är min text svår att läsa trots att kontrasten klarar kravet?

Bakgrunden har förmodligen detaljer nära bokstävernas storlek, eller ljusa och mörka fläckar under samma rad. Flytta orden till ett lugnare, jämnare område.

### Hur gör jag text läsbar på en stökig bakgrund?

Flytta först orden till det lugnaste området eller ändra bildutsnittet. Om det inte går, fördjupa eller lyft bara området bakom texten och använd rutor eller skuggor som sista utväg.

### Är vit eller svart text lättare att läsa på färg?

Det beror på färgens ljushet. Mörka färger behöver vit text, medan ljusa och klara färger oftast läses bättre med nästan svart.