Miten värisokea näkee verkkosivuston?

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ä.

Esimerkki normaalinäköisen näkymästä.

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

Näin värisokea näkee sivustosi.

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.

Näin tarkistat, ovatko sivustosi värit saavutettavia.

Näin tarkistat, ovatko sivustosi värit saavutettavia

  • Klikkaa oman sivustosi sisältöaluetta hiiren oikealla painikkeella.
  • Saat kuvassa näkyvän pop-upin, josta klikkaat “Tarkista”.
Testaa värien saavutettavuus.
  • Chromen Dev Tool avautuu, kuten alla olevassa kuvassa.
  • Klikkaa kolmea päällekkäistä pistettä oikeassa yläreunassa.
  • Klikkaa “More tools”.
  • Klikkaa “Rendering”.
Testaa sivuston värit.
  • 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ä?
Näin värisokea näkee sivustosi.

Tee sivustostasi saavutettava

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.