Verkkosisällön saavutettavuusohjeet opas saavutettavuuteen liittyviin vaatimuksiin
1 Havaittava

1.4.11 Ei-tekstimuotoisen sisällön kontrasti

Onnistumiskriteerin taso: AA
Kriteeri tuli WCAG:n versiossa: 2.1

Onnistumiskriteerin virallinen kuvaus

Seuraavanlaisten elementtien visuaalisessa esitystavassa kontrastisuhde viereiseen väriin/väreihin on vähintään 3:1:

  • Käyttöliittymäkomponentit: Visuaalinen informaatio, joka vaaditaan käyttöliittymäkomponentin ja sen eri tilojen tunnistamiseen, lukuun ottamatta inaktiivisia komponentteja tai jos käyttäjäagentti määrittelee uuden sisällön visuaalisen esitystavan ja sisällön tuottaja ei ole sitä muokannut.
  • Graafiset objektit: Grafiikan osat, joita vaaditaan sisällön ymmärtämiseksi, lukuun ottamatta tapauksia, joissa ulkoasu on olennainen tietosisällön välittämiseksi.

Mitä pitää tehdä?

Varmista riittävä kontrasti käyttöliittymäkomponenteille ja graafisille objekteille.

Miksi tämä on tärkeää?

Tekee vuorovaikutteisista elementeistä ja tärkeistä grafiikoista erottuvia.

Yleisiä sudenkuoppia

Kontrastiin liittyy yleisesti ottaen paljon ongelmia. Etenkin kun kyseessä ovat hover- ja focus-tilat.

Infografiikat eivät yleensä täytä useita väreihin liittyviä kriteerejä.

Miten testata?

Varmista, että eri elementtien ja niiden tilojen välinen kontrasti on vähintään 3:1. Automaattiset työkalut voivat havaita joitakin näistä ongelmista, mutta yleensä tarvitaan manuaalista testausta.

Jos et ole varma vaatimuksista, tutustu tämän kriteerin ymmärtämissivuun, joka on linkitetty tälle sivulle. Sivu sisältää paljon erilaisia esimerkkejä ja ohjeita.

Huom! Tekstimerkit, kuten 'X' tai '>' tulkitaan ei-tekstuaalisiksi merkeiksi, kun niitä käytetään symboleina. Eli kun niitä käytetään visuaalisen ilmeensä vuoksi eikä ilmaisemaan jotakin ihmisen kielellä. Joten esimerkiksi sulkunappi, jossa on 'X', tämän kontrastivaatimusta tarkastellaan ei-tekstuaalisen vaatimusten mukaan eikä tekstin.

Lisää tästä kriteeristä muualla