Libreng Converter

Contrast ng Kulay Checker (WCAG)

Suriin ang contrast ratio sa pagitan ng dalawang kulay para sa WCAG AA at AAA accessibility compliance. Libre, instant, at ganap na tumatakbo sa iyong browser.

Halimbawang Teksto — Normal na Sukat

Sample ng maliit na text — 14px

Contrast Ratio:21.00:1
WCAG AANormal na TekstoPass
WCAG AAMalaking TekstoPass
WCAG AAANormal na TekstoPass
WCAG AAAMalaking TekstoPass

Tungkol sa tool na ito

Suriin ang mga contrast ratio ng kulay sa pagitan ng foreground text at mga kulay ng background ayon sa WCAG 2.1 accessibility guidelines. Maglagay ng mga kulay bilang mga hex code, RGB value, o HSL value at agad na makita ang contrast ratio kasama ng mga resulta ng pass/fail para sa WCAG AA at AAA na pagsunod sa parehong normal at malalaking laki ng text.

Paano gamitin

  1. Ilagay o piliin ang kulay ng iyong foreground (text) gamit ang color picker o hex input.
  2. Ilagay o piliin ang kulay ng iyong background.
  3. Tingnan agad ang contrast ratio at WCAG 2.1 AA/AAA pass/fail na mga resulta.
  4. Ayusin ang mga kulay hanggang sa maabot mo ang nais na antas ng pagsunod.

Mga madalas itanong

Anong contrast ratio ang kinakailangan para sa pagsunod sa WCAG?
Ang WCAG AA ay nangangailangan ng 4.5:1 para sa normal na text at 3:1 para sa malaking text (18pt+ o 14pt+ bold). Ang WCAG AAA ay nangangailangan ng 7:1 para sa normal na text at 4.5:1 para sa malaking text. Ang maximum na posibleng ratio ay 21:1 (itim sa puti).
Bakit mahalaga ang contrast ng kulay?
Tinitiyak ng sapat na contrast na nababasa ang text para sa mga user na may mahinang paningin, color blindness, o iyong tumitingin sa mga screen sa maliwanag na sikat ng araw. Isa rin itong legal na kinakailangan sa ilalim ng mga regulasyon sa pagiging naa-access ng ADA at EU para sa maraming website.
Ano ang itinuturing na 'malaking teksto' sa WCAG?
Tinutukoy ang malaking text bilang 18pt (24px) at mas mataas para sa regular na timbang, o 14pt (18.66px) at mas mataas para sa bold na text. Ang malaking text ay may mas mababang contrast na kinakailangan dahil likas itong mas madaling basahin.
Sinusuri ba ng tool na ito ang kaibahan para sa mga elementong hindi teksto?
Ang WCAG 2.1 ay nangangailangan ng 3:1 contrast ratio para sa mga bahagi ng UI at mga graphical na bagay (mga button, icon, mga field ng form). Maaari mong gamitin ang tool na ito upang i-verify din ang mga iyon — ilagay lamang ang bahagi at mga kulay ng background.