Sivuston päävärin kontrasti

Yksi saavutettavuusvaatimuksista koskee sivuston tekstin, linkkien ja navigointielementtien kontrastia (kirjainten väri suhteessa taustaväriin). Ks. lisää osoitteessa https://www.saavutettavasti.fi/syventavat-ohjeet/varit-ja-kontrastit/.

Lukkari-sivustoilla sivuston pääväri vaikuttaa joidenkin navigaatioiden ja linkkien tekstin kontrastiin. 

Kontrastin riittävyyden tarkistaminen

Nopein tapa tarkistaa sivuston värien kontrastien riittävyys on käyttää siihen tarkoitetua verkkopalvelua kuten esim. Color Contrast Accessibility Validator, johon syötetään oman sivuston osoite.

Alla olevassa esimerkissä näkyy Color Contrast Accessibility Validator:n tulos, jossa ensimmäisenä näkyy kontrastiltaa riittämätön sivuston pääväri sekä kaksi muuta ongelmakohtaa testatulla sivulla (ne korjataan Lukkarin kehityksessä).

Sivuston päävärin muuttaminen

Jos sivuston päävärin kontrasti osoittautuu riittämättömäksi, tulee pääväriä muuttaa. Yksinkertaisinta on tummentaa sivuston pääväriä. Sen voi myös muuttaa kokonaain toiseksi väriksi.

Sivuston uuden päävärin hakemisessa voi käyttää avuksi esim. Contrast checker -palvelua. Työkalulla voi muuttaa sivuston olemassa olevaa pääväriä tai etsiä kokonaan uutta pääväriä, joka täyttää kontrastivaatimukset.

Katso opastusvideo päävärin muuttamisesta Contrast checker -työkalulla.

Päävärin muuttamisen vaiheet lyhyesti:

  1. Kirjaudu sivustollenne päätoimittajan oikeuksilla ja mene Työkalut-valikon kautta kohtaan Sivuston asetukset.
  2. Kopioi värikoodi kohdasta Pääväri (ilman #-merkkiä)
  3. Siirry Contrast checker -palveluun
  4. Lisää edellä kopioimasi värikoodi kenttään ”Foreground” ja paina enteriä.
  5. Klikkaa em. kentän oikeassa päässä olevaa värillistä neliötä ja muuta esim. tummentamalla sivuston pääväriä, kunnes se täyttää AA-vaatimukset.
  6. Kopioi uuden värin koodi ja liitä se sivustonne asetuksissa kohtaan Pääväri (värikoodin pitää alkaa #-merkillä).