Sivuston värin määrittely
Sivuston väri on pääkuvan lisäksi selkeimpiä erottavia tekijöitä, joten sivuston väriä ei kannata vaihtaa usein. Sivuston väri on hyvä päättää ennen sivuston julkaisua, ja sen jälkeen se kannattaa muuttaa vain poikkeustilanteissa tai jos uusit sivustoa laajemmin.
Sivuston värin voi vaihtaa joko syöttämällä Pääväri-kenttään värin HEX-koodin (esim. #06b8b1) tai valitsemalla päävärin värikarttatyökalulla. Kun olet syöttänyt toivomasi HEX-koodin tai valinnut värin, paina Tallenna-painiketta sivun alaosasta. Sivuston värimuutos ei tule heti näkyviin, koska Internet-selain tallentaa värivalinnan selaimen välimuistiin. Värimuutos tulee yleensä näkyviin, kun pakottaa sivun latautumaan uudestaan ilman välimuistin tietoja (CTRL + F5).
Varmista riittävä kontrasti pääväriä valitessa
Pääväri vaikuttaa sivuston valikoiden ja linkkitekstien kontrastiin. Pääväriksi täytyykin valita riittävän tumma väri, jotta tekstin ja taustan välinen kontrasti täyttää saavutettavuusvaatimukset. Värien ja kontrastien saavutettavuudesta lisää Saavutettavuusvaatimukset-sivustollaLinkki avautuu uudessa välilehdessä.
Sivuston värin valinnassa on huomioitava se, että eri näytöillä värit näyttävät hieman erilaiselta. Painotuotteisiin tarkoitetun tarkan väriarvon siirtäminen verkkosivuille ei aina toimi. Usein väriä tulee hieman tummentaa.
Saavutettavuuden kannalta riittävän kontrastin väri on usein melko tumma. Vaaleat värit harvoin toimivat edes päävalikossa. Epäselvissä tapauksissa värin kontrasti kannattaa tarkistaa yhdessä Lukkarin käyttötuen kanssa. Voit myös tarkistaa kontrastin itse käyttämällä jotain WCAG:n raja-arvoihin perustuvaa kontrastin tarkastustyökalua, kuten Color Contrast Accessibility ValidatoriaLinkki avautuu uudessa välilehdessä.
Alla olevassa esimerkissä näkyy Color Contrast Accessibility Validatorin tulos, jossa ensimmäisenä näkyy kontrastiltaan riittämätön sivuston pääväri sekä kaksi muuta ongelmakohtaa testatulla sivulla.
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 kokonaan toiseksi väriksi.
Sivuston uuden päävärin hakemisessa voi käyttää avuksi esim. Contrast checker -palveluaLinkki avautuu uudessa välilehdessä. Työkalulla voi muuttaa sivuston olemassa olevaa pääväriä tai etsiä kokonaan uuden päävärin, joka täyttää kontrastivaatimukset.
Päävärin muuttamisen vaiheet lyhyesti:
- Kirjaudu sivustollenne päätoimittajan oikeuksilla ja mene vasemman ylläpitovalikon kautta kohtaan Sivuston asetukset.
- Kopioi värikoodi kohdasta Pääväri (ilman #-merkkiä)
- Siirry Contrast checker -palveluunLinkki avautuu uudessa välilehdessä.
- Lisää edellä kopioimasi värikoodi kenttään ”Foreground” ja paina enteriä.
- 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.
- Kopioi uuden värin koodi ja liitä se sivustonne asetuksissa kohtaan Pääväri (värikoodin pitää alkaa #-merkillä).
Tukiväripaletti
Valinnat eivät vaikuta sivustoon tällä hetkellä.
