WCAG 1.4.3 · Level AA

Dapat umabot ang mga elemento sa minimum na threshold ng color contrast ratio

May text na hindi sapat na namumukod sa background nito para mabasa ng mga taong malabo ang paningin.

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

  1. 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.
  2. 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).
  3. Bigyang-pansin lalo ang mga sale badge, placeholder text, link sa footer at mga button sa ibabaw ng larawan.

Sa Shopify

  1. 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.
  2. 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.
  3. 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.

I-scan ang iyong website ngayon

Hanapin. Ayusin. Tiyakin.

Anong uri ng website ito?

Pinipili ng sagot mo ang tamang mga pagsusuri, gaya ng shopping journey para sa mga online store. Sinusuri pa rin namin ang sariling ebidensya ng site at ipinapakita ang dalawa.

Anong uri ng website ito?

Libreng scan. Hindi kailangan ng credit card.