Värien saavutettavuus

Kela Design Systemin värit ja niiden soveltamista ohjaavat periaatteet on suunniteltu tukemaan saavutettavien verkkopalvelujen toteutusta. Säännönmukaiseen logiikkaan perustuva värijärjestelmä helpottaa esimerkiksi saavutettavien sävy-yhdistelmien muodostamista.

Yleistä

Värien saavutettavuutta koskevat kriteerit perustuvat lakiin digitaalisten palveluiden tarjoamisesta(Avautuu uuteen välilehteen). Julkisia toimijoita koskeva laki velvoittaa Kelaa noudattamaan verkkopalveluissaan WCAG-saavutettavuusohjeistuksessa(Avautuu uuteen välilehteen) määritettyjä A- ja AA-tason kriteereitä.

Kelan verkkopalveluja koskevat saavutettavuusvaatimukset löytyvät WCAG 2.1 -ohjeiden osiosta ”Havaittava”. Alla on kuvattu lyhyesti ohjeiden tärkeimmät vaatimukset.

Värien saavutettavuutta koskevat tarkat kriteerit löytyvät WCAG-saavutettavuusohjeista:

Värien tulkinta

Värihavainto on aina subjektiivinen ja suhteellinen: värinäön tarkkuudessa on ihmisten välillä eroja ja värihavainto vaihtelee myös ympäristöstä ja olosuhteista riippuen. Näköaistin perusteella muodostuva havainto ja siihen perustuva kokemus on aina vahvasti yksilöllinen.

Värien havaitsemiseen ja tulkintaan vaikuttavat esimerkiksi ihmisen ikä, terveydentila ja kulttuurinen tausta. Myös yksilöstä riippumattomilla tekijöillä on merkitystä: esimerkiksi näytön kirkkaus, laitteen ominaisuudet sekä ympäristön valaistus vaikuttavat värihavainnon muodostumiseen.

Havaintoon vaikuttavat myös vierekkäisten sävyjen ominaisuudet ja käyttötapa: esimerkiksi väreihin perustuvat optiset harhat liittyvät usein vierekkäisten värisävyjen sekoittumiseen ja vuorovaikutukseen. Sama sävy voi näyttää tummalta tai vaalealta ympäröivistä sävyistä riippuen.

Älä käytä väriä ainoana viestintäkeinona

WCAG-kriteerit edellyttävät, että toiminnalliset ja tietoa välittävät elementit on mahdollista erottaa myös vaihtoehtoisella tavalla, joka ei edellytä värin havaitsemista.

Esimerkiksi ilmoitus toiminnon onnistumisesta ei saa perustua ainoastaan vihreään väriin, vaan tiedon tulee välittyä samassa yhteydessä myös tekstin tai kuvakkeen avulla.

Varmista, että väri tukee viestittävää asiaa. Älä kuitenkaan käytä väriä ainoana viestintäkeinona.

Saavutettava kontrasti

Tekstin ja muiden tietoa välittävien elementtien värisävyillä tulee olla riittävä tummuusero suhteessa taustaan ja viereisiin sävyihin, jotta sisältö toistuu selkeänä myös heikkonäköisille verkkopalvelun käyttäjille.

Riittävästä kontrastista on hyötyä myös normaalinäköisille, jotka käyttävät verkkopalvelua esimerkiksi kirkkaassa auringonpaisteessa.

Normaali teksti
Tekstin ja taustan välisen kontrastieron tulee olla vähintään 4,5:1.
Suurikokoinen teksti
Tekstin ja taustan kontrastieron tulee olla vähintään 3:1. WCAG-ohjeiden mukaan suurikokoisen tekstin alaraja on normaalissa tekstissä 18 pt ja lihavoidussa tekstissä 14 pt.
Toiminnalliset elementit
Esimerkiksi tekstikentän, valintaruudun, painikkeen ja käyttöliittymäkuvakkeen pitää erottua taustastaan siten, että elementin ja taustan välinen kontrastisuhde on vähintään 3:1.
Vuorovaikutteiset elementit
Kontrastivaatimukset koskevat myös tilanteita, joissa graafinen objekti valitaan aktiiviseksi tai sen tila muutoin muuttuu (esimerkiksi hover-efekteissä). Kun hiiren osoitin viedään esimerkiksi linkin päälle ja sävy muuttuu alkuperäisestä, linkkitekstin tulee edelleen täyttää kontrastisuhteen vähimmäisehto.
Visualisoinnit, kuviot ja kaaviot
Ei-tekstimuotoisten elementtien kontrastisuhteen tulee olla taustaan nähden vähintään 3:1., jos elementillä on tietoa välittävä rooli. Ehtoa sovelletaan esimerkiksi tilastokuvioihin, kaavioihin ja infografiikkaan. Kontrastieron tulee olla vähintään 3:1 sekä taustaan että viereiseen sävyyn verrattuna.

Varmista, että elementtien ja taustan välillä on riittävä kontrasti.

Käytä toiminnallisissa elementeissä vähintään 3:1 kontrastia.

Sävyjen yhdistely

Kun saman värin kahden eri sävyn (esim. kela-blue-80 ja kela-blue-30) erotus on vähintään 50, yhdistelmä täyttää WCAG:n kontrastivaatimuksen tasolla 4,5:1. Sääntö ei silti välttämättä päde kahden eri värin välillä (esim. kela-blue ja kela-yellow).

Alla oleva ruudukkotyökalu havainnollistaa WCAG-kriteerien kontrastivaatimukset täyttävät sävy-yhdistelmät. Periaate pätee yhtäläisesti kaikkiin KDS:n väripalettien väreihin – esimerkiksi sävy 20 täyttää normaalin tekstin kontrastin sävyjen 70-100 kanssa ja suurikokoisen tekstin kontrastin sävyn 60 kanssa.

Valitse väri

100

Tekstin ja taustan sävyt

Asteikon viisi tumminta sävyä (60-100) täyttävät leipätekstille asetetut kontrastivaatimukset, jos taustan sävy on valkoinen tai vaalea (10-50).

Asteikon viittä vaaleinta sävyä (10-50) voidaan soveltaa leipätekstiin, jos taustavärinä käytetään asteikon tummia sävyjä (60-100).

100