Ano ang sinusuri ng patakarang ito
Tiyaking umaabot ang contrast ng kulay ng foreground at background sa minimum na threshold ng contrast ratio ng WCAG 2 AA.
Bakit ito mahalaga
Hinihingi ng WCAG 1.4.3 ang contrast ratio na hindi bababa sa 4.5:1 para sa normal na text at 3:1 para sa malaking text. Mahirap basahin ang malalabong presyo, badge at banner para sa mga taong malabo ang paningin, at para sa lahat kapag maliwanag ang paligid.
Paano ito ayusin
Sa anumang website
- Hanapin ang text na mababa ang contrast at itala ang kulay ng text at background nito: parehong ipinapakita ito ng isang contrast checker o ng developer tools ng iyong browser.
- I-update ang kulay ng text o background sa CSS ng iyong theme hanggang umabot ang ratio sa hindi bababa sa 4.5:1 (3:1 para sa text na 24px pataas, o 18.66px na bold).
- Bigyang-pansin lalo ang mga sale badge, placeholder text, link sa footer at mga button sa ibabaw ng larawan.
Sa Shopify
- Hanapin ang text na mababa ang contrast at itala ang kulay ng text at background nito: parehong ipinapakita ito ng isang contrast checker o ng developer tools ng iyong browser.
- Sa Online Store > Themes > Customize > Theme settings > Colors, padilimin ang kulay ng text o paliwanagin ang background para sa apektadong color scheme hanggang umabot ang ratio sa hindi bababa sa 4.5:1.
- Bigyang-pansin lalo ang mga sale badge, placeholder text, link sa footer at mga button sa ibabaw ng larawan.
Paano susuriin ang ayos
- Patakbuhin ulit ang scan at kumpirmahing hindi na lumilitaw ang color-contrast.
- Mag-spot-check gamit ang isang contrast checker sa eksaktong mga kulay.
Paano ito nahahanap ng FixReports
Pinapatakbo ng aming scan ang axe-core rule na color-contrast sa isang totoong Chrome browser sa bawat page na tine-test nito, at iniuulat ang bawat bumabagsak na elemento kasama ang page nito, ang markup nito at, kung naaangkop, isang screenshot.
Kinukumpirma ng isang awtomatikong test na naroroon ang partikular na problemang ito. Hindi nito masasabi kung accessible ang natitirang bahagi ng page: may mga hadlang na lumalabas lang kapag may taong sumuri sa page.