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:
- Käytetään vain hiukan vaaleahkoa tekstin väriä, jolloin kontrasti ei ole riittävä.
- 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:
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