Libreng tool para sa Accessibility
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.
Contrast calculator
Maglagay ng kulay ng text at kulay ng background. Kinukuwenta ang lahat sa iyong browser.
Ganito ang itsura ng normal na text na 16 pixel.
Malaking text na 24 pixel
Outline ng isang buttonContrast ratio4.54:1
| Normal na text, AAWCAG 1.4.3, kailangan ng 4.5:1 | Pasado |
|---|---|
| Malaking text, AAWCAG 1.4.3, kailangan ng 3:1 | Pasado |
| Normal na text, AAAWCAG 1.4.6, kailangan ng 7:1 | Bagsak |
| Malaking text, AAAWCAG 1.4.6, kailangan ng 4.5:1 | Pasado |
| Mga icon, border at form fieldWCAG 1.4.11, kailangan ng 3:1 | Pasado |
Pinakamalapit na kulay ng text na pumapasa sa background na ito
Ang malaking text ay hindi bababa sa 24 pixel, o 18.66 pixel kung bold. Ini-round down ang mga ratio, kaya lumalabas ang 4.499:1 bilang 4.49:1 at bumabagsak ito, gaya ng layunin ng WCAG.
O i-scan ang isang page para sa text na mababa ang contrast
Libre. Sinusuri ang address na inilagay mo sa loob ng mga 20 segundo.
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 tanong tungkol sa tool na ito
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)(magbubukas sa bagong tab)
- W3C: Understanding success criterion 1.4.6 Contrast (Enhanced)(magbubukas sa bagong tab)
- W3C: Understanding success criterion 1.4.11 Non-text Contrast(magbubukas sa bagong tab)
- W3C: Depinisyon ng relative luminance sa WCAG 2.2(magbubukas sa bagong tab)
- Deque: color-contrast rule ng axe-core(magbubukas sa bagong tab)
- WebAIM: The WebAIM Million (2026)(magbubukas sa bagong tab)
Mga kaugnay na tool
- AccessibilityAccessibility Checker ng WebsiteSubukan ang iyong website laban sa WCAG 2.2 A at AA sa totoong browser at makita ang bawat hadlang kasama ang elemento, ang page at kung bakit ito mahalaga.Buksan ang tool
- AccessibilityImage Alt Text CheckerIlista ang bawat larawan sa isang page kasama ang alt text nito at makita kung alin ang wala, dekoratibo, o mayroon pero hindi nakakatulong.Buksan ang tool
- AccessibilityWCAG 2.2 CheckerMakita ang bawat success criterion ng WCAG 2.2 Level A at AA para sa iyong site: bagsak, kailangang suriin, walang awtomatikong pagkabigo, o manwal na pagsusuri.Buksan ang tool
Kailangan mo ba ang mga solusyon, hindi lang ang mga natuklasan?
Nagsisimula ang Ulat sa Accessibility ($174, isahang bayad) sa buong libreng scan at nagdadagdag ng mas maraming page, ng pagbabagong gagawin para sa bawat natuklasan, ng PDF at ng mga re-test para matiyak ang mga inayos mo.