axessia.eu

Värin kontrastin yleisin virhe: missä meni pieleen ja kuinka sen välttää?

Liian pieni kontrasti tekstin ja taustan välillä on yksi yleisimmistä esteettömyyden skannauksissa havaituista puutteista. Tämä artikkeli selittää, missä ongelma ilmenee, mitä WCAG edellyttää ja kuinka voit rakenteellisesti estää sen.

Riittämätön kontrasti tekstin ja taustan välillä on yksi yleisimmistä esteettömyysskannausten löydöistä, ja samalla yksi helpoimmin välttävistä virheistä. Ongelma syntyy, kun vaaleanharmaata tekstiä on valkoisella taustalla, kun painikkeet näkyvät vain hienovaraisen värinmuutoksen vuoksi, tai kun paikkamerikki lomakekentässä toimii ainoana ohjeinaan siitä, mitä tulee täyttää. Ihmisille, joilla on näkövamma, mutta myös kaikille, jotka käyttävät näyttöä kirkkaan auringonvalon alla, teksti muuttuu kirjaimellisesti lukemattomaksi.

WCAG 2.1, normi, johon EN 301 549 viittaa, määrittää tasolla AA vähimmäiskontrastisuhteen tekstin ja sen taustan välille: tavallisesti 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille ja käyttökelpoiseille elementeille, kuten painikkeille ja lomakekentän reunuksille. Se kuulostaa tekniseltä, mutta taustalla oleva ajatus on yksinkertainen: kontrasti ei ole esteettinen valinta, se on edellytys informaation välittämiselle.

Missä asiat menevät pieleen käytännössä

Kontrastiongelmia syntyy harvoin tarkoituksella. Ne pääsevät sisään huoneen aikaisen tyylin valintojen kautta, jotka näyttävät hyviltä suurella, terävällä näytöllä suunnittelustudiossa, mutta tavallisella näytöllä tavalliselle käyttäjälle jäävät hieman normin alle. Vaaleanharmaaa painikkeen tekstiä pastellivärillä olevalla taustalla on klassinen esimerkki. Sama pätee linkkeihin, jotka tunnistetaan vain värieroavaisuudesta ilman alleviivaa tai muuta visuaalista signaalia, joten ihmiset, joilla on värisokeus, eivät yksinkertaisesti näe niitä klikkattavina.

Toinen toistuva kuvio on hover-tila: painike, joka lepotilassa täyttää vaatimukset hyvin, mutta kun hiirtä liikutetaan, muuttuu värikombinaatioksi, jota ei ole testattu. Myös lomakkeiden virheviestit ovat yleinen virhe: punainen teksti vaaleanpunaisella taustalla näyttää yhdenmukaista yrityksen visuaalisen ilmeen kanssa, mutta ei usein täytä vaadittua suhdetta. Jokainen, joka on utelias nähdä, miltä tällaiset ongelmat näyttävät omassa ympäristössään, voi muutamalla kysymyksellä nähdä, missä sivustonsa on ilman että tarvitsee ensin luoda tiliä.

Miksi automaattinen skannaus ratkaisee tämän osittain, mutta ei kokonaan

Kontrastisuhteita on helppo mitata automaattisesti: skanneri lukee tekstin ja taustan väriarvot ja laskee suhteen. Tämän vuoksi tämä on yksi harvoista WCAG-kriteereistä, jotka työkalu voi luotettavasti testata. Mitä skannaus ei näe, on kontrasti, joka syntyy vasta vuorovaikutuksen jälkeen, kuten pudotusvalikko, kuvaketta, joka tulee näkyviin kohdistuksen yhteydessä, tai tila, joka näkyy vain käyttäjän toiminnon jälkeen. Tämä on täsmälleen syy siihen, miksi jokainen raportti mainitsee, mikä osa on automaattisesti testattu ja mikä osa vaatii manuaalista arviointia; kontrasti on automaattisen testauksen vahva puoli, mutta ei koko kuva.

Kuinka sen välttää rakenteellisesti

Yleisin tapa välttää tämä ongelma jatkuvasti on kirjata kontrasti suunnittelujärjestelmän tasolla eikä sivua kohti. Kun huoneen aikaisen tyylin perusvärit testataan jo määrittelyvaiheessa normin mukaisesti, toimitsialla tai kehittäjä ei tarvitse tarkistaa sitä uudelleen joka kerta. Tämä myös estää sitä, että uusi sivu, väliaikainen mainoskyltti tai ulkoisesti ostettu widget jää alittamaan kontrastisuhteen huomaamatta.

Samalla kannattaa ottaa kontrasti nimenomaisesti huomioon aina, kun sivustoa muutetaan visuaalisesti, ei vain ensimmäisessä versiossa. Brändin uudistaminen, uusi sesonkiteema tai muutettu painikeen tyyli voi tuoda mukanaan ongelman, jota ei ollut aikaisemmassa versiossa. Saavutettavuus ei ole tässä mielessä kertapanos, joka raksitaan, vaan huomiopiste, jota seurataan jatkuvassa ylläpidossa. Lisätietoa siitä, miten tällainen jatkuva valvonta käytännössä toimii, löydät täältä selitys siitä, mistä arviointi tulee.

Lopuksi kannattaa huomioida, että ei ole tarkoituksenmukaista katsoa pelkkää vähimmäisnormia, vaan sen taustalla olevaa tarkoitusta: voivatko kaikki, myös epäideaalisissa valaistusolosuhteissa tai vanhemmilla näytöillä, todella erottaa tekstin ja painikkeet. Usein kysytyt epäselvyydet, kuten onko logon tai koristeellisen kuvan noudatettava myös kontrastisääntöä, on kuvattu sivulla vastaukset useammin palautuviin kysymyksiin.

Haluatko tietää, vaikuttaako kontrasti ja muut toistuvat ongelmat myös omassa ympäristössäsi? Ilmainen pikaluotaus antaa siitä ensimmäisen viitteen, ja tietovaranto, jonka aiheet on lajiteltu tilanteen mukaan näyttää, miten tämä kysymys liittyy muuhun European Accessibility Act -säädösten mukaisten velvollisuuksien kokonaisuuteen.

Tämä artikkeli on yleistietoa eikä oikeudellista neuvontaa.