Mitä tämä sääntö tarkistaa
Varmistaa, että edusta- ja taustavärin kontrasti täyttää WCAG 2 AA -tason kontrastisuhteen vähimmäisraja-arvot.
Miksi sillä on merkitystä
WCAG 1.4.3 edellyttää vähintään kontrastisuhdetta 4.5:1 tavalliselle tekstille ja 3:1 suurelle tekstille. Haaleat hinnat, merkit ja bannerit ovat vaikealukuisia heikkonäköisille ja kaikille kirkkaassa valossa.
Miten se korjataan
Millä tahansa sivustolla
- Etsi heikkokontrastinen teksti ja kirjaa sen tekstiväri ja taustaväri: kontrastityökalu tai selaimesi kehittäjätyökalut näyttävät molemmat.
- Muuta tekstin tai taustan väriä teemasi CSS:ssä, kunnes suhde on vähintään 4.5:1 (3:1 vähintään 24px:n tekstille tai 18,66px:n lihavoidulle tekstille).
- Kiinnitä erityistä huomiota alennusmerkkeihin, paikkamerkkiteksteihin (placeholder), alatunnisteen linkkeihin ja kuvien päällä oleviin painikkeisiin.
Shopifyssa
- Etsi heikkokontrastinen teksti ja kirjaa sen tekstiväri ja taustaväri: kontrastityökalu tai selaimesi kehittäjätyökalut näyttävät molemmat.
- Tummenna kohdassa Verkkokauppa > Teemat > Mukauta > Teeman asetukset > Värit (Online Store > Themes > Customize > Theme settings > Colors) tekstin väriä tai vaalenna taustaa kyseisessä värimallissa, kunnes suhde on vähintään 4.5:1.
- Kiinnitä erityistä huomiota alennusmerkkeihin, paikkamerkkiteksteihin (placeholder), alatunnisteen linkkeihin ja kuvien päällä oleviin painikkeisiin.
Miten korjaus tarkistetaan
- Aja skannaus uudelleen ja varmista, ettei sääntö color-contrast enää näy.
- Tarkista tarkat värit pistokokein kontrastityökalulla.
Miten FixReports löytää sen
Skannauksemme ajaa axe-core-säännön color-contrast oikeassa Chrome-selaimessa jokaisella testaamallaan sivulla ja raportoi jokaisen virheellisen elementin sekä sen sivun, merkintäkoodin ja tarvittaessa kuvakaappauksen.
Automaattinen testi vahvistaa, että juuri tämä ongelma on olemassa. Se ei voi kertoa, onko sivu muilta osin saavutettava: jotkin esteet tulevat esiin vasta, kun ihminen tarkistaa sivun.