Automaattinen muste: vaalea tai tumma teksti joka riville

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 ydinongelma. Tavalliset korjaukset, tekstilaatikot ja varjot, peittävät juuri valitsemasi taustan.

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.

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

// 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

Lukuina WCAG edellyttää leipätekstille vähintään kontrastisuhdetta 4,5:1 ja suurelle tekstille 3:1. Värikontrasti ja saavutettavuus selittää suhteet, ja WebAIMin kontrastitarkistimella voit testata minkä tahansa parin.

Automaattinen, vaalea ja tumma: kolme mustetilaa

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. Automaattinen muste valitsee musteen rauhoittuneelle alueelle, joten nämä vahvistavat toisiaan.

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

Laatikot ja varjot toimivat, mutta näkyvät selvästi ja peittävät taustan. Tekstivarjon vaihtoehdot kertoo miksi. Teksti levottomalla taustalla tarjoaa lisää tapoja pitää sanat luettavina ilman niitä.

Näin saat Automaattisesta musteesta eniten irti

1. 1

   Pidä teksti Automaattinen-tilassa

   Lukitse rivi vaaleaksi tai tummaksi vain erityisestä syystä, kuten painettujen kuvien yhtenäistämiseksi.

2. 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. 3

   Tarkista jokainen koko

   Katso jokainen formaatti koon muuttamisen jälkeen. Muste valitaan kussakin uudelleen, mikä on yleensä toivottavaa.

4. 4

   Pidä otsikot lyhyinä

   Markin vaaleimmasta tummimpaan osaan kulkeva rivi on hankala millä tahansa musteella. Jaa se kahdeksi riviksi.