# Så gör du text läsbar på foton utan ruta bakom

[Canonical HTML page](https://gradiently.design/sv/guide/readable-text-on-photos)

En enfärgad ruta bakom rubriken fungerar, men den får varje inlägg att se ut som en meme. De här teknikerna håller fotot helt och orden tydliga, med kod för webben och inställningar för inlägg i sociala medier.

## The short version

- Det säkraste sättet att göra text läsbar på foton är att placera orden över bildens lugnaste och jämnaste yta.
- En gradientskugga, en mjuk övergång från genomskinligt till mörkt vid en kant av fotot, ger texten kontrast utan en synlig ruta.
- Att tona ett foto i en eller två färger sänker dess kontrast och detaljrikedom, vilket gör all text ovanpå lättare att läsa.
- Tyngre, större text klarar ett rörigt foto mycket bättre än tunn eller liten text.
- Text över foton bör fortfarande uppfylla kontrastriktlinjerna, ungefär 4,5 till 1 för liten text och 3 till 1 för stora rubriker.

För att **göra text läsbar på foton** utan att lägga den i en ruta börjar du med placeringen: hitta eller skapa bildens lugnaste yta och sätt orden där. Räcker inte det lägger du på en **gradientskugga**, en mjuk övergång från klart till mörkt längs en kant, sänker sedan fotots egen kontrast med en tonad färg och gör till sist texten tyngre och större. I den ordningen håller de fotot intakt och orden tydliga. En ruta är en sista utväg, inte en startpunkt.

Den här sidan handlar särskilt om metoden utan ruta. För alla tekniker, inklusive rutor, band och frilagda former, se [text över bild](https://gradiently.design/sv/guide/text-over-image).

## Varför text försvinner på foton

Text behöver en skillnad i ljushet mellan bokstäverna och det som ligger bakom. Ett foto ändrar ljushet hela tiden: en vit skjorta intill en mörk dörröppning, löv mot himmel. Där en bokstav går från ljust till mörkt försvinner en del av den. Fina detaljer gör det värre, eftersom ögat inte kan skilja bokstavens kant från texturen bakom.

Ett stående inlägg där rubriken går över en rörig, ojämn bakgrund och delar av bokstäverna är svåra att läsa

Problemet på en Mark-bakgrund: ord som läggs rakt över en rörig yta tappar bokstäver där grunden blir ljus.

Samma stående inlägg med en lugnare, jämnare yta bakom rubriken så att varje ord går att läsa

Samma ord med en lugn, jämn yta bakom, den effekt du vill ha av en väl vald beskärning. Ingen ruta, och varje bokstav går att läsa.

## Sex sätt att göra text läsbar på foton

### 1. Välj och beskär för negativt utrymme

Den bästa lösningen sker innan du skrivit ett ord. Välj foton med en tom yta: himmel, en vägg, en bordsskiva, en suddig bakgrund. Beskär sedan så att ytan hamnar där rubriken ska stå. Ett stående inlägg i 1080×1350 ger dig utrymme att skjuta motivet nedåt och lämna den övre tredjedelen lugn. Fota för det om du kan: ta ett steg bakåt och lämna plats ovanför motivet. [Text på rörig bakgrund](https://gradiently.design/sv/guide/type-on-busy-backgrounds) tar upp mönster och texturer som beter sig som röriga foton.

### 2. Lägg på en gradientskugga

En gradientskugga är en gradient som läggs över fotot, mörk vid den kant där texten står och tonar ut till helt klart. Eftersom den tonar ut läser ögat den som ljus som avtar snarare än som en form. Håll den till den tredjedel av bilden som rymmer orden, och använd en mörk ton hämtad ur fotot i stället för ren svart.

- Nedre skugga, varmsvart: `linear-gradient(0deg, #0c0a09d9 0%, #0c0a0973 30%, #0c0a0900 60%)`
- Övre skugga, marinblå: `linear-gradient(180deg, #0f172acc 0%, #0f172a00 45%)`
- Sidoskugga, för text till vänster: `linear-gradient(90deg, #1c1917d9 0%, #1c19174d 40%, #1c191700 65%)`

Tre skuggor var för sig. Lagda över ett foto mörkar var och en bara ytan som rymmer orden och tonar ut före motivet.

### 3. Tona fotot

Att tona ett foto i en eller två färger smalnar av dess spann mellan ljust och mörkt, så texten ovanpå får det lättare överallt. En mörk duoton, till exempel djupblått till mjuk syren, fungerar särskilt bra bakom vit text; [duotoneffekt](https://gradiently.design/sv/guide/duotone-effect) visar hur du bygger en. Gradient får också en blandad samling foton att se ut att höra till ett och samma varumärke.

### 4. Mörka eller ljusa upp lokalt

De flesta bildredigerare låter dig sänka exponeringen eller högdagrarna i ett område. Att dra ner en ljus himmel ett steg, precis bakom rubriken, räcker ofta i sig och syns inte för den som inte sett originalet.

### 5. Gör texten kraftigare

Tunn, liten text är först att försvinna. Använd halvfet eller fet vikt, gå upp en storlek och öppna bokstavsavståndet något på små rader. Ett kraftigt sans på 110 px håller över ett foto där ett lätt serif på 70 px aldrig gör det. [Feta typsnitt](https://gradiently.design/sv/guide/bold-fonts) listar pålitliga typsnitt.

### 6. Lägg fotot bredvid orden

Ibland är det ärliga svaret att inte överlappa alls. Beskär fotot till en cirkel, en båge eller halva ytan och sätt orden på en enfärgad eller tonad grund bredvid. Fotot förblir helt och orden får perfekt kontrast.

## Vilken teknik som passar vilket foto

| Foto | Börja med | Sedan |
| --- | --- | --- |
| Klar himmel eller slät vägg | Placering | Inget mer behövs |
| Motiv i mitten, rörig kant | Beskär för att frigöra en kant | Gradientskugga på den kanten |
| Rörigt överallt (folkmassa, marknad, grönska) | Gradient eller duoton | Tyngre text |
| Ljus produktbild med hög nyckel | Mörk text i den ljusaste ytan | Sänk högdagrarna lokalt |
| Natt eller mörkt inomhusrum | Vit text över den mörkaste ytan | Lätt skugga om ljus korsar orden |
| Detaljrikt foto du inte kan ändra | Fotot bredvid orden | En gemensam färg som binder ihop dem |

Börja med den minst synliga tekniken och sluta så fort den minsta raden går att läsa.

## Så lägger du en gradientöverlagring på en bild i CSS

På en webbplats lägger du skuggan och fotot i samma `background`-deklaration. Gradienten kommer först så att den hamnar överst. Då stannar effekten i CSS och anpassar sig till varje beskärning som layouten gör.

```css
.hero {
  min-height: 70vh;
  display: grid;
  align-items: end;
  padding: 4rem;
  color: #fafaf9;
  background:
    linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%),
    url("/images/terrace.jpg") center / cover no-repeat;
  background-color: #1c1917; /* fallback while the image loads */
}
```

En nedre skugga över ett omslagsfoto, med en mörk reservfärg så att texten går att läsa innan bilden hunnit komma.

Kontrollera resultatet mot kontrastriktlinjerna: ungefär 4,5 till 1 för vanlig text och 3 till 1 för stora rubriker, så som det beskrivs i [WebAIM:s kontrastguide](https://webaim.org/articles/contrast/). Testa den ljusaste punkten bakom orden, inte genomsnittet. [Färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) förklarar siffrorna.

## Misstag att undvika med text på foton

### Undvik

- Sken eller suddiga glorior kring varje bokstav
- Ett tungt svart överlägg över hela fotot
- Tunn skrivstil över en detaljrik scen
- Text som går tvärs över ett ansikte
- Att rädda en dålig beskärning med allt starkare effekter

### Föredra

- En mjuk skugga på bara en kant
- En ton som behåller fotots stämning
- En kraftig vikt i generös storlek
- Ord i utrymmet bredvid motivet
- Att beskära om, eller välja ett annat foto

Glorior och sken runt bokstäver är det vanligaste räddningsförsöket och det som ser billigast ut. De suddar ut bokstävernas kanter, vilket är raka motsatsen till vad läsning behöver. Är du frestad, läs [textskuggor och bättre alternativ](https://gradiently.design/sv/guide/text-shadow-alternatives) först.

I Gradiently kan foton tonas i Markens färger som mono, duoton eller en lavering, och beskäras till bågar, cirklar och blobbar som sitter bredvid orden. På designer där Marken lyser igenom flyttar den sin lugnaste yta bakom texten och automatisk textfärg väljer ljus eller mörk text för varje rad, utan rutor, skuggor eller oskärpa.

## FAQ

### Hur får jag text att synas på ett rörigt foto?

Placera den över den lugnaste ytan, lägg på en mjuk gradientskugga på den kanten, tona fotot för att sänka kontrasten och använd en tyngre, större vikt.

### Vad är en gradientskugga i design?

En gradientskugga är ett gradientöverlägg som mörkar eller ljusar en del av en bild och tonar ut till klart, så att text som placeras där får tillräcklig kontrast.

### Ska jag använda textskugga för att göra text läsbar på ett foto?

Ett mjukt sken eller en gloria ser oftast billigt ut och suddar ut bokstäverna. Placering, en gradientskugga eller en tonad färg ger renare resultat.

### Vilken kontrast behöver text på ett foto?

Sikta på ungefär 4,5 till 1 för vanlig text och 3 till 1 för stora rubriker, mätt vid den ljusaste punkten bakom orden.