• Hakukoneoptimoinnin koulutus
  • Arttu Raittila
  • Yhteystiedot

Nettibisnes.Info

Koulutus ja vinkit hakukoneoptimointiin

Näin teet luettavaa tekstiä mustalle taustavärille

11.2.2007

Mustia web-sivuja tekevät eivät aina huomioi tarpeeksi tekstin luettavuutta. Tämä on sääli, koska musta voisi olla saavutettavuudeltaan paras taustaväri.

Joissakin näkövammaisuuden muodoissa on nimittäin helpointa lukea valkoista tekstiä mustalta pohjalta. Usein mustissa designeissa esiintyy kuitenkin kaksi käytettävyys- ja saavutettavuus-ongelmaa:

  1. Käytetään vain hiukan vaaleahkoa tekstin väriä, jolloin kontrasti ei ole riittävä.
  2. Fontti on liian laiha: normaalin paksuiset kirjaimet ”hukkuvat” helposti mustaan taustaväriin, toisin kuin valkoiseen.

Pieni kontrasti tekee lukemisesta tuskaa

Seuraava ruudunkaappaus on saksalaiselta sivustolta, jonka smashing magazine nosti esimerkilliseksi ”web 2.0 -designin” edustajaksi taannoisessa artikkelissaan:

Lukukelvotonta tekstiä mustalla taustavärillä

Joillakin monitoreilla ylläoleva teksti on lukukelvotonta pienen kontrastin vuoksi.

Web-suunnittelija saattaa unohtaa, että eri näyttölaitteet tuottavat erilaisen kontrastin ja värimaailman.

Joiltakin CRT-monitoreilta katsottuna monet mustan taustavärin sivut ovat lukukelvottomia ilman fonttikoon roimaa suurennusta. Käyttäjä ei välttämättä jaksa käyttää aikaa tekstin suurentamiseen vaan yksinkertaisesti poistuu ja siirtyy sivuille, joita hän voi lukea suoraan ja helposti.

Paras tekstin väri mustalla taustalla onkin hyvin vaalea –  ei kuitenkaan täysin valkoinen koska se voi aiheuttaa päänsärkyä joillekin lukijoille. Jos haluaa tyylikkyyssyistä käyttää pienempää kontrastia, voi käyttäjälle tarjota vaihtoehtoisen korkean kontrastin tilan, esimerkiksi hieman tämäntapaisen systeemin (Large-Type/Hi-contrast -linkki oikealla ylhäällä).

Lihavointi ja normaali teksti eivät ole ainoat vaihtoehdot

CSS:n font-weight-määrityksellä voidaan korjata liian ohut fontti luettavammaksi. Font-weight-arvo 400 vastaa normaalia tekstiä, 700 lihavoitua (sama vaikutus kuin HTML-elementillä <b> tai <strong>). Nämä eivät ole kuitenkaan ainoat vaihtoehdot: välissä ovat arvot 500 ja 600.

Tämän tekstin font-weight on 400 eli normaali.

Tämän tekstin font-weight on 500.

Tämän tekstin font-weight on 600.

Tämän tekstin font-weight on 700 eli lihavoitu.

Tämän tekstin font-weight on 900 eli virallisesti suurin.

Väliarvojen 500 ja 600 käyttäytyminen riippuu käytettävästä selaimesta, fontista ja fontin koosta. Joskus väliarvot tuottavat jopa paksumpaa tai leveämpää tekstiä kuin 700:n ja 900:n font-weightin fontit! Jos siis haluaa käyttää jotakin normaalin ja lihavoidun välissä olevaa fontin paksuutta, on vaikutukset syytä tutkia huolellisesti eri selaimilla ja tyylitiedostossa käytettävän font-familyn jäsenillä.

Myös sanojen ja kirjainten välejä voidaan säätää

CSS tarjoaa pari muutakin keinoa tekstin helppolukuisuuden lisäämiseen: sanojen välistä tilaa voidaan kasvattaa word-spacing-ominaisuudella, ja kirjainten väliseen tilaan tepsii letter-spacing.

Tässä tekstissä letter-spacing on 0.08em ja word-spacing 0.12em. Font-weight on 700. Rivin korkeus eli CSS:n line-height on 1.7 (kerroin). Pienikin teksti mustalla taustavärillä saadaan helpommin luettavaksi käyttämällä CSS:n tarjoamia mahdollisuuksia.

Kommentoi

Artikkelin tiedot

Arttu Raittila

  • Kirjoittaja: Arttu Raittila
  • Aihe: Käytettävyys, Web-suunnittelu
  • Tagit: css, fontti, kontrasti, saavutettavuus, taustaväri
  • 1 kommenttia »

Tutustu aiheisiin

  • Blogit (8)
  • Hakukoneoptimointi (19)
  • Internet-mainonta (9)
  • Käytettävyys (8)
  • Konversio-optimointi (4)
  • Liiketoimintamallit (4)
  • Sosiaalinen media (9)
  • Verkkokirjoittaminen (3)
  • Web-analytiikka (2)
  • Web-suunnittelu (7)
  • Ylläpito (7)

Vilkaise ainakin nämä

  • Hakukoneoptimointi
  • Blogin kirjoittaminen
  • Linkkipyydys
  • Verkkokirjoittaminen haltuun nopeasti

© 2006-2016 Arttu Raittila - artikkelit