Värikontrasti

Sovelluksen käyttöliittymän värit vaikuttavat merkittävästi käyttökokemuksen sujuvuuteen. Riittävän suuri värikontrasti helpottaa tekstien ja kuvien lukemista ja ymmärtämistä.

Riittävä värikontrasti auttaa näkövammaisia käyttäjiä, mutta sen lisäksi se tekee käyttöliittymän katselusta helpompaa äärimmäisissä valaistusolosuhteissa, kuten suorassa auringonvalossa tai näytön kirkkauden ollessa pieni.

Käyttöönotto

Kun rakennat sovelluksen käyttöliittymää, määrittele taustan ja etualan väreille riittävän suuri kontrasti.

Kontrastisuhde on arvo, joka perustuu kahden vierekkäisen värin kirkkauden (säteillyn valon vahvuuden) eroon. Suhde vaihtelee välillä 1–21 (se voidaan kirjoittaa myös muodossa 1:1–21:1), missä suurempi luku tarkoittaa suurempaa kontrastia. Kahden vierekkäisen värin kontrastisuhteen laskemiseen on tarjolla useita työkaluja, kuten tämä värien kontrastisuhteen laskin.

Kun käytät TextView-elementtiä tekstin näyttämiseen, määritä taustan ja etualan väreille suuri kontrasti android:textColor‑ ja android:background-attribuuteilla. Kun käytät Text-elementtiä Compose-työkalussa, määritä taustan ja etualan väreille suuri kontrasti väriparametrilla ja Modifier.background-attribuutilla.

W3C suosittelee käyttämään

• pienessä tekstissä (tavallisella kirjasimella 18 pistettä tai vähemmän, lihavoituna 14 pistettä tai vähemmän) vähintään suhdetta 4,5:1
• suuressa tekstissä (tavallisella kirjasimella 18 pistettä tai enemmän, lihavoituna 14 pistettä tai enemmän) vähintään suhdetta 3,0:1.

Huomioitavaa värikontrastista:

• Kun käytät ImageView‑ tai Image-elementtiä graafisen sisällön tai kuvakkeiden renderöintiin, varmista, että etualan ja taustan värien kontrasti on suositeltujen suhteiden mukainen tai niitä suurempi.

• Kontrastisuhde perustuu elementin etu‑ ja taustaosan väriin, joka näkyy, kun samassa kohdassa olevat elementit asetetaan kerroksiin. Huomaa, että jos värit määritetään ARGB-muodossa (heksa-arvoina #AARRGGBB), läpinäkyvät värit (alfa-kanavan arvo on alle 255) voivat muuttua näytölle piirrettäessä, sillä ne voivat sekoittua niiden alla olevaan sisältöön.
• Kirjasimen tasoitus ja sahalaitojen poisto voivat vaikuttaa joidenkin sisältöjen näkyviin väreihin erityisesti pientä piirron leveyttä käytettäessä. Voit parantaa luettavuutta valitsemalla väriyhdistelmän, jolla on suurempi kontrastisuhde, tai suurentamalla sisällön piirron leveyttä.

Suunnittelu

Kun suunnittelet käyttöliittymää, valitse väripaletti, jossa vierekkäisten värien kontrasti on riittävän suuri.

• Valitse tekstin ja kuvakkeiden vähimmäiskontrastisuhteet W3C:n ohjeiden mukaisesti.
• Voit myös lisätä vaihtoehtoisia, suurempia kontrasteja käyttäviä teemoja tai antaa käyttäjän valita ensisijaisen sisällön värit.

Saat lisätietoja Material Designin värien ja kontrastien saavutettavuusohjeista.

Testaus

Näin voit tarkistaa sovelluksen värikontrastin manuaalisesti:

1. Avaa sovellus.
2. Tallenna kuvakaappaus.
3. Poimi näyte kuvakaappauksessa näkyvistä väreistä kuvankatselu tai ‑muokkausohjelman pipettityökalun avulla.
4. Laske vierekkäisten värien kontrastisuhteet laskimella.
5. Jos kontrastisuhde on pienempi kuin W3C:n ohjeissa annettu suositus, suosittelemme kasvattamaan käyttöliittymän värikontrastia.

Androidin automaattiset testaustyökalut voivat havaita monia värikontrastiin liittyviä ongelmia. Voit testata sovellustasi laitteessa manuaalisesti Androidin Accessibility Scannerilla. Automaattisten testien suorittamiseksi ota Espresson ja Robolectricin esteettömyystarkistukset käyttöön.