Ei-tekstuaalinen kontrasti

Mitä kriteeri vaatii

Kriteeri 1.4.3 kattaa vain tekstin; 1.4.11 laajentaa heikomman version (3:1 eikä 4,5:1) kahteen lisäkategoriaan. Ensinnäkin käyttöliittymäkomponenttien visuaalisten merkintöjen — sen, mikä kertoo painikkeen olevan painike, missä kohdistusrengas on, missä lomakekentän rajat kulkevat — täytyy saavuttaa 3:1 viereistä pintaa vasten. Toiseksi niiden graafisten elementtien osien, jotka käyttäjän on tunnistettava — kaavion palkit, tilaa ilmaisevat kuvakkeet, merkkipisteet — täytyy saavuttaa 3:1.

Miten vaatimus täytetään

• Annetaan jokaiselle lomakekentälle näkyvä reunus, jonka kontrasti sivun taustaan on vähintään 3:1.
• Tyylitetään kohdistusmerkit (:focus-visible-ääriviiva) siten, että niiden kontrasti sekä komponenttiin että sivuun on vähintään 3:1.
• Ghost- tai outline-painikkeissa reunuksen itsensä täytyy saavuttaa 3:1 sivun taustaa vasten.
• Vaihtopainikkeissa “päällä/pois”-liukusäätimen radan ja nupun kontrastin täytyy olla 3:1 niiden kohtaamispisteessä.
• Merkitystä kantavilla kuvakkeilla (“info” i, varoituskolmio, valintamerkki) kuvakkeen viivojen täytyy saavuttaa 3:1 taustaansa vasten.
• Kaaviosarjoissa palkkien tai viivojen erottamiseen käytettyjen värien täytyy olla 3:1 toisistaan, tai ne on parittettava kuvion tai tekstuurin kanssa.

Yleisiä epäonnistumisia

• Lomakekentissä ei ole näkyvää reunusta tai reunus on #e5e5e5 valkoisella, kontrasti 1,3:1 — heikkonäköiselle käytännössä näkymätön.
• Kohdistusääriviivan oletustyylin korvaa outline: none eikä sitä koskaan korvata toisella.
• Ghost-painikkeissa on valkea teksti läpinäkyvällä pohjalla ja 1 px:n harmaa reunus — painike on käytännössä näkymätön.
• Vaihtopainikkeessa nuppu ja rata ovat lähes saman väriset “pois”-tilassa.
• Kortin kulmassa on tilatunnus (vihreä valintamerkki, punainen x), jonka väri erottuu kortin taustasta heikosti.
• Piirakkakaavion sektoreiden värit ovat 2:1-kontrastissa toisiinsa — näkevät käyttäjät erottavat rajat juuri ja juuri, heikkonäköiset näkevät yhden sumean läikän.

Miksi kriteeri on tärkeä

Kriteeri 1.4.11 lisättiin versiossa 2.1 ja yllättää tiimit usein — useimmat kontrastintarkistukset kattavat vain tekstin. Lomakekenttien reunukset, kohdistusrenkaat ja ghost-painikkeet ovat tyypillisimmät epäonnistumiset. Axe ja Stark tarkistavat nyt ei-tekstuaalisen kontrastin, mutta suunnittelijat ohittavat sen edelleen suunnitteluvaiheessa, koska oletus on, että “kontrasti = tekstikontrasti”. Korjaaminen tarkoittaa tavallisesti reunusten leventämistä ja harmaan tummentamista suunnittelujärjestelmässä.