# Luettava teksti valokuvan päällä ilman laatikkoa

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

Yhtenäinen laatikko otsikon takana toimii, mutta tekee julkaisuista meemin näköisiä. Näillä keinoilla kuva säilyy ehjänä ja sanat selkeinä. Mukana verkkokoodi ja somejulkaisujen asetukset.

## The short version

- Varmin tapa saada teksti luettavaksi valokuvan päällä on sijoittaa sanat kuvan rauhallisimpaan ja tasaisimpaan kohtaan.
- Liukuvärikerros, joka vaihtuu läpinäkyvästä tummaksi kuvan reunalla, antaa tekstille kontrastia ilman näkyvää laatikkoa.
- Kuvan sävyttäminen yhdellä tai kahdella värillä vähentää kontrastia ja yksityiskohtia, jolloin päällä oleva teksti on helpompi lukea.
- Suuri ja vahva teksti kestää levottoman valokuvan paljon paremmin kuin ohut tai pieni teksti.
- Valokuvan päälläkin tekstin on täytettävä kontrastisuositukset: noin 4,5:1 pienelle tekstille ja 3:1 suurille otsikoille.

**Luettava teksti valokuvan päällä** ilman laatikkoa alkaa sijoittelusta: etsi tai luo kuvan rauhallisin alue ja aseta sanat siihen. Jos se ei riitä, lisää **liukuvärikerros**, joka vaihtuu läpinäkyvästä tummaksi yhdellä reunalla. Vähennä sitten kuvan kontrastia sävyttämällä ja kasvata lopuksi tekstin vahvuutta ja kokoa. Tässä järjestyksessä käytettyinä keinot säilyttävät kuvan ehjänä ja sanat selkeinä. Laatikko on viimeinen keino.

Tämä opas keskittyy laatikottomaan toteutukseen. Kaikki menetelmät, myös laatikot, nauhat ja irrotetut kuvat, löytyvät oppaasta [teksti kuvan päällä](https://gradiently.design/fi/guide/text-over-image).

## Miksi teksti katoaa valokuvaan

Teksti tarvitsee vaaleuseron kirjainten ja taustan välille. Valokuvan vaaleus vaihtelee jatkuvasti: valkoinen paita tumman oviaukon vieressä, lehdet taivasta vasten. Kun kirjain ylittää vaalean ja tumman rajan, osa siitä katoaa. Pienet yksityiskohdat pahentavat tilannetta, sillä silmä ei erota kirjaimen reunaa taustan tekstuurista.

Pystyjulkaisu, jonka otsikko kulkee levottoman, epätasaisen taustan yli ja osa kirjaimista on vaikea lukea

Ongelma Mark-taustalla: levottoman alueen päälle asetetuista sanoista katoaa kirjaimia, kun tausta vaalenee.

Sama pystyjulkaisu, jossa otsikon takana on rauhallisempi ja tasaisempi alue ja jokainen sana on luettavissa

Samat sanat rauhallisella, tasaisella taustalla. Tähän pyritään hyvin valitulla rajauksella. Ei laatikkoa, ja jokainen kirjain erottuu.

## Kuusi keinoa parantaa tekstin luettavuutta valokuvalla

### 1. Valitse ja rajaa kuva tyhjää tilaa varten

Paras korjaus tehdään ennen ensimmäistä sanaa. Valitse kuva, jossa on tyhjä alue: taivasta, seinä, pöytäpinta tai sumea tausta. Rajaa se niin, että alue osuu otsikon kohdalle. Pystyjulkaisussa 1080×1350 voit siirtää kohdetta alas ja jättää ylimmän kolmanneksen rauhalliseksi. Kuvaa tätä ajatellen, jos voit: astu taakse ja jätä tilaa kohteen yläpuolelle. [Teksti levottomilla taustoilla](https://gradiently.design/fi/guide/type-on-busy-backgrounds) käsittelee vastaavasti toimivia kuvioita ja tekstuureja.

### 2. Lisää liukuvärikerros

Liukuvärikerros asetetaan kuvan päälle. Se on tumma tekstin kohdalla reunassa ja häipyy täysin läpinäkyväksi. Silmä tulkitsee häivytyksen valon vähenemiseksi eikä muodoksi. Rajaa kerros tekstin sisältävään kolmannekseen ja käytä kuvasta poimittua tummaa sävyä puhtaan mustan sijaan.

- Alareunan kerros, lämmin musta: `linear-gradient(0deg, #0c0a09d9 0%, #0c0a0973 30%, #0c0a0900 60%)`
- Yläreunan kerros, laivastonsininen: `linear-gradient(180deg, #0f172acc 0%, #0f172a00 45%)`
- Sivukerros vasemmalle tekstille: `linear-gradient(90deg, #1c1917d9 0%, #1c19174d 40%, #1c191700 65%)`

Kolme liukuvärikerrosta erillään. Kuvan päällä kukin tummentaa vain tekstialueen ja häipyy ennen kohdetta.

### 3. Sävytä valokuva

Kuvan sävyttäminen yhdellä tai kahdella värillä kaventaa vaaleiden ja tummien vaihteluväliä. Teksti erottuu silloin helpommin kaikkialla. Tumma kaksisävytys, kuten syvästä sinisestä pehmeään liilaan, toimii erityisen hyvin valkoisen tekstin takana. [Duotone-tehoste](https://gradiently.design/fi/guide/duotone-effect) näyttää toteutuksen. Sävytys myös yhtenäistää erilaisia kuvia saman brändin näköisiksi.

### 4. Tummenna tai vaalenna paikallisesti

Useimmissa kuvankäsittelyohjelmissa voi vähentää valotusta tai huippuvaloja yhdeltä alueelta. Kirkkaan taivaan tummentaminen yhdellä aukolla juuri otsikon takaa riittää usein. Muutosta ei huomaa näkemättä alkuperäistä.

### 5. Tee tekstistä tukevampi

Ohut ja pieni teksti katoaa ensimmäisenä. Käytä semibold- tai bold-vahvuutta, suurenna kokoa ja avaa pienten rivien kirjainväliä hieman. Vahva päätteetön fontti koossa 110 px kestää valokuvalla, jolla ohut päätteellinen fontti koossa 70 px ei toimi. [Lihavoidut fontit](https://gradiently.design/fi/guide/bold-fonts) listaa luotettavia vaihtoehtoja.

### 6. Aseta kuva sanojen viereen

Joskus toimivin ratkaisu on välttää päällekkäisyyttä. Rajaa kuva ympyrään, kaareen tai puoleen kuvasta ja aseta sanat viereiselle tasaiselle tai liukuväriselle pinnalle. Kuva säilyy ehjänä ja teksti saa täydellisen kontrastin.

## Mikä menetelmä sopii mihinkin kuvaan

| Kuva | Aloita tästä | Sitten |
| --- | --- | --- |
| Selkeä taivas tai tasainen seinä | Sijoittelu | Muuta ei tarvita |
| Kohde keskellä, levottomat reunat | Vapauta yksi reuna rajaamalla | Liukuvärikerros sille reunalle |
| Levoton kaikkialla: väkijoukko, tori, lehvästö | Sävytys tai duotone | Vahvempi teksti |
| Kirkas, vaalea tuotekuva | Tumma teksti vaaleimpaan kohtaan | Vähennä huippuvaloja paikallisesti |
| Yö tai tumma sisätila | Valkoinen teksti tummimpaan kohtaan | Kevyt liukuvärikerros, jos valot osuvat sanoihin |
| Yksityiskohtainen kuva, jota et voi muuttaa | Kuva sanojen viereen | Yhteinen väri yhdistämään ne |

Aloita vähiten näkyvästä keinosta ja lopeta heti, kun pieninkin tekstirivi on luettava.

## Liukuvärikerroksen lisääminen kuvaan CSS:llä

Verkkosivulla kerrosta liukuväri ja kuva samaan `background`-määritykseen. Liukuväri tulee ensin, jolloin se on päällä. Tehoste pysyy CSS:ssä ja mukautuu asettelun tekemiin rajauksiin.

```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 */
}
```

Kansikuvan alareunan liukuvärikerros ja tumma varaväri, jotta teksti erottuu jo ennen kuvan latautumista.

Tarkista tulos kontrastisuosituksilla: noin 4,5:1 tavalliselle tekstille ja 3:1 suurille otsikoille, kuten [WebAIMin kontrastiopas](https://webaim.org/articles/contrast/) kertoo. Testaa sanojen takainen vaalein kohta, älä keskiarvoa. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) selittää luvut.

## Vältettävät virheet valokuvan päälle asetetussa tekstissä

### Vältä

- Hehkuja tai sumeita haloja jokaisen kirjaimen ympärillä
- Raskasta mustaa kerrosta koko kuvan päällä
- Ohutta käsialafonttia yksityiskohtaisella taustalla
- Tekstin asettamista kasvojen päälle
- Huonon rajauksen korjaamista yhä vahvemmilla tehosteilla

### Suosi

- Pehmeää liukuvärikerrosta vain yhdellä reunalla
- Sävytystä, joka säilyttää kuvan tunnelman
- Vahvaa fonttia reilussa koossa
- Sanoja kohteen vieressä olevassa tilassa
- Uutta rajausta tai toista kuvaa

Halot ja hehkut kirjainten ympärillä ovat tavallisin pelastusyritys ja halvimman näköinen. Ne sumentavat kirjainten reunat, vaikka lukeminen tarvitsee terävyyttä. Jos harkitset niitä, lue ensin [tekstivarjot ja paremmat vaihtoehdot](https://gradiently.design/fi/guide/text-shadow-alternatives).

Gradientlyssä kuvia voi sävyttää Markin väreillä yksivärisesti, duotonena tai väripesuna. Ne voi rajata kaariin, ympyröihin ja epäsäännöllisiin muotoihin sanojen viereen. Kun Mark näkyy designissa, se siirtää rauhallisimman alueensa tekstin taakse. Automaattinen muste valitsee vaalean tai tumman tekstin kullekin riville ilman laatikoita, varjoja tai sumennusta.

## FAQ

### Miten saan tekstin erottumaan levottomasta valokuvasta?

Sijoita se rauhallisimpaan kohtaan, lisää reunaan pehmeä liukuvärikerros, vähennä kuvan kontrastia sävyttämällä ja käytä suurempaa, vahvempaa tekstiä.

### Mikä on scrim suunnittelussa?

Scrim on liukuvärikerros, joka tummentaa tai vaalentaa osaa kuvasta ja häipyy läpinäkyväksi. Näin sen päälle asetettu teksti saa riittävästi kontrastia.

### Kannattaako tekstivarjoa käyttää valokuvan päällä?

Pehmeä hehku tai halo näyttää yleensä halvalta ja sumentaa kirjaimia. Sijoittelu, liukuvärikerros tai sävytys tuottaa siistimmän tuloksen.

### Millaisen kontrastin valokuvan päällä oleva teksti tarvitsee?

Pyri noin 4,5:1-kontrastiin tavallisessa tekstissä ja 3:1-kontrastiin suurissa otsikoissa. Mittaa sanojen takaisesta vaaleimmasta kohdasta.