# Libreng Color Contrast Checker Ihambing dito mismo ang kulay ng text sa kulay ng background ayon sa WCAG 2.2, o maglagay ng address ng page para mahanap ang bawat text na mas mababa sa minimum na contrast, kasama ang mga nasukat na kulay nito at ang pinakamalapit na kulay na pumapasa. ## Ano ang sinusuri ng tool na ito - Ang WCAG ratio ng anumang dalawang kulay: Ginagamit ng calculator ang relative luminance formula mula sa mga depinisyon ng WCAG 2.2 at ipinapakita ang resulta para sa normal na text, malaking text at mga bahagi ng interface, sa AA at AAA. Tumatakbo ito sa iyong browser. - Kulay na pumapasa, kinuwenta na: Kapag bumagsak ang isang pares, hinahanap nito ang pinakamalapit na kulay ng text na may parehong hue na umaabot sa 4.5:1 o 7:1, para kaunti lang hangga’t maaari ang mababago mo sa iyong disenyo. - Bawat text na mababa ang contrast sa isang page: Pinapatakbo ng page scan ang color-contrast rule ng axe-core sa isang totoong Chrome browser at inililista ang bawat bumabagsak na elemento kasama ang kulay ng text, kulay ng background, laki ng font at ratio nito. - Nakagrupo ayon sa pares ng kulay: Nakagrupo ang mga failure ayon sa kulay ng text at background, dahil kadalasang naaayos ng isang pagbabago sa kulay ng theme ang bawat elementong gumagamit nito. - Tamang threshold para sa malaking text: Ang text na hindi bababa sa 24 pixel, o 18.66 pixel kung bold, ay nangangailangan ng 3:1 sa halip na 4.5:1. Inilalapat ng scan ang tamang threshold sa bawat elemento batay sa computed na laki at kapal nito. - Ang hindi nito nasukat, at kung bakit: Hiwalay na nakalista, kasama ang dahilan, ang text sa ibabaw ng mga larawan, gradient o magkakapatong na elemento, para alam mo kung ano mismo ang dapat suriin ng mata. ## Ano ang hindi nito kayang suriin - Sukatin ang text sa ibabaw ng mga larawan, gradient o video. Hindi malalaman ng software kung aling bahagi ng larawan ang nasa likod ng bawat letra, kaya inililista ang mga ito para suriin mo. - Suriin ang hover, focus o iba pang state. Nakikita ng scan ang page habang naglo-load ito; suriin ang mga kulay na iyon gamit ang calculator. - I-scan ang mga icon, border at form field sa page para sa WCAG 1.4.11. Ipinapakita ng calculator ang resulta sa 3:1 para sa anumang pares na ilalagay mo. - Basahin ang text na bahagi ng isang larawan, gaya ng banner na nakaukit na sa larawan ang mga salita. - Mag-test nang higit sa page na inilagay mo. Hanggang limang pangunahing page ang tine-test ng buong libreng scan. ## Bakit ito mahalaga Ang mababang contrast ang pinakakaraniwang accessibility failure sa web. Sa pagsusuri ng WebAIM noong 2026 sa nangungunang isang milyong home page, may text na mababa ang contrast sa 83.9% ng mga ito, na may average na 34 na paglitaw bawat page. Mahirap basahin ang malabong text para sa mga taong mahina ang paningin o may color vision deficiency, at para sa sinumang gumagamit ng phone sa ilalim ng matinding sikat ng araw. Itinatakda ng WCAG 2.2 success criterion 1.4.3, sa Level AA, ang minimum na 4.5:1 para sa normal na text at 3:1 para sa malaking text. Isa rin ito sa pinakamurang problemang ayusin: sa karamihan ng site, iilang kulay ng theme ang sanhi ng halos lahat ng failure, at naaayos ang bawat page nang sabay-sabay kapag pinalitan ang mga ito. ## Paano basahin ang mga resulta - Contrast ratio: Mula 1:1 (parehong kulay nang dalawang beses) hanggang 21:1 (itim sa puti). Ini-round down ang mga ratio, kaya bumabagsak sa minimum na 4.5:1 ang pares na nagpapakita ng 4.49:1. - Normal na text, AA (4.5:1): Ang minimum para sa body text, mga link, label at text ng button sa ilalim ng WCAG 1.4.3. - Malaking text, AA (3:1): Para sa text na hindi bababa sa 24 pixel, o 18.66 pixel kung bold. Itinuturing ng WCAG na malaking text ang 18 point, o 14 point na bold. - AAA (7:1 at 4.5:1): Ang enhanced na level sa WCAG 1.4.6. Hindi ito kailangan para sa AA conformance, pero nakakatulong ito sa mas maraming mambabasa. - Mga icon, border at form field (3:1): Hinihingi ng WCAG 1.4.11 ang 3:1 laban sa mga katabing kulay para sa mga bahagi ng control at graphic na kailangang makita ng tao para magamit ang mga ito. - Text na bumabagsak: Bawat elementong nasukat ng scan na mas mababa sa threshold nito, kasama ang selector, mga kulay, laki at ratio. Buksan ang isa para makita ang markup nito at, kung mayroon, isang screenshot. - Susuriin ng mata: Text na hindi nasukat ng axe-core, kasama ang dahilan, halimbawa ay may larawan o gradient sa likod nito. ## Paano ayusin ang mga pinakakaraniwang problema - Gray na text sa puti: Ang #767676 ang halos pinakamaliwanag na gray na umaabot sa 4.5:1 sa puti (4.54:1). Ang mas maliliwanag na gray gaya ng #999999 (2.84:1) ay karaniwang sanhi ng failure sa mga footer, caption, placeholder at presyo. - Puting text sa button na kulay ng brand: Kung bumabagsak ang puting text sa kulay ng iyong brand, padilimin nang ilang antas ang background ng button o gumamit ng madilim na text. Suriin din ang mga kulay ng hover at focus, dahil madalas na mas maliwanag ang mga ito. - Placeholder text sa mga form: Text pa rin ang placeholder text at kailangan nito ng 4.5:1. Mas mabuti pa, gumamit ng nakikitang label sa itaas ng field para hindi ang placeholder ang tanging tagubilin. - Text sa ibabaw ng mga larawan at slider: Ilagay ang text sa isang solid o semi-transparent na backdrop, o magdagdag ng madilim na overlay sa larawan, saka suriin ang pinakamaliwanag na bahagi ng larawan na nasa likod ng text. - Mga sale badge at fine print: Exempted sa 1.4.3 ang text sa mga disabled na control, pero hindi ang mga sale badge, presyo at legal na fine print. Ito kadalasan ang pinakamalabong text sa mga page ng isang store. ## Mga madalas itanong ### Anong contrast ratio ang hinihingi ng WCAG? Para sa Level AA, 4.5:1 para sa normal na text at 3:1 para sa malaking text (success criterion 1.4.3), at 3:1 para sa mga interface component at makabuluhang graphic (1.4.11). Hinihingi ng Level AAA ang 7:1 at 4.5:1 (1.4.6). ### Ano ang itinuturing na malaking text? Itinuturing ng WCAG na large-scale text ang hindi bababa sa 18 point, o 14 point na bold. Sa CSS pixel, mga 24px iyon, o 18.66px kung bold. ### Kailangan bang matugunan ng mga logo ang minimum na contrast? Hindi. Exempted sa WCAG 1.4.3 ang mga logotype at text na bahagi ng logo o pangalan ng brand, pati ang purong dekoratibong text at text sa mga hindi aktibong control. ### Bakit inililista ng scan para sa review ang text sa ibabaw ng larawan? Flat na kulay ang sinusukat ng axe-core. Kapag may larawan, gradient o ibang elemento sa likod ng text, hindi nito malalaman kung aling mga kulay ang nagtatagpo, kaya iniuulat nito ang elemento para suriin ng tao sa halip na manghula. ### Kailangan ko ba ng AAA na contrast? Hindi kailangan ang AAA para sa Level AA conformance, at hindi inirerekomenda ng W3C na gawing requirement ang AAA para sa buong site. Mabuting practice pa rin ang umabot sa 7:1 para sa body text kung papayagan ng iyong disenyo. ### Bahagi ba ng WCAG ang APCA? Hindi. Ang APCA ay ibang paraan ng pagsukat ng contrast na pinag-usapan para sa WCAG 3, na draft pa lang. Sa ngayon, sinusukat ang conformance gamit ang WCAG 2 ratio na kinukuwenta ng tool na ito. ## Mga sanggunian - [W3C: Understanding WCAG 2.2 success criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C: Understanding success criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C: Understanding success criterion 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C: Depinisyon ng relative luminance sa WCAG 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque: color-contrast rule ng axe-core](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)