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ä. Joskus se on mahdollista, että hän voi korjata oletusvärit saavutettaviksi.
Esimerkkejä väriyhdistelmistä
Tässä on väreinä oranssi (#f7931e), turkoosi (#6aa6ab), turkoosin vaaleampi versio (#c0dbe6) ja erittäin tumma syaaninsininen (#222f3e). Jos niiden päällä käytetään valkoista tekstiä, saavutettavuudelle asetettu kontrastivaatimus täyttyy vain tumman syaaninsinisen kohdalla. Muiden esimerkkivärien päällä valkoista tekstiä ei siis saisi käyttää. Musta teksti sen sijaan muodostaa riittävän kontrastin oranssin ja molempien turkoosien. (Huomaa, että logot ovat poikkeus, eli niiden kohdalla ei ole kontrastivaatimuksia.)
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 turkoosin (#6AA6AB) päällä täyttää sekä AA- että vaativamman AAA-tason kontrastivaatimuksen. Turkoosin ja mustan välinen kontrastisuhdeluku on 7.65:1.
Valkoinen teksti tuon turkoosin 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 oranssi ja turkoosi. 1B-kaaviossa näkyy sama kaavio mustavalkoiseksi muutettuna, ja kontrasti on hyvin heikko. Vastaavasti 2A-kaaviossa on oranssi ja erittäin tumma syaaninsininen. Ne muodostavat mustavalkoiseksi muutettunakin (2B) selkeän kontrastin.
Viivakaavioissa olisi hyvä käyttää ensisijaisesti erilaisia viivatyyppejä, ja käyttää eri värejä vain tukemaan niitä. Jälleen, kaavion muuttaminen mustavalkoiseksi tarkistamisen ajaksi kertoo hyvin, onko kaavion lukeminen vaikeaa vai helppoa.
Jos käytät kaaviota, jossa on täyttöjä, voit käyttää värin tukena tai sen sijasta täytöissä erilaisia tekstuureja: ne ovat saavutettavuuden kannalta ihan hyvä vaihtoehto. Tarkista vähintäänkin, että kontrastit ovat riittävät. Sen testaaminen onnistuu helposti, kun muutat kaaviosi hetkellisesti mustavalkoiseksi:
Kaavioiden luettavuus on paras kaksiulotteisena, ilman mitään varjostuksia yms. ”kikkailua”. Mitä yksinkertaisempi kaaviokuva on, sitä ymmärrettävämpi se on.
Jos kaavioissasi on toisissaan kiinni olevia värialueita, lisää ääriviivat eri elementtien (esim. ympyräkaavion lohkot) ympärille, jotta elementit erottuvat toisistaan paremmin. Sijoita selitteet mieluiten kuvattavan asian viereen tai päälle. Silloin lukijan ei tarvitse kyetä yhdistämään viivatyyppiä, täytön väriä tai kuvioita toisistaan voidakseen päätellä, että mikä selite vastaa mitäkin osuutta.