Tiedätkö, miten värisokea näkee verkkosivustosi?

Noin 8 % miehistä ja 0,5 % naisista on värisokeita.

Jos et ole värisokea, näet alla olevan kuvan siten, kuten sen olemme tallentaneet: violetin, keltaisen ja vaaleanvihreän sävyissä.

Mutta jos olisit värisokea, näkisit kuvat näin.

Julkaisin aiemmin artikkelin siitä, miten voit testata, ovatko brändivärisi ja sivustosi painikkeet saavutettavia.

Samaisesta artikkelista löydät ohjeet ja linkin maksuttomaan työkaluun, jolla voit tarkistaa värien kontrastin.

Työkalun nimi on Contrast Checker.

Tuo työkalu kertoo kuitenkin eri asiaa kuin mistä tässä artikkelissa puhumme.

Haluat varmasti testata, miltä oma sivustosi näyttää värisokean silmin.

• Klikkaa oman sivustosi sisältöaluetta hiiren oikealla painikkeella.
• Saat kuvassa näkyvän pop-upin, josta klikkaat “Tarkista”.

• Chromen Dev Tool avautuu, kuten alla olevassa kuvassa.
• Klikkaa kolmea päällekkäistä pistettä oikeassa yläreunassa.
• Klikkaa “More tools”.
• Klikkaa “Rendering”.

• Katso sivun alareunaan ja vieritä alaspäin.
• Vieritä niin kauan, että pääset kohtaan “Emulate vision deficiencies”.
• Valitse alasvetovalikosta “Protanopia (no red)”.
• Tämä komento poistaa punaiset värit käytöstä.
• Miltä sivustosi näyttää?
• Entä miltä silloin, kun poistat vihreän, “Deuteranopia (no green)”, käytöstä?

Sivuston saavutettavuus on tärkeämpää kuin koskaan ennen.

Saavutettavuus ei liity vain väreihin vaan myös:

• fontin pikselikokoon
• fontin kirjasintyyliin
• fontin välistykseen
• vähäkontrastisiin elementteihin
• tekstin päällekkäisyyteen kuvien kanssa
• hyperlinkkien eli tekstilinkkien käytettävyyteen
• buttoneiden eli painikkeiden kokoon ja niiden väliin suhteessa toisiinsa
• lomakekenttien fonttikokoon ja kontrastiin.

Jos aihe (toivottavasti) kiinnostaa sinua enemmänkin, tutustu Kati Paavilaisen opinnäytetyöhön Saavutettavat verkkosivut: miten huomioida värisokeus suunnittelussa? sekä Saavutettavasti.fi-sivuston ohjeisiin verkkosisältöjen saavutettavuudesta.