Ano ang sinusukat ng contrast checker?
Ang isang contrast checker ay naghahambing ng relatibong luminance ng isang foreground na kulay at isang background na kulay. Ipinapakita ang resulta bilang ratio mula 1:1, kapag magkapareho ang mga kulay sa paningin, hanggang 21:1, kung saan ang itim at puti ay may pinakamalaking contrast.
Ipinapakita ng tool na ito ang mga WCAG-style na indikador ng pass at fail para sa normal na teksto at malaking teksto. Kapaki-pakinabang ito para sa maagang pagpapasya sa disenyo, estado ng mga komponent, mga theme token, at mga mabilisang tseke bago ang mas kumpletong accessibility review.
Paano basahin ang mga resulta
| Check | Minimum na ratio | Meaning |
|---|---|---|
| AA normal na teksto | 4.5:1 | Karaniwang target para sa normal na body text. |
| AA malaking teksto | 3:1 | Naaangkop sa mas malalaki o mas makakapal na teksto kung saan mas madaling basahin ang hugis ng mga letra. |
| AAA normal na teksto | 7:1 | Mas mahigpit na target para sa normal na teksto sa mga kontekstong may mataas na accessibility. |
| AAA malaking teksto | 4.5:1 | Mas mahigpit na target para sa malaking teksto. |
Ano ang hindi pinatutunayan ng tool na ito
Ang isang ratio ay malakas na senyales, ngunit hindi ito kumpletong accessibility audit. Depende rin ang tunay na pagiging mabasa sa tipograpiya, bigat ng font, hover/focus na estado, disabled na estado, mga nakapaligid na kulay, kalidad ng screen, at kung lumilitaw ang teksto sa ibabaw ng mga larawan o gradient.
- Kailangan ng hiwalay na pagsusuri ang transparency at mga gradient.
- Maaaring mangailangan ng mas malakas na contrast ang maliliit na icon at manipis na mga guhit kaysa sa katabing teksto.
- Maaaring pumasa ang mga kulay ng brand sa isang kombinasyon ngunit mabigo sa iba.
- Magkaugnay ngunit magkaiba ang QR scan contrast at contrast para sa pagiging mabasa ng teksto.
Mga paraan upang mapahusay ang mahina na contrast
Patandaan ang foreground
Para sa magaang mga background, ilapit ang kulay ng teksto sa mas madilim na neutral o mas malakas na kulay ng brand.
Paliwanagin ang background
Maaaring magdala ng pagpapanatiling maliit sa background upang pumasa ang isang kulay ng brand nang hindi binabago ang foreground token.
Dagdagan ang laki o bigat ng teksto
Ang mas malaki o mas makakapal na teksto ay may mas mababang threshold para sa AA, ngunit kailangan pa rin ng sapat na visual na paghihiwalay.
Suriin ang bawat estado
Madalas gumamit ang hover, focus, disabled, selected, at error na mga estado ng magkaibang pares ng kulay.
Mga Madalas Itanong
Ito ba ay isang kumpletong audit ng pagsunod sa WCAG?
Hindi. Kinakalkula nito ang mga WCAG-style na threshold ng contrast para sa mga pares ng kulay. Sinusuri ng isang kumpletong review din ang layout, keyboard behavior, semantics, focus states, text alternatives, at ang totoong na-render na tipograpiya.
Ano ang binibilang na malaking teksto?
Tinuturing ng gabay ng WCAG ang malaking teksto bilang humigit-kumulang 18 pt na regular na teksto o 14 pt na bold na teksto pataas. Sa web, beripikahin ang totoong na-render na laki at bigat, hindi lamang ang label sa disenyo.
Maaari ko bang gamitin ito para sa mga transparent na kulay?
Gumagamit ang compact checker na ito ng opaque na sRGB na mga kulay. Kung gumagamit ang UI mo ng transparency, i-blend muna ang panghuling na-render na foreground at background, pagkatapos suriin ang nagresultang pares.
Ibig sabihin ba ng pagpasa sa AA na palaging madaling basahin ang disenyo?
Hindi palagi. Ang napakamanipis na mga font, maliliit na label ng UI, magulong mga background, at mababang kalidad na mga display ay maaari pa ring magpahirap sa pagbabasa ng teksto. Ituring ang ratio bilang isang mahalagang senyales.
Ito ba ay kapareho ng contrast para sa QR code?
Hindi. Ang contrast para sa QR code ay nakaaapekto sa pagiging ma-scan nito, habang ang tool na ito ay nakatuon sa mga threshold ng pagiging mabasa ng teksto. Magkaugnay ang matematika, ngunit magkaiba ang praktikal na desisyon.