« Takaisin

Saavutettavia sisältöjä verkkoon: Hyvä kontrasti parantaa tekstin luettavuutta ja kaavioiden hahmottamista

1.Tekstin ja sen taustan väri ja niiden väliset kontrastivaatimukset

Sisällön tulkinta ei saa perustua pelkästään väreihin, eli et saa kirjoittaa esimerkiksi niin, että “hyväksytyt mittaustulokset on merkitty vihreällä ja hylätyt punaisella”, sillä kaikki eivät erota niitä toisistaan. Värejä saa käyttää vain tukemaan viestiä, mutta niiden tunnistaminen ei saa olla ymmärtämisen edellytys. Esimerkkitapaus mittaustuloksista voitaisiin helposti korjata saavutettavaksi. Riittäisi, että lisätään tarvittava tieto mittaustuloksen yhteyteen ihan tekstinä (esim. hyv/hyl). Värikoodaus saisi jäädä, koska siitä olisi apua suurelle joukolle.

Tekstin ja sen taustan välinen kontrasti vaikuttavat paljon lukemisen sujuvuuteen. Kun kontrasti on hyvä, heikkonäköinen pystyy lukemaan tekstin paremmin ja muidenkaan ei tarvitse pinnistellä lukiessaan. Yleensä selviät helpoimmalla, kun käytät oletusvärejä, kunhan ne ovat saavutettavia. Jos olet epävarma käyttämäsi työkalun oletusväreistä, voit tarkistaa värien välisen kontrastin tai tarkistaa asian palvelun pääkäyttäjältä/vastuuhenkilöltä. Jos mahdollista, hän voi korjata oletusvärit tarvittaessa.

Esimerkkejä väriyhdistelmistä Oamkin väreillä

Oamkin graafisessa ohjeistuksessa annetut Oamkin värit ovat pääväri oranssi (#f7931e) ja lisäväri turkoosi (#6aa6ab), sen vaaleampi versio (#c0dbe6) ja tumma syaaninsininen (#222f3e). Jos niiden päällä käytetään valkoista tekstiä, saavutettavuudelle asetettu kontrastivaatimus täyttyy vain tumman syaaninsinisen kohdalla. Muiden Oamkin värien päällä valkoista tekstiä ei siis saisi käyttää. Musta teksti sen sijaan muodostaa riittävän kontrastin Oamkin päävärin ja vaaleampien lisävärien kanssa. (Huomaa, että logot ovat poikkeus, eli niiden kohdalla ei ole kontrastivaatimuksia: Oamkin oranssi logo valkoisella pohjalla on siis ihan ok!)

Jos käytät muita värejä kuin näitä, voit käyttää WebAIM:n palvelua väriyhdistelmän kontrastin tarkistamiseen.

Kuvan käyttäminen tekstin taustalla

Toisinaan verkkosivuilla näkyy sitäkin, että teksti on aseteltu kuvan päälle tai osaksi kuvaa. Se on sinänsä ok, kunhan teksti erottuu taustasta kunnolla. Taustakuvan olisi hyvä olla väritykseltään melko tasainen, että teksti erottuisi riittävän hyvin joka kohdassa. (Opettaja: Kiinnitä tähän erityistä huomiota, jos teet verkkokurssin Moodleen ja valitset kurssille oman kansikuvan. Tarkista, erottuuko verkkokurssin nimi riittävän hyvin kuvan päältä.)


Voit helposti tarkistaa värien välisen kontrastin ilmaisessa verkkopalvelussa

Saavutettavuusvaatimuksissa kontrastille on asetettu mitattavissa olevat vähimmäisarvot. Tekstillä ja tekstiä esittävissä kuvissa tekstin ja sen taustan välinen kontrastisuhde pitää  mukaan olla vähintään 4,5:1 (WCAG 2.1 standardin taso AA). Voit helposti tarkistaa kontrastisuhteen esim. WebAIM:n palvelussa: https://webaim.org/resources/contrastchecker/ – riittää kun annat tekstin ja taustan värin esim. hex-koodeina (esim. musta on #000000 ja valkoinen on #FFFFFF) ja palvelu ilmoittaa, täyttääkö väriyhdistelmä vaatimukset vai ei. Palvelu näyttää, läpäiseekö väriyhdistelmä AA- ja AAA-tason. Meiltä vaaditaan vähintään AA-tasoa.

Seuraavissa poikkeuksissa kontrastista voi tinkiä:

  • Isokokoisella tekstillä ja sitä esittävissä kuvissa kontrastisuhde pitää olla vähintään 3:1 (taso AA);
  • Tekstillä tai sitä esittävillä kuvilla, joilla ei ole merkitystä sivun sisällön kannalta, ei ole kontrastivaatimuksia.
  • Tekstille, joka on osa logoa, ei ole kontrastivaatimusta. (Esimerkiksi Oamkin oranssi logo valkoisella pohjalla ei täytä kontrastivaatimuksia, mutta se ei haittaa.)

Esimerkit

Musta teksti Oamkin turkoosin lisävärin päällä täyttää sekä AA- että vaativamman AAA-tason kontrastivaatimuksen. Turkoosin ja mustan välinen kontrastisuhdeluku on 7.65:1.

Valkoinen teksti Oamkin turkoosin lisävärin päällä ei täytä AA-tason kontrastivaatimusta: Valkoisen ja turkoosin välinen kontrastisuhdeluku on vain 2.74:1.


2. Värien valinta kaaviokuvissa

Erityisesti värisokeilla on haasteita erilaisten kaaviokuvien lukemisessa, jos niiden tekijä ei ole osannut ottaa huomioon värinäön ongelmia. Yksi konsti kontrastien tarkistamiselle on muuttaa kaaviokuvat mustavalkoiseksi: jos värit erottuvat toisistaan hyvin myös mustavalkoisena, tyypillisesti ne erottuvat hyvin myös värisokeiden silmin.

Kuvassa on kaksi piirakkakaavioparia: 1A & 1B sekä 2A & 2B. 1A-versiossa piirakkalohkojen väreinä ovat Oamkin oranssi ja turkoosi lisäväri. 1B-kaaviossa näkyy sama kaavio mustavalkoiseksi muutettuna, ja kontrasti on hyvin heikko. Vastaavasti 2A-kaaviossa on Oamkin oranssi ja tumma syaaninsininen. Ne muodostavat mustavalkoiseksi muutettunakin (2B) selkeän kontrastin.

Viivakaavioissa olisi hyvä käyttää ensisijaisesti erilaisia viivatyyppejä ja värejä vain tukemaan niitä. Jälleen, kaavion muuttaminen mustavalkoiseksi tarkistamisen ajaksi kertoo hyvin, onko kaavion lukeminen vaikeaa vai helppoa.

Huomaa, että kaavioissa, jossa on täyttöjä, voidaan myös käyttää erilaisia tekstuureja pelkän värin sijaan: ne ovat saavutettavuuden kannalta ihan hyvä vaihtoehto.

Kaavioiden luettavuus on muuten paras kaksiulotteisena, ilman mitään varjostuksia yms. “kikkailua”. Mitä yksinkertaisempi kaaviokuva on, sitä ymmärrettävämpi se on.

 

« Takaisin

Tämä artikkeli julkaistiin kategorioissa [:fi]saavutettava ohje[:en]accessible guideline[:], henkilöstölle, Oamk , OHJE, Ohjeet & tiedotteet, oppimisympäristöt and tagged , , , . Lisää permalink suosikkeihisi. Seuraa tänne tulevia kommentteja RSS-feedin avulla. Jätä kommentti tai trackback: Trackback URL.
Kirjaudu sisälle kommentoidaksesi tätä artikkelia