Tekstin tausta: mikä tekee sanoista helppolukuisia

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 laskee suhteen kahdelle värille.

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

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 käsittelee kuvioita, luettava teksti valokuvissa 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.

Testaa mikä tahansa tekstitausta

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

   Sumenna

   Sumenna voimakkaasti kopio pelkästä taustasta. Tekstialueen alle jäävä väri on sävy, jolla kirjaimet todella ovat.

3. 3

   Katso harmaasävyinä

   Väri voi saada kontrastin tuntumaan riittävältä. Harmaasävy näyttää vain vaaleuden, josta luettavuus riippuu.

4. 4

   Tarkista ääripäät

   Mittaa kontrasti sanojen takaa vaaleimmasta ja tummimmasta kohdasta, älä keskiarvosta.

5. 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.

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.

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

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 kertoo yksityiskohdat, ja teksti liukuvärillä opastaa käsin tehtävän menetelmän.