Saavutettavat värit ja kontrasti
Saavutettavuuden onnistumiskriteereistä yksi helpoimmin määritettäviä ja mitattavia onnistumiskriteereitä on väri ja värien keskinäinen kontrasti. Väreistä ja niiden kontrastista säädetään WCAG ohjeiston Havaittavuuden periaatteen kohdassa 1.4.3 Kontrasti (minimitaso AA) sekä kohdassa 1.4.6 Kontrasti (minimitaso AAA). Värien kontrastin minimivaatimukset on säädetty erikseen erikokoiselle tekstille.
- Tasolla AA vähimmäiskontrasti on 4.5:1 paitsi suurelle tekstille 3:1
- Tasolla AAA vähimmäiskontrasti on 7:1 paitsi suurelle tekstille 4.5:1
Kirjasinkoon vaikutus
Mitä sitten on ohjeistossa mainittu suuri teksti ”Large Text”. Määrityksessä käytetään pistekokoa – pt, jota ei yleensä käytetä verkkosivuilla kirjasinkoon yksikkönä. Yksi pt-yksikkö vastaa CSS pikseleissä 1,3333px. Ohjeiston määrittelyn mukaisesti suureksi tekstiksi katsotaan teksti, jonka kirjasinkoko on 14pt lihavoituna tai 18pt normaali. Pikseleiksi muunnettuna tämä tarkoittaa 18.5px lihavoitu tai 24px normaali.
Kirjasinkoko on määrittelyssä sama sekä AA että AAA tason vaatimuksissa.
Kontrastivaatimukset tarkennettuna ja kirjasinkoko
- Taso AA
- normaali teksti alle 24px vähimmäiskontrasti 4.5:1
- lihavoitu teksti alle 18.5px vähimmäiskontrasti 3:1
- Taso AAA
- normaali teksti alle 24px vähimmäiskontrasti 7:1
- lihavoitu teksti alle 18.5px vähimmäiskontrasti 4.5:1
Miten tarkistaa kontrastin riittävyys
Kontrastin tarkistamiseen löytyy useita eri sivustoja ja palveluita. Tässä muutamia
Mutta kontrastit on helppo tarkistaa itse omassa selaimessa. Avaa tarkistettava sivu ja napsauta hiiren kakkospainikkeella tutkittavan elementin päällä ja valitse avautuvasta valikosta ”Inspect”, ”Inspect element”, ”Tarkastele” tai muu vastaava käyttämäsi selaimen ja kielen perusteella. Nämä ohjeet ovat Google Chromelle.
Valitse ”Elements” ja valitse elementtirakenteesta tarkasteltava elementti että näet ”Styles” paneelissa kyseisen elementin CSS tyylit. Elementin värin (color) kohdalla näkyy pieni väriruutu, jota klikkaamalla avautuu värin valintadialogi. Tässä dialogissa näkyy myös täyttääkö väri saavutettavuuden kriteerit. Voit helposti muuttaa värin arvoa ja nähdä millä arvoilla kriteerit täyttyvät ja milloin ei.
Tällä työkalulla kenen tahansa on helppo tarkistaa sivun eri elementtien värien kontrastin riittävyys. Tosin on osattava jonkin verran verkon tekniikoita, HTML ja CSS mutta sen verran niitä toki on osattava muutenkin voidakseen ylläpitää verkkosisältöjä.