# Text över bild: sju sätt att hålla orden läsbara

[Canonical HTML page](https://gradiently.design/sv/guide/text-over-image)

Ett foto som ser fantastiskt ut för sig själv kan sluka vilken rubrik du än lägger på det. De här sju teknikerna håller orden läsbara utan att gömma bilden bakom en ruta.

## The short version

- Text över en bild är läsbar när ytan direkt bakom bokstäverna är lugn och tydligt ljusare eller mörkare än texten.
- Den snabbaste lösningen är ofta en bättre beskärning som lägger orden över himmel, vägg, skugga eller en annan lugn del av fotot.
- En toning (scrim), en mjuk gradient från mörk till genomskinlig bakom texten, håller orden läsbara och lämnar det mesta av fotot orört.
- Duoton, oskärpa och färgade toningar lugnar ett stökigt foto så att texten kan ligga var som helst på det.
- Kontrollera kontrasten där texten faktiskt ligger och sikta på minst 4.5:1 för normal text och 3:1 för stor text.

**Text över bild** förblir läsbar när ytan direkt bakom bokstäverna är lugn och tydligt ljusare eller mörkare än texten. Sju tekniker tar dig dit: beskär så att orden hamnar på en lugn yta, lägg på en toning, tona fotot, gör det oskarpt, rama in texten, välj textfärg efter ljushet och placera orden där ögat redan vilar. De flesta bra designer kombinerar två av dem, och ingen kräver en ogenomskinlig ruta över fotot.

Samma problem uppstår med gradienter och mönstrade bakgrunder; [text på gradient](https://gradiently.design/sv/guide/text-on-gradient) och [text på stökiga bakgrunder](https://gradiently.design/sv/guide/type-on-busy-backgrounds) täcker de fallen. Den här guiden handlar om foton.

## Därför försvinner text på foton

Två saker gör bokstäver svårlästa på en bild: låg kontrast och detaljer. Låg kontrast betyder att bokstäverna ligger för nära i ljushet det som finns bakom dem, som vit text över en ljus himmel. Detaljer betyder att bakgrunden har kanter och strukturer i samma skala som bokstäverna, som löv, folkmassor eller tyg, så att ögat inte kan skilja det ena från det andra. Varje teknik nedan minskar det ena eller båda.

Ett stående inlägg där rubriken löper över den stökigaste delen av en färgstark bakgrund och är svår att läsa

Orden rakt över en stökig yta: ljusstyrka och detaljer konkurrerar med bokstäverna.

Samma stående inlägg med bakgrunden lugnad och fördjupad bakom rubriken så att den läses tydligt

Samma design med en lugnare yta med bättre kontrast bakom orden.

## Sju tekniker för läsbar text över bilder

### 1. Beskär till en lugn yta

Innan du lägger till något flyttar du fotot. De flesta foton har en lugn region: himmel, en vägg, vatten, skugga, en suddig bakgrund. Beskär eller flytta så att orden hamnar där. Det är den enda tekniken som inte lägger till något, vilket är varför den ser renast ut. När du fotograferar för en design lämnar du det utrymmet med avsikt.

### 2. Lägg på en toning (scrim)

En toning, på engelska scrim, är en mjuk gradient från mörk till genomskinlig som läggs bara där texten ligger, oftast längst ner eller längst upp i bilden. Den gör ytan bakom orden mörkare och tonar ut innan den når motivet, så det mesta av fotot ser orört ut. Det är standardtekniken för kort, hero-bilder och videominiatyrer.

```css
.photo-card {
  position: relative;
  isolation: isolate;
}

.photo-card img {
  position: relative;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim: dark at the bottom, clear by 60% up. */
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.72) 0%,
    rgb(0 0 0 / 0.38) 30%,
    rgb(0 0 0 / 0) 60%
  );
}

.photo-card h2 {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 1.5rem;
  color: #fff;
  text-wrap: balance;
}
```

En toning i botten med tre stopp, så att övergången inte får någon synlig kant. Håll den mörkaste punkten under orden, inte över hela bilden.

### 3. Tona fotot: duoton eller en färgton

Att mappa ett foto till två färger (en [duoton](https://gradiently.design/sv/guide/duotone-effect)) eller lägga en enda färgton över det pressar ihop dess ljushetsomfång. Fotot blir lugnare och jämnare, och text i en kontrasterande färg läses var som helst på det. Det för också in foton i dina varumärkesfärger, vilket är användbart när bilderna kommer från många källor.

- Skuggbläck: #1b1340
- Högdagerpersika: #f7c7a3
- Text på skugga: #ffffff
- Text på högdager: #1b1340

Ett duotonspar och dess två textfärger. Eftersom fotot bara innehåller toner mellan de två läses vitt på den mörka halvan och djup färg på den ljusa halvan.

### 4. Gör det oskarpt bakom orden

Oskärpa tar bort de fina detaljer som slåss med bokstäverna och behåller fotots färg och ljus. Gör hela bilden oskarp för en mjuk bakgrund, eller bara ett band bakom texten. Använd så mycket oskärpa att kanterna försvinner; lite oskärpa ser bara ut som ett misstag. [Suddiga bakgrunder](https://gradiently.design/sv/guide/blurred-background) går igenom hur mycket du ska använda.

### 5. Rama in texten

Ibland är det rätta svaret en fri yta: ett band av enfärgat, en panel eller en delad layout med fotot på ena sidan och orden på den andra. Det är ärligt och alltid läsbart. Hämta ramens färg från fotot så att den hör till bilden i stället för att täcka den.

### 6. Välj textfärg efter ljushet

Välj mellan ljus och mörk text efter ljusheten hos ytan bakom den, inte efter den färg du gillar. Kontrollera sedan: sikta på minst 4.5:1 för normal text och 3:1 för stor text, [WCAG:s kontrastnivåer](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). Ta prov på de ljusaste och mörkaste pixlarna bakom bokstäverna och testa båda med ett verktyg som [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/). En mjuk skugga, till exempel `text-shadow: 0 1px 12px rgb(0 0 0 / 0.45)`, kan hjälpa liten text, men den kan inte rädda en dålig beskärning.

### 7. Placera orden där ögat vilar

Lägg texten där fotot leder ögat: längs en horisont, i det utrymme en person tittar in i, eller mitt emot motivet. Undvik att placera ord över ansikten, händer eller produkten, och håll dem borta från kanter som plattformar täcker med knappar eller beskär på vissa skärmar.

## Vilken teknik som passar vilket foto

| Foto | Första val | Reserv |
| --- | --- | --- |
| Tydlig lugn yta, som himmel eller vägg | Beskär till den | Lätt toning för extra marginal |
| Stökigt överallt, som folkmassor eller lövverk | Duoton eller färgton | Gör hela bilden oskarp |
| Motiv överst, detaljer längst ner | Toning i botten | Ram med ett färgband |
| Ljust och kontrastrikt | Mörk text över den ljusaste ytan | Färgton som pressar ihop omfånget |
| Många foton som måste se enhetliga ut | Samma ton för alla | Samma toning för alla |

Börja med det lindrigaste ingreppet som fungerar, och kombinera två bara när ett inte räcker.

### Undvik

- En ogenomskinlig ruta slängd mitt över fotot
- Kraftiga konturer eller sken runt varje bokstav
- Text över ett ansikte eller produkten
- Att bara kontrollera kontrasten på designytan

### Gör så

- Beskär först, lägg sedan till så lite som möjligt
- En mjuk toning som tonar ut före motivet
- Ord i det utrymme fotot lämnar
- Att kontrollera i verklig storlek på en mobil

## Håll text över bilder enhetlig i ett helt varumärke

När flera personer gör inlägg väljer du en eller två tekniker och skriver ner dem: till exempel en toning i botten med fast styrka för varje fotoinlägg och en duoton i varumärkesfärger för citat. I Gradiently Studio kan foton beskäras och tonas i Markens färger som mono, duoton eller en färgton, så att fotoinlägg hamnar i samma familj som resten av dina designer. Skriv ner regeln i din [varumärkesstilguide](https://gradiently.design/sv/guide/brand-style-guide).

## FAQ

### Hur gör man text läsbar över en bild?

Lägg orden över en lugn yta med stark kontrast. Beskär först till en lugn del av fotot, lägg sedan till en toning, en färgton eller oskärpa vid behov, och välj ljus eller mörk text efter ljusheten bakom.

### Vad är en scrim i design?

En scrim är en mjuk gradient från mörk (eller ljus) till genomskinlig som läggs bakom text på en bild. Den förbättrar kontrasten där orden ligger och lämnar det mesta av fotot synligt.

### Vilken kontrast kräver text över en bild?

WCAG kräver minst 4.5:1 för normal text och 3:1 för stor text. På foton kontrollerar du de ljusaste och mörkaste punkterna bakom bokstäverna, inte ett genomsnitt.

### Räcker en textskugga för att göra text läsbar?

Sällan ensam. En mjuk skugga hjälper liten text att skilja sig från bakgrunden, men en lugn beskärning, en toning eller en färgton gör det mesta av jobbet.