# Tekstin tausta: mikä tekee sanoista helppolukuisia

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

Jotkut taustat kantavat sanat vaivatta, toiset taistelevat joka kirjainta vastaan. Ero syntyy kolmesta ominaisuudesta, jotka tarkistat minuutissa.

## The short version

- Hyvässä tekstin taustassa on sanojen kohdalla kolme ominaisuutta: riittävä kontrasti, vähän pieniä yksityiskohtia ja kapea sävyalue.
- WCAG edellyttää vähintään 4,5:1-kontrastisuhdetta tavalliselle tekstille ja 3:1 suurikokoiselle tekstille.
- Kirjainten kokoiset yksityiskohdat, kuten lehdet, ihmisjoukot ja levottomat kuviot, haittaavat lukemista väriä enemmän.
- Siristely, sumentaminen tai harmaasävykatselu paljastaa nopeasti, onko tekstialue riittävän rauhallinen.
- Sanojen siirtäminen rauhallisempaan taustan kohtaan on yleensä parempi kuin laatikko tai varjo niiden takana.

Hyvä **tekstin tausta** tarjoaa sanojen kohdalla kolme asiaa: vahvan kontrastin kirjaimiin, hyvin vähän pieniä yksityiskohtia ja tasaiset sävyt vaaleiden ja tummien laikkujen sijaan. Värillä on luultua vähemmän merkitystä. Violetti liukuväri voi kantaa tekstin upeasti ja harmaa valokuva pilata sen näiden ominaisuuksien mukaan. Opas auttaa arvioimaan minkä tahansa valokuvan, liukuvärin tai tekstuurin sekä korjaamaan huonosti toimivan taustan.

## Kontrasti: ensimmäinen ominaisuus

Kontrasti tarkoittaa kirjainten ja niiden välittömän taustan vaaleuseroa. Verkkosisällön saavutettavuusohjeet asettavat mitattavan rajan: vähintään 4,5:1 tavalliselle ja 3:1 suurikokoiselle tekstille. [WebAIMin kontrastilaskuri](https://webaim.org/resources/contrastchecker/) laskee suhteen kahdelle värille.

| Teksti | Tausta | Kontrastisuhde | Arvio |
| --- | --- | --- | --- |
| Valkoinen `#ffffff` | Syvä indigo `#1e1b4b` | 16:1 | Erinomainen kaikissa koissa |
| Valkoinen `#ffffff` | Violetti `#7c3aed` | 5,7:1 | Riittää leipätekstille |
| Valkoinen `#ffffff` | Liuskeenharmaa `#64748b` | 4,8:1 | Juuri riittävä |
| Valkoinen `#ffffff` | Vaaleanpunainen `#f472b6` | 2,6:1 | Ei riitä edes suurelle tekstille |
| Lähes musta `#1a1a1a` | Vaaleanpunainen `#f472b6` | 6,6:1 | Riittää: sama vaaleanpunainen, tummempi muste |
| Valkoinen `#ffffff` | Oranssi `#fb923c` | 2,3:1 | Ei riitä |

Tavallisten yhdistelmien todelliset suhteet. Kirkkaat vaaleanpunaiset, oranssit, keltaiset ja vaaleat sinivihreät tarvitsevat tumman tekstin, vaikka valkoinen tuntuisi sopivalta.

Tasaiselle värille riittää yksi tarkistus. Liukuvärissä tai valokuvassa tausta muuttuu sanojen alla: tarkista vaalein kohta vaalean tekstin takana ja tummin tumman tekstin takana. Näissä teksti katoaa ensin. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) syventää standardeja.

## Yksityiskohdat: miksi levotonta taustaa on vaikea lukea

Kontrasti on välttämätön mutta ei riittävä. Kirjainten kokoisia yksityiskohtia täynnä oleva tausta vaikeuttaa lukemista, vaikka kontrastisuhde riittäisi: silmä ei erota kirjainmuotoja taustan muodoista. Lehdet, sora, ihmisjoukot, ohuet raidat ja pienet kuviot ovat pahimpia. Suuret pehmeät muodot, kuten taivas, sumea seinä ja tasainen liukuväri, toimivat parhaiten.

- Tasainen: kantaa tekstin hyvin: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- Pehmeä valo: sanat alas vasemmalle: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Ohuet raidat: häiritsevät kirjaimia: `repeating-linear-gradient(45deg, #1e1b4b 0px, #1e1b4b 6px, #7c3aed 6px, #7c3aed 12px)`
- Pienet renkaat: lukukelvoton: `repeating-radial-gradient(circle at 50% 50%, #4c1d95 0px, #4c1d95 4px, #c4b5fd 4px, #c4b5fd 9px)`

Samat kaksi väriä neljällä tavalla. Ylempi pari kantaa sanat helposti; alemmassa yksityiskohdat ovat kirjainten kokoisia ja vaikeuttavat kaikkea tekstiä.

Tekstuuri toimii, kun sen rakeet ovat kirjaimia paljon pienempiä, kuten filmirae tai paperin karheus. Ongelmia tulee, kun piirteet lähestyvät tekstin viivojen kokoa. Suurenna rakastamasi kuvio selvästi kirjaimia suuremmaksi tai pidä se poissa sanojen takaa. [Teksti levottomalla taustalla](https://gradiently.design/fi/guide/type-on-busy-backgrounds) käsittelee kuvioita, [luettava teksti valokuvissa](https://gradiently.design/fi/guide/readable-text-on-photos) kuvia.

## Sävyalue: vaaleat ja tummat laikut samalla rivillä

Kolmas ominaisuus yllättää monet. Jos yksi tekstirivi ylittää sekä vaalean että tumman laikan, mikään yksittäinen tekstiväri ei toimi: valkoinen katoaa vaaleaan ja musta tummaan. Hyvä tekstitausta pitää jokaisen rivin sävyalueen kapeana, kokonaan vaaleana tai kokonaan tummana.

Pystyjulkaisu, jonka otsikko kulkee liukuvärin vaaleiden ja tummien alueiden yli ja on osin vaikealukuinen

Otsikko kulkee vaaleiden ja tummien alueiden yli, joten osa kirjaimista katoaa musteen väristä riippumatta.

Sama julkaisu, otsikon takana rauhallinen tasainen liukuvärialue ja kaikki kirjaimet luettavina

Sama tausta, sanojen takana tasainen syvempi alue. Yksi musteväri toimii nyt kaikille kirjaimille.

## Testaa mikä tahansa tekstitausta

1. **Siristä** Sulje silmät puoliksi. Yksityiskohdat häviävät ja sävyt jäävät. Jos sanat sulautuvat taustaan, kontrasti on liian pieni.
2. **Sumenna** Sumenna voimakkaasti kopio pelkästä taustasta. Tekstialueen alle jäävä väri on sävy, jolla kirjaimet todella ovat.
3. **Katso harmaasävyinä** Väri voi saada kontrastin tuntumaan riittävältä. Harmaasävy näyttää vain vaaleuden, josta luettavuus riippuu.
4. **Tarkista ääripäät** Mittaa kontrasti sanojen takaa vaaleimmasta ja tummimmasta kohdasta, älä keskiarvosta.
5. **Katso puhelimella** Kädenmitan päästä päivänvalossa ja todellisessa katselukoossa.

## Korjaa tekstin kanssa kilpaileva tausta

Useimmat korjaukset lisäävät jotakin: laatikon, varjon tai tumman kaistan. Ne toimivat, mutta näyttävät paikkausratkaisuilta. Kokeile korjauksia tässä järjestyksessä huomaamattomimmasta näkyvimpään.

### Kokeile ensin

- Siirrä sanat taustan rauhallisimpaan kohtaan
- Rajaa tai siirrä taustaa, jotta sanojen taakse tulee rauhallinen alue
- Vaihda muste: tumma teksti vaaleaan, vaalea tummaan
- Suurenna ja vahvista tekstiä
- Syvennä tai vaalenna taustaa vain sanojen ympäriltä

### Käytä säästeliäästi

- Peittäviä laatikoita tai kaistoja tekstin takana
- Heittovarjoja kirjaimissa
- Kirjainten ääriviivoja
- Voimakasta koko kuvan sumennusta
- Tummaa peittokerrosta koko taustan päällä

Verkossa pehmeä liukuvärikerros pääkuvan toisella puolella on siisti versio viidennestä korjauksesta: se syventää vain sanojen alla olevaa aluetta ja jättää muun kuvan ennalleen.

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

Syventää otsikon alla vasenta reunaa ja häipyy kokonaan 70 prosentin kohdalla. Tarkista kontrasti tekstin takaisesta vaaleimmasta kohdasta.

Gradiently rakentaa huomaamattomat korjaukset itse taustaan. Mark tietää, missä sanat ovat: rauhallisin ja parhaiten kontrastinen alue siirtyy tekstin taakse, kirjainten lähellä värit syvenevät tai vaalenevat, levottomat yksityiskohdat rauhoittuvat ja Automaattinen muste valitsee jokaiselle riville vaalean tai tumman tekstin Markin paletista. Laatikoita, varjoja tai sumennusta ei ole, ja päätät itse reaktion voimakkuuden. [Automaattisen musteen toiminta](https://gradiently.design/fi/guide/auto-ink-legibility) kertoo yksityiskohdat, ja [teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) opastaa käsin tehtävän menetelmän.

## FAQ

### Mikä on paras taustaväri tekstille?

Mikä tahansa tekstin kanssa riittävästi kontrastoiva väri, tavalliselle tekstille vähintään 4,5:1. Hyvin vaalea tai tumma tausta on helpoin; kirkkaat välisävyt kuten vaaleanpunainen, oranssi ja keltainen tarvitsevat tumman tekstin.

### Minkä kontrastisuhteen teksti tarvitsee?

WCAG edellyttää tavalliselta tekstiltä vähintään 4,5:1 ja suurelta tekstiltä 3:1.

### Miksi teksti on vaikealukuista, vaikka kontrasti riittää?

Taustassa on luultavasti kirjainten kokoisia yksityiskohtia tai vaaleita ja tummia laikkuja samalla rivillä. Siirrä sanat rauhallisemmalle, tasaisemmalle alueelle.

### Miten teen tekstistä luettavaa levottomalla taustalla?

Siirrä ensin sanat rauhallisimpaan kohtaan tai rajaa kuva uudelleen. Jos se ei onnistu, syvennä tai vaalenna vain tekstin takainen alue ja käytä laatikoita tai varjoja viimeisenä keinona.

### Onko valkoinen vai musta teksti luettavampaa värillä?

Se riippuu värin vaaleudesta. Tumma väri tarvitsee valkoisen tekstin; vaalea ja kirkas väri toimii yleensä paremmin lähes mustalla.