Verkkosivujen värit ja fontit: näin valitset luettavat ja omannäköiset

Miten verkkosivujen värit valitaan?

Verkkosivujen värit valitaan tehtävän mukaan: pääväri tekee sivuista tunnistettavat, korostusväri ohjaa katseen painikkeisiin, tumma sävy on tekstiä varten ja vaalea taustaa varten. Lähtökohta on yrityksen ilme, mutta jokainen sävy tarkistetaan sen mukaan, toimiiko se tekstinä, painikkeena ja puhelimen ruudulla auringossa.

Moni aloittaa väärästä päästä, eli lempiväristä tai kilpailijan sivuista. Siitä syntyy sivusto, jossa väri on kaunis mutta mikään ei erotu, koska kaikki on samaa sävyä. Kun värille annetaan ensin tehtävä ja vasta sitten sävy, sivusta tulee selkeä, vaikka värit olisivat hillityt.

Jos yrityksellä on jo ilme, värit tulevat sieltä, ja verkossa ne vain sovitetaan tehtäviin. Mitä ilmeeseen kuuluu ja miten se siirretään verkkoon, on kerrottu artikkelissa yritysilmeestä ja graafisesta ohjeistosta.

Anna jokaiselle värille tehtävä

Kirjoita ennen suunnittelua lista väreistä ja niiden tehtävistä. Kun lista on olemassa, jokainen uusi sivu ja painike tehdään samoilla säännöillä, eikä sivusto ala näyttää tilkkutäkiltä.

Korostusväri on listan tärkein rivi. Kun se on varattu painikkeille, kävijä oppii jo ensimmäisellä sivulla, että tuo väri tarkoittaa toimintoa. Jos samaa väriä käytetään myös otsikoissa, taustoissa ja kuvituksessa, painike ei enää erotu mistään.

Montako väriä sivuilla saa olla?

Useimmille yrityssivuille riittää yksi pääväri, yksi korostusväri ja muutama neutraali sävy tekstiin, taustoihin ja reunoihin. Virheilmoitusten punaista tai onnistumisen vihreää ei tarvitse laskea mukaan, koska ne ovat toimintojen värejä eivätkä ilmeen värejä.

Laissa tai standardissa ei ole ylärajaa värien määrälle. Raja tulee siitä, että jokainen lisäväri heikentää muita. Kun sivulla on viisi yhtä voimakasta väriä, silmä ei tiedä, mihin katsoa, ja kävijä joutuu itse päättelemään, mikä on tärkeää.

Hyvä testi on poistaa yksi väri kokeeksi. Jos kukaan ei huomaa sen puuttumista, se ei tehnyt mitään. Jos jokin muuttuu epäselväksi, esimerkiksi painike sulautuu taustaan, väri oli tarpeellinen.

Kun yrityksen väri ei kelpaa tekstiksi

Moni yrityksen tunnusväri on kirkas: keltainen, limenvihreä, oranssi tai vaalea turkoosi. Ne toimivat hyvin logossa ja isoissa pinnoissa, mutta valkoinen teksti niiden päällä tai niiden värinen teksti valkoisella taustalla on usein liian heikko luettavaksi.

Väristä ei silti tarvitse luopua. Kirkas väri voi olla painikkeen tausta, kun tekstinä käytetään tummaa sävyä. Linkkeihin ja pieneen tekstiin tehdään saman värin tummempi versio, joka näyttää kuuluvan samaan perheeseen mutta täyttää kontrastivaatimuksen. Kävijä ei huomaa eroa, mutta hän pystyy lukemaan tekstin.

Logo on tästä poikkeus. Logon osana olevaa tekstiä kontrastivaatimus ei koske, joten logoa ei tarvitse muuttaa verkkoa varten. Muun sivuston tekstien pitää silti olla luettavia.

Mitä kontrasti tarkoittaa ja miksi sillä on väliä?

Kontrasti tarkoittaa tekstin ja taustan välistä kirkkauseroa, ja se ilmoitetaan suhdelukuna. Pienin mahdollinen arvo on 1:1, jolloin tekstiä ei erota taustasta, ja suurin 21:1, joka on musta teksti valkoisella. Mitä suurempi luku, sitä helpompi tekstiä on lukea.

Saavutettavuusohjeiston WCAG:n AA-tasolla tavallisen tekstin kontrastin pitää olla vähintään 4,5:1 ja suuren tekstin vähintään 3:1. Suureksi tekstiksi lasketaan vähintään 18 pisteen teksti tai 14 pisteen lihavoitu teksti, mikä vastaa verkossa noin 24 pikseliä tai lihavoituna noin 19 pikseliä. Arvoa ei pyöristetä, joten 4,49:1 ei riitä. Kriteerin selitys on luettavissa W3C:n sivuilla.

Kontrastilla on väliä, koska sivua ei lueta suunnittelijan näytöltä. Sitä luetaan puhelimella bussipysäkillä, vanhalla näytöllä, heikkenevällä näöllä ja himmennetyltä ruudulta akkua säästäessä. Heikko kontrasti ei estä lukemista kaikilta, mutta se hidastaa ja väsyttää monia, ja osa lähtee ennen kuin on lukenut, mitä teet.

Painikkeet, kentät ja kuvakkeet tarvitsevat myös kontrastia

Kontrastivaatimus ei koske vain tekstiä. AA-tasolla käyttöliittymän osien ja merkityksellisten grafiikoiden, kuten lomakekenttien reunojen, painikkeiden rajojen ja kuvakkeiden, kontrastin viereisiin väreihin pitää olla vähintään 3:1.

Tämä kaatuu usein lomakkeissa. Vaaleanharmaa ohut reuna valkoisella taustalla näyttää siistiltä, mutta osa kävijöistä ei näe, missä kenttä on. Sama koskee painikkeita, joissa on pelkkä ohut ääriviiva ilman täyttöä: kaunis suunnittelijan näytöllä, epäselvä puhelimella.

Kontrastin lisäksi kannattaa katsoa viivan paksuutta. Suhdeluku lasketaan väreistä, mutta hyvin ohut viiva tai kirjain näyttää käytännössä vaaleammalta kuin sama väri paksumpana.

Väri ei saa olla ainoa merkki

Väri ei saa olla ainoa tapa kertoa jotain. Jos pakollinen kenttä on merkitty vain punaisella, linkki erottuu tekstistä vain sinisenä tai kalenterin varatut ajat näkyvät vain harmaina, osa kävijöistä ei huomaa eroa lainkaan. WCAG:ssä tämä on A-tason vaatimus eli perustaso.

Korjaus on yksinkertainen: värin rinnalle tulee toinen merkki. Linkki alleviivataan, pakollinen kenttä merkitään tekstillä, virheilmoitus kertoo sanoin, mikä meni pieleen, ja varattu aika merkitään myös sanalla tai symbolilla.

Helppo tapa tarkistaa asia on ottaa sivusta kuvakaappaus ja muuttaa se mustavalkoiseksi. Jos jokin tieto katoaa kuvasta, se välitetään pelkällä värillä.

Mikä fontti on hyvä verkkosivuille?

Hyvä verkkosivujen fontti on selkeä pienessäkin koossa, sisältää kaikki tarvittavat merkit, kuten ä, ö, å ja euron merkin, tarjoaa tarvittavat painot ja on lisensoitu verkkokäyttöön. Tyylillä on vähemmän merkitystä kuin sillä, että leipätekstiä on helppo lukea puhelimella.

Selkeyden näkee muutamasta kohdasta. Pienet kirjaimet ovat riittävän korkeita suhteessa isoihin, kirjaimet a, e ja o eivät sulkeudu pienessä koossa, ja iso I, pieni l ja numero 1 erottuvat toisistaan. Sivulla, joka näyttää hintoja ja aukioloaikoja, numeroiden selkeys on yhtä tärkeää kuin kirjainten.

Ääkköset kannattaa testata heti. Osa fonteista on tehty ensisijaisesti englannille, ja niissä pisteet voivat olla huonosti sovitetut tai merkki voi puuttua kokonaan, jolloin selain lainaa sen toisesta fontista. Kirjoita testiksi lause, jossa on paljon ääkkösiä, ja katso se isona ja pienenä.

Otsikot ja leipäteksti: kaksi fonttia riittää

Useimmille sivustoille riittää kaksi fonttia, toinen otsikoille ja toinen leipätekstille, tai yksi fontti kahdella tai kolmella painolla. Otsikkofontti saa olla persoonallisempi, koska otsikot ovat isoja ja lyhyitä. Leipätekstin fontin tärkein tehtävä on olla huomaamaton.

Koolla on yhtä paljon väliä kuin fontilla. Selainten oletuskoko 16 pikseliä on hyvä alaraja leipätekstille, ja monella fontilla puhelimessa mukava koko on sitä suurempi. Riviväli ratkaisee, pysyykö silmä rivillä. Tiivis riviväli säästää tilaa mutta tekee pitkästä tekstistä raskaan.

Saavutettavuus asettaa tähän vaatimuksen, joka unohtuu usein. Sivun pitää kestää se, että käyttäjä kasvattaa omilla asetuksillaan riviväliä, kappaleväliä, kirjainväliä ja sanaväliä, eikä tekstiä saa silloin kadota tai leikkautua. Se onnistuu, kun tekstilaatikoille ei ole lukittu kiinteää korkeutta.

Fontin lisenssi ennen kuin sivut rakennetaan

Fontti on ohjelmisto, ja sen käyttöä säätelee lisenssi. Sama fontti voi olla lisensoitu tietokoneelle painotuotteita varten mutta ei verkkosivulle, tai verkkosivulle vain tiettyyn kävijämäärään asti tai vain yhteen osoitteeseen. Jos lisenssiä ei ole, ongelma tulee vastaan yleensä vasta, kun fontin tekijä tai jälleenmyyjä huomaa sen.

Avoimella lisenssillä julkaistut fontit sallivat yleensä käytön verkkosivuilla ja tiedoston lataamisen omalle palvelimelle, mutta ehdot vaihtelevat, joten lue ne. Kaupallisten fonttien verkkolisenssi on usein erillinen tuote, jonka hinta voi riippua sivuston kävijämäärästä.

Pyydä sivujen tekijältä kirjallisesti tieto siitä, mitkä fontit sivuilla on ja millä lisenssillä. Jos vaihdat myöhemmin tekijää tai sivustoa, tieto kulkee mukana, eikä kenenkään tarvitse arvata.

Oma palvelin vai ulkoinen fonttipalvelu

Fontin voi ladata sivulle ulkoisesta fonttipalvelusta tai omalta palvelimelta. Ulkoinen palvelu on helppo ottaa käyttöön, mutta silloin kävijän selain ottaa yhteyttä palvelun palvelimeen, ja palvelin näkee kävijän IP-osoitteen. IP-osoite voi olla henkilötieto, joten ratkaisulla on tietosuojapuolensa.

Asiasta on saksalainen oikeustapaus. Münchenin alueellinen tuomioistuin (Landgericht München I) katsoi tammikuussa 2022 antamassaan tuomiossa, että sivuston ylläpitäjä loukkasi kävijän oikeuksia, kun sivusto välitti kävijän IP-osoitteen Googlelle Google Fonts -fontteja ladattaessa ilman kävijän suostumusta. Tuomioistuin määräsi maksamaan kävijälle vahingonkorvausta ja totesi, ettei siirrolle ollut perustetta, koska fontteja voi käyttää myös ilman yhteyttä Googlen palvelimeen.

Tuomio ei sido Suomessa, eikä yksi tuomio kerro, miten jokainen tilanne ratkeaisi. Se kuitenkin näyttää, että ulkoisen fonttipalvelun käyttö voidaan tulkita henkilötietojen siirroksi. Jos lisenssi sallii, lataa fontit omalta palvelimelta, jolloin kävijän selain ei ota fonttien vuoksi yhteyttä kolmannen osapuolen palvelimeen. Muut sivuston ulkoiset palvelut kannattaa käydä läpi samalla ja kertoa niistä tietosuojaselosteessa.

Hidastavatko fontit sivustoa?

Fontit voivat hidastaa sivustoa, jos niitä on paljon tai ne ladataan huonosti. Jokainen fontti ja jokainen sen paino on oma tiedostonsa, ja kun sivulla on kolme fonttia neljällä painolla, selain voi joutua lataamaan toistakymmentä tiedostoa ennen kuin teksti näkyy lopullisessa muodossaan.

Hitaus näkyy kävijälle kahdella tavalla. Joko teksti on hetken näkymättömissä, jolloin sivu näyttää tyhjältä, tai teksti näkyy ensin varafontilla ja hyppää, kun oikea fontti latautuu. Hyppäys voi siirtää painikkeita ja kappaleita ja heikentää sivun vakautta mittaavaa lukua, josta kerrotaan artikkelissa Core Web Vitalsista ja PageSpeed Insightsista.

Fontit eivät silti yleensä ole sivuston suurin hidaste. Kuvat ovat useimmiten isompi ongelma, ja niiden korjaaminen tuo enemmän. Nopeuden kokonaiskuvasta kerrotaan artikkelissa verkkosivujen latausnopeudesta.

Näin fontit saadaan kevyiksi

Fontit saadaan kevyiksi muutamalla päätöksellä, jotka kannattaa tehdä jo sivuja rakennettaessa:

• Käytä vain tarvittavat painot, tavallisesti normaali ja lihavoitu.
• Käytä nykyaikaista ja pakattua WOFF2-tiedostomuotoa.
• Jos tarvitset useita painoja, harkitse muuttuvaa fonttia, jossa ne kaikki ovat yhdessä tiedostossa.
• Karsi fonttitiedostosta merkit, joita et tarvitse, mutta varmista, että ä, ö, å ja euron merkki jäävät mukaan.
• Määritä teksti näkymään heti varafontilla, jotta sivu ei näytä tyhjältä latauksen aikana.
• Valitse varafontti, jonka mittasuhteet ovat lähellä varsinaista fonttia, jotta teksti ei hypi vaihdossa.
• Lataa fontit omalta palvelimelta, jolloin selain ei avaa ylimääräistä yhteyttä toiseen palveluun.

Karsimisessa on suomenkieliselle sivustolle tyypillinen ansa. Jos fonttitiedostoon jätetään vain englannin kirjaimet, ääkköset näkyvät varafontilla, ja jokainen ä on eri fonttia kuin muu sana. Virhe näkyy heti, mutta vain jos joku katsoo suomenkielistä sivua ennen julkaisua.

Järjestelmäfontti on nopein vaihtoehto

Nopein fontti on sellainen, jota ei tarvitse ladata lainkaan. Järjestelmäfontit ovat laitteen omia fontteja, ja kun sivu käyttää niitä, teksti näkyy heti ilman yhtään fonttitiedostoa.

Hinta on se, että sivu näyttää eri laitteilla hieman erilaiselta ja muistuttaa laitteen omaa ulkoasua. Monelle yrityssivustolle se on silti hyvä ratkaisu leipätekstiin, kun otsikoissa käytetään yhtä omaa fonttia, joka tuo ilmeen näkyviin. Silloin ladattavaksi jää yksi tai kaksi tiedostoa.

Jos sivuston ilme nojaa vahvasti tiettyyn fonttiin, järjestelmäfontti ei riitä. Silloin kannattaa panostaa siihen, että oma fontti ladataan hyvin.

Näin tarkistat värit ja fontit itse

Värit ja fontit voi tarkistaa ilman erikoisosaamista, ja tarkistus kannattaa tehdä puhelimella eikä vain tietokoneella:

• Mittaa epäilyttävät väriparit ilmaisella kontrastityökalulla. Yleisimpien selainten kehittäjätyökalut näyttävät kontrastin myös suoraan.
• Avaa sivu puhelimella ulkona, näytön kirkkaus alhaalla.
• Ota kuvakaappaus, muuta se mustavalkoiseksi ja katso, katoaako jokin tieto.
• Suurenna teksti selaimessa kaksinkertaiseksi ja katso, meneekö jokin päällekkäin.
• Etsi sivulta ääkkösiä ja katso, ovatko ne samaa fonttia kuin muu teksti.
• Aja sivu nopeustestiin ja katso, montako fonttitiedostoa ladataan.

Kontrasti on vain yksi saavutettavuuden osa. Mitä muuta AA-taso vaatii tavalliselta yrityssivustolta, on koottu artikkeliin WCAG 2.1 AA käytännössä.

Yleisimmät väri- ja fonttivirheet

Samat virheet toistuvat sivustosta toiseen, ja lähes kaikki ne näkyvät vasta puhelimella:

• vaaleanharmaa leipäteksti valkoisella taustalla
• teksti valokuvan päällä ilman tummennusta, jolloin osa sanoista katoaa kuvan vaaleisiin kohtiin
• ohut fonttipaino leipätekstissä
• kirkas tunnusväri tekstinä valkoisella taustalla
• linkit, jotka erottuvat tekstistä vain värillä
• neljä fonttia ja kahdeksan painoa sivulla, joka tarvitsisi kaksi
• fontti ilman ääkkösiä tai ilman verkkolisenssiä

Kaikki nämä korjataan tyylitiedostossa kerran, ja korjaus näkyy heti jokaisella sivulla. Siksi ne kannattaa tarkistaa ennen kuin sivustoon tehdään mitään muuta.

Yhteenveto

Verkkosivujen värit valitaan tehtävien kautta: pääväri tunnistettavuuteen, korostusväri toiminnoille, tumma sävy tekstille ja vaalea taustalle. Useimmille sivustoille riittää yksi pääväri, yksi korostusväri ja muutama neutraali sävy.

Tavallisen tekstin kontrastin pitää olla vähintään 4,5:1, suuren tekstin 3:1 ja painikkeiden, kenttien ja kuvakkeiden 3:1. Väri ei saa olla ainoa tapa kertoa tietoa. Kirkas tunnusväri toimii pintana ja painikkeen taustana, ja tekstiin tehdään sen tummempi versio.

Fontiksi kelpaa selkeä, ääkköset sisältävä ja verkkokäyttöön lisensoitu fontti kahdella tai kolmella painolla. Lataa fontit omalta palvelimelta, jos lisenssi sallii, ja pidä tiedostojen määrä pienenä, niin fontit eivät hidasta sivua.