Tekstin värikontrastin päivittäminen
Kaikkien tulisi kyetä lukemaan tekstiäsi.
On tärkeää, että teksti on hyvin näkyvä ja luettava. Jos haluat kävijöiden ymmärtävän jonkin asian, heidän on ensin pystyttävä lukemaan se.
Tekstin hyvä kontrasti varmistaa, että kaikki pystyvät näkemään tekstin ja erottamaan sen taustastaan.
Eri ihmiset näkevät värit eri tavoin. WCAG on sisällyttänyt WCAG 2.2 AA -ohjeisiin erityiset kontrastivaatimukset, joiden tarkoitus on varmistaa, että tekstit ovat kaikkien luettavissa. Voit korjata tai ennaltaehkäistä kontrastiongelmia noudattamalla näitä vaatimuksia sekä kontrastin parhaita käytäntöjä.
Ally hyödyntää näitä kontrastivaatimuksia tarkistaessaan, että tekstin värin ja taustavärin välinen kontrasti on riittävän suuri. Tekstin heikko kontrasti on suuri ongelma. Suuret ongelmat ovat helppokäyttöisyysongelmia, jotka eivät ole vakavia, mutta jotka edellyttävät silti toimia.
Heikkokontrastisten tekstien etsiminen Allyn avulla
Allyn helppokäyttöisyysraportti auttaa löytämään ja korjaamaan sivuston helppokäyttöisyysongelmia. Napsauta raportin linkkiä ja kirjaudu sisään. Avaa raportti ja katso Helppokäyttöisyysongelmat-taulukon ongelmaluetteloa.
Helppokäyttöisyysongelmat-taulukko näkyy sekä Yleiskatsaus- että Ala-välilehdissä. Aloita Ala-välilehdestä ja katso, onko siinä mitään toimialakohtaisia ongelmia.
Tekstin heikko kontrasti on suuri ongelma. Helppokäyttöisyysongelmat-taulukon Suuri-välilehdessä on luettelo suurista ongelmista. Valitse kontrastiin liittyvät ongelmat.
Jos aloitat Yleiskatsaus-välilehdestä, valitse ensin ongelma ja sitten ala, jolla ongelma ilmenee.
Kontrastiin liittyvät ongelmat voivat alkaa luettelossa sanalla Asiakirja tai HTML.
Valitse alan kontrastiin liittyvien ongelmien luettelosta ongelmallisen kohteen vieressä oleva helppokäyttöisyysarvon ilmaisin. Sisältöeditorin palautepaneeli avautuu.
Heikkokontrastisen tekstin esikatseleminen
Allyn palautepaneelissa voit esikatsella sisältöä sekä saada yksityiskohtaista palautetta ja ohjeita helppokäyttöisyysongelmien korjaamiseen. Etsi heikkokontrastiset tekstit käyttämällä esikatselutoimintoa.
Asiakirjassa voi olla esikatselukorostuksia, jotka osoittavat, missä tietyt helppokäyttöisyysongelmat esiintyvät. Korostukset näyttävät kerrallaan yhden ongelmatyypin kaikki esiintymät. Jos esimerkiksi tekstin kontrasti on heikko, korostukset osoittavat jokaisen kohdan, joissa tämä nimenomainen ongelma ilmenee.
Esikatselutyökalut
Esikatselutyökalujen avulla voit selata asiakirjassa olevia ongelmia.
- Käy esikatselu läpi sivu kerrallaan.
- Selvitä, montako kertaa tietty ongelma ilmenee.
- Voit siirtyä korostetusta ongelmasta suoraan seuraavaan.
- Voit piilottaa tai näyttää korostukset.
- Voit suurentaa tai pienentää esikatselun sisältöä.
- Jos ongelma on liitetiedostossa, lataa alkuperäinen tiedosto.
Heikon kontrastin korjaaminen Allyn ohjeiden avulla
Ally olettaa, että tunnet HTML-koodauksen perusteet ja osaat käyttää tarvittavaa sisällönhallintajärjestelmää (CMS). Ohjeiden seuraaminen edellyttää, että osaat muokata verkkosivuja HTML-muodossa tai muokata lähdekoodia käyttämässäsi sisällönhallintajärjestelmässä.
Lisäksi Ally olettaa, että sinulla on oikeudet päivittää verkkosivuston värejä. Värit on usein määritelty sivuston tyylioppaassa, ja ne voivat liittyä brändäykseen. Tutustu sivuston tyylioppaaseen ennen kuin teet mitään muutoksia.
Esikatselun lisäksi Ally antaa vaiheittaiset ohjeet ongelman korjaamiseen. Ally järjestää tämän palautteen päätöspuuksi, joten sinun tarvitsee vain lukea ohjeet ja reagoida kehotteisiin. Selvitä, mikä on ongelmana, miksi se on merkityksellinen ja miten asian voi korjata oikein.
Saat vaiheittaiset ohjeet valitsemalla Kontrastin korjaaminen.
Eri tapoja korjata kontrastiongelmia
Kun tekstin kontrasti on heikko, se tarkoittaa, että tekstin ja sen taustan välinen värikontrasti on liian pieni.
Allyn ohje kertoo, miten voit vaihtaa tekstin värin. Voit myös vaihtaa taustavärin.
Tutustu sivuston tyylioppaaseen ennen kuin teet mitään muutoksia. Värit liittyvät usein brändäykseen, ja kaikkia muutoksia on harkittava tarkoin.
Allyn ohjeissa kuvataan myös, miten voit muokata yksittäisten verkkosivujen HTML-koodia. Sisällönhallintajärjestelmät eroavat toisistaan. Joissakin sisällönhallintajärjestelmissä on tekstimuotoilueditori (Rich Text Editor, RTE) , jonka työkalut voivat helpottaa tekstin muotoilemista. Tekstimuotoilueditorilla voit valita valmiiksi määritetyn tyylin otsikoille, väreille, fonteille, kuville ja niin edelleen. Kaikissa sisällönhallintajärjestelmissä ei kuitenkaan ole tekstimuotoilueditoria, vaan lähdekoodia on muokattava HTML-muodossa. Joskus sekä tekstimuotoilueditori että HTML-koodin muokkaus ovat käytettävissä.
Toistuvat kontrastiongelmat voivat vaatia mallin päivittämistä. Mallin päivittäminen edellyttää jonkinasteista HTML-koodin ja CSS-tyylien tuntemusta ja malli voi olla kytketty sivuston brändäykseen.
w3schools -sivustolla voit perehtyä tarkemmin HTML-koodiin ja CSS-tyyleihin.
HEX- ja RGB-värit
HEX ja RGB ovat kaksi erilaista tapaa määritellä värejä.
- RGB-järjestelmässä väri määritellään sen sisältämän punaisen (R), vihreän (G) ja sinisen (B) määrän perusteella. Esimerkiksi tietty punaisen sävy voidaan kuvata RGB-muodossa arvoilla (253, 2, 2).
- HEX on heksadesimaalijärjestelmä, jossa väri määritellään muodostamalla sen punaisen, vihreän ja sinisen arvoista kuusi kirjainta tai numeroa sisältävä koodi. Heksadesimaalilukujen alussa on joko numero tai risuaitasymboli (#). Esimerkiksi edellä mainittua punaisen sävyä vastaava heksadesimaaliluku on #fd0202.
Heksadesimaaliluvut ovat yleisin tapa määrittää värejä verkkosivuilla.
Tekstin kontrastin parhaat käytännöt
Voit parantaa tekstin luettavuutta monilla helpoilla muutoksilla.
- Käytä fontteja, joilla on leveä merkkiväli.
- Käytä vähintään 12 pisteen fonttikokoa. Jos käytät fonttia, jolla on ohut merkkiväli, käytä vähintään fonttikokoa 16.
- Käytä tällaisia ohuita fontteja vain tummilla taustoilla.
- Käytä vaaleaa tekstiä tummalla taustalla.
- Käytä tummaa tekstiä vaalealla taustalla.
- Vältä seuraavia väriyhdistelmiä:
- vihreä ja punainen
- vihreä ja ruskea
- sininen ja violetti
- vihreä ja sininen
- vaaleanvihreä ja keltainen
- sininen ja harmaa
- vihreä ja harmaa
- vihreä ja musta.
Etkö ole varma, onko tekstiesi kontrasti riittävä? Käytä Paciello Groupin värikontrastianalysaattoria sisältösi tarkistamiseen.
Miksi tekstin kontrastilla on merkitystä?
Tekstin, jonka kontrasti on heikko, lukeminen voi olla vaikeaa monissa tilanteissa, esimerkiksi seuraavissa:
- Tekstin lukeminen voi olla vaikeaa, kun sitä heijastetaan.
- Tekstin lukeminen voi olla vaikeaa värisokeille opiskelijoille.
- Tekstin lukeminen voi olla vaikeaa mobiililaitteella kirkkaassa valossa tai silloin, kun näyttö heijastaa.
- Tekstin lukeminen voi olla vaikeaa heikkolaatuisilla näytöillä.
Heikko kontrasti voi rasittaa silmiä, vaikeuttaa sisällön löytämistä ja silmäilyä sekä aiheuttaa turhautumista.
Hyvän kontrastin ansiosta kaikki näkevät tekstin selkeästi ja voivat nauttia paremmin kokonaiskokemuksesta sisältöäsi lukiessasi.
