# Automaattinen muste: vaalea tai tumma teksti joka riville

[Canonical HTML page](https://gradiently.design/fi/guide/auto-ink-legibility)

Liukuväri on yhdestä kohdasta vaalea ja toisesta tumma, joten yksi tekstiväri ei sovi kaikkialle. Automaattinen muste päättää riveittäin, ja Mark auttaa taustalla.

## The short version

- Automaattinen muste on Gradientlyn asetus, joka valitsee kullekin tekstiriville vaalean tai tumman musteen sen mukaan, kumpi erottuu paremmin suoraan sen takana olevasta Markista.
- Molemmat musteet tulevat Markin omasta paletista, joten teksti kuuluu taustaan eikä vaihdu oletuksena puhtaan valkoiseksi tai mustaksi.
- Tekstin voi myös lukita vaaleaan tai tummaan musteeseen, kun haluat yhden värin taustasta riippumatta.
- Automaattinen muste toimii yhdessä Markin reaktion kanssa. Se rauhoittaa materiaalia sanojen takana tasoilla Pois, Huomaamaton, Hienovarainen, Selkeä ja Rohkea.
- Kumpikaan ei käytä laatikoita, varjoja tai sumennusta, ja päätät itse Markin reaktion voimakkuuden.

**Automaattinen muste** on Gradientlyn tapa valita tekstin väri. Jokaisella Automaattinen-tilaan asetetulla rivillä se tarkastelee suoraan takana olevaa Markin osaa ja valitsee siinä paremmin erottuvan vaalean tai tumman musteen. Molemmat tulevat Markin omasta paletista. Vaaleassa kulmassa otsikko muuttuu tummaksi, tumman kaistan päällä kuvateksti vaaleaksi, ja molemmat näyttävät silti samalta brändiltä.

## Miksi yksi tekstiväri ei toimi liukuvärillä

Tasaisella taustalla valitset tekstivärin kerran. Liukuväri muuttuu matkan varrella: tarinan yläosa voi olla lähes valkoinen ja alaosa lähes musta. Alhaalla kauniisti erottuva valkoinen teksti katoaa ylhäällä, ja pitkä otsikko voi ulottua molempiin. Tämä on [liukuväritaustan tekstin](https://gradiently.design/fi/guide/text-on-gradient) ydinongelma. Tavalliset korjaukset, tekstilaatikot ja varjot, peittävät juuri valitsemasi taustan.

Studion myynnistä kertova pystytarina, jossa tekstiväri erottuu huonosti liukuvärin vaaleista ja tummista kohdista

Yksi kiinteä väri muuttuvalla taustalla: osa tekstistä kilpailee materiaalin kanssa.

Sama studion myyntitarina, riveillä parhaiten erottuva vaalea tai tumma muste ja sanojen takana rauhallisempi materiaali

Automaattinen muste ja reagoiva Mark: kukin rivi saa erottuvan musteen, ja materiaali rauhoittuu sen takana.

## Miten Automaattinen muste valitsee vaalean tai tumman

Jokaisella Markilla on paletistaan poimittu vaalea ja tumma muste: vaalea ja syvä sävy, jotka kuuluvat sen väreihin. Kun rivi on Automaattinen-tilassa, Gradiently mittaa materiaalin rivin peittämältä alueelta ja antaa sille paremmin erottuvan musteen. Siirrä tekstiä, niin valinta seuraa mukana. Muuta suunnitelma tarinaksi tai banneriksi, jossa valo osuu eri kohtaan, niin jokaisen rivin väri valitaan uudelleen.

- Vaalea muste: #fbf3ea
- Persikkavalo: #e9a27c
- Roosan keskisävy: #9c4f6b
- Luumun varjo: #3b1f3f
- Tumma muste: #1a0f1f

Esimerkkipaletti, jonka päissä ovat Markin kaksi mustetta. Niissä on Markin omaa lämpöä, eivätkä ne ole puhtaan valkoisia ja mustia.

Periaate on sama kuin verkon saavutettavuusohjeiden kontrastimittauksessa: verrataan tekstin vaaleutta taustan vaaleuteen. Tässä periaate muutamalla koodirivillä, jos rakennat vastaavaa verkkoon.

```js
// Relative luminance of an sRGB colour, as defined in WCAG
function luminance([r, g, b]) {
  const c = [r, g, b].map((v) => {
    v /= 255
    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
}

const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

// Pick whichever ink contrasts more with the colour behind the line
function pickInk(behind, lightInk, darkInk) {
  return contrast(behind, lightInk) >= contrast(behind, darkInk) ? lightInk : darkInk
}

pickInk([156, 79, 107], [251, 243, 234], [26, 15, 31]) // the light ink
```

Vain periaate, ei Gradientlyn oma koodi. Todellinen tausta vaihtelee rivin alla, joten on mitattava koko tausta-alue eikä yksittäistä pikseliä.

Lukuina WCAG edellyttää leipätekstille vähintään kontrastisuhdetta 4,5:1 ja suurelle tekstille 3:1. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) selittää suhteet, ja [WebAIMin kontrastitarkistimella](https://webaim.org/resources/contrastchecker/) voit testata minkä tahansa parin.

## Automaattinen, vaalea ja tumma: kolme mustetilaa

| Tila | Mitä se tekee | Milloin käyttää |
| --- | --- | --- |
| Automaattinen | Valitsee riville vaalean tai tumman musteen sen taustan mukaan | Lähes aina: otsikot, tiedot ja kuvatekstit muuttuvalla taustalla |
| Vaalea | Käyttää aina Markin vaaleaa mustetta | Tummalla Markilla, kun haluat kaikki rivit samanvärisiksi esimerkiksi lainauskortissa |
| Tumma | Käyttää aina Markin tummaa mustetta | Vaalealla, paperimaisella Markilla tai painossa, kun haluat yhden yhtenäisen musteen |

Teksti alkaa Automaattinen-tilassa. Voit vaihtaa rivin kiinteään musteeseen tekstin väriasetuksissa ja palauttaa sen toiminnolla Takaisin automaattiseen musteeseen.

Voit silti värittää tekstin millä tahansa brändipaketin tai Markin paletin värillä. Automaattinen muste on oletus, koska se toimii edelleen suunnitelman siirtyessä toiseen kokoon.

## Miten Mark auttaa taustalla

Oikean musteen valinta on puolet työstä. Toinen puoli on tausta. Mark tietää sanojen paikan: sen rauhallisin, kontrastiltaan paras alue siirtyy tekstin taakse, kirjainten lähellä värit syvenevät tai vaalenevat ja levottomat yksityiskohdat rauhoittuvat. Koko mekanismi selitetään artikkelissa [tekstiin mukautuva tausta](https://gradiently.design/fi/guide/text-reacts-to-background). Automaattinen muste valitsee musteen rauhoittuneelle alueelle, joten nämä vahvistavat toisiaan.

| Reaktio | Mitä sanojen takana tapahtuu |
| --- | --- |
| Pois | Materiaali ei huomioi sanojasi |
| Huomaamaton | Vain tarvittaessa, kenenkään huomaamatta |
| Hienovarainen | Tasapainoinen: ilme säilyy ja sanat erottuvat |
| Selkeä | Sanat ovat aina etusijalla |
| Rohkea | Suurin mahdollinen kontrasti ja hieman laajempi rauhallinen alue |

Suunnitelman reaktiotasot materiaalin muuttumattomuudesta suurimpaan sen tarjoamaan kontrastiin.

Esiasetusten lisäksi voit hienosäätää neljää asiaa: **Sävy** määrittää, kuinka paljon materiaali muuttuu sanojen takana kontrastin lisäämiseksi. **Rauhoitus** vähentää vääristymää ja levottomuutta. **Taipuma** taivuttaa kuviota hieman sanojen reunalla. **Ulottuvuus** määrää, kuinka kauas sanojen ympärille reaktio ulottuu. Päätät voimakkuuden, joten juliste voi pysyä villinä ja menu rauhallisena.

## Mitä Automaattinen muste välttää tarkoituksella

### Vältä

- Peittävää laatikkoa jokaisen rivin takana
- Varjoja, jotka sumentavat kirjainten reunat
- Taustan sumennusta tekstin takana
- Puhtaan valkoista tekstiä vaaleassa kulmassa

### Tee näin

- Anna jokaiselle riville erottuva muste
- Anna Markin rauhoittaa aluetta sanojen takana
- Säilytä musteet Markin omassa paletissa
- Nosta reaktiotasoa pienelle tai pitkälle tekstille

Laatikot ja varjot toimivat, mutta näkyvät selvästi ja peittävät taustan. [Tekstivarjon vaihtoehdot](https://gradiently.design/fi/guide/text-shadow-alternatives) kertoo miksi. [Teksti levottomalla taustalla](https://gradiently.design/fi/guide/type-on-busy-backgrounds) tarjoaa lisää tapoja pitää sanat luettavina ilman niitä.

## Näin saat Automaattisesta musteesta eniten irti

1. **Pidä teksti Automaattinen-tilassa** Lukitse rivi vaaleaksi tai tummaksi vain erityisestä syystä, kuten painettujen kuvien yhtenäistämiseksi.
2. **Valitse tehtävään sopiva reaktio** Hienovarainen sopii useimpiin somejulkaisuihin. Valitse Selkeä tai Rohkea pienelle tekstille, pitkille tiedoille tai kaukaa luettavaan sisältöön.
3. **Tarkista jokainen koko** Katso jokainen formaatti koon muuttamisen jälkeen. Muste valitaan kussakin uudelleen, mikä on yleensä toivottavaa.
4. **Pidä otsikot lyhyinä** Markin vaaleimmasta tummimpaan osaan kulkeva rivi on hankala millä tahansa musteella. Jaa se kahdeksi riviksi.

## FAQ

### Mikä on Gradientlyn Automaattinen muste?

Tekstin väriasetus, joka valitsee jokaiselle riville Markin vaalean tai tumman musteen sen mukaan, kumpi erottuu paremmin rivin takana olevasta taustan osasta.

### Voinko poistaa Automaattisen musteen käytöstä?

Kyllä. Aseta rivi käyttämään aina vaaleaa tai tummaa mustetta tai valitse sille haluamasi väri. Takaisin automaattiseen musteeseen palauttaa asetuksen.

### Lisääkö Automaattinen muste varjoja tai laatikoita tekstin taakse?

Ei. Se muuttaa vain tekstiväriä. Mark itse rauhoittaa aluetta sanojen takana ilman laatikoita, varjoja tai sumennusta.

### Mikä kontrastisuhde tekstillä tulisi olla taustaan nähden?

WCAG edellyttää vähintään 4,5:1 leipätekstille ja 3:1 suurelle tekstille.

### Miksi tekstiväri muuttui suunnitelman koon muuttamisen jälkeen?

Uudessa koossa valo osuu eri kohtaan. Automaattinen muste valitsee musteen uudelleen joka riville, jotta teksti pysyy luettavana.