Ginagamit ng checker ang opisyal na WCAG relative-luminance formula, kaya ang mga numerong lalabas ay tugma sa WebAIM checker at sa karamihan ng accessibility audit. Lahat ay tumatakbo sa browser mo - hindi kailanman ino-upload ang iyong mga kulay, at walang limitasyon.
Color Contrast Checker
Tumatakbo nang buo sa iyong browser - walang upload, walang sign-up.
Contrast ratio
Pumasakailangan 4.5:1
Pumasakailangan 3:1
Bumagsakkailangan 7:1
Pumasakailangan 4.5:1
Malaki = 18pt (24px), o 14pt (18.66px) bold.
Ano ang color contrast checker?
Sinusukat ng color contrast checker ang contrast ratio sa pagitan ng kulay ng teksto at ng background nito, at sinasabi kung natutugunan nito ang mga pamantayan ng WCAG accessibility. Nagbabalik ito ng ratio mula 1:1 hanggang 21:1, at nagpapakita ng pass o fail para sa AA at AAA sa parehong normal at malaking laki ng teksto.
Paano gamitin
- 1Ilagay ang iyong mga kulay. Mag-type ng hex code, rgb() value o CSS color name para sa teksto at background, o piliin ang mga ito gamit ang color swatch.
- 2Basahin ang ratio. Live na nag-a-update ang contrast ratio, kasama ang preview ng iyong teksto sa background nito.
- 3Tingnan ang mga badge. Ipinapakita ng bawat badge ang pass o fail para sa WCAG AA at AAA sa normal at malaking laki ng teksto.
Para kanino ito
- Mga designer na sumusubok ng brand color bago makarating sa development.
- Mga front-end developer na sinisigurado ang kulay ng button, link at label laban sa WCAG AA.
- Mga accessibility auditor na nagdodokumento ng contrast failure na may eksaktong ratio.
- Mga content at email team na nagkukumpirma na nananatiling nababasa ang teksto sa may kulay na background.
FAQ
Libre ba ang color contrast checker?
Oo - 100% libre, walang sign-up at walang limitasyon. Tumatakbo ito nang buo sa browser mo.
Anong contrast ratio ang kailangan para sa WCAG AA?
Nangangailangan ang WCAG 2.1 Level AA ng contrast ratio na hindi bababa sa 4.5:1 para sa normal na teksto at 3:1 para sa malaking teksto. Itinaas ng Level AAA ito sa 7:1 para sa normal na teksto at 4.5:1 para sa malaking teksto.
Ano ang itinuturing na malaking teksto?
Ang malaking teksto ay hindi bababa sa 18pt (mga 24px) sa regular na weight, o 14pt (mga 18.66px) kapag bold. Pinapayagan ang mas mababang contrast ratio para sa malaking teksto dahil mas madaling basahin ang mas malalaking titik.
Paano kinakalkula ang contrast ratio?
Ito ay (L1 + 0.05) / (L2 + 0.05), kung saan ang L1 at L2 ay ang relative luminance ng mas maliwanag at mas madilim na kulay. Kinakalkula ang luminance mula sa sRGB red, green at blue channel ayon sa WCAG 2.x definition.
Sinusuportahan ba nito ang hex, RGB at color name?
Oo. Maaaring maglagay ng 3-, 4-, 6- o 8-digit na hex, rgb() at rgba() value, o anumang CSS color name tulad ng 'teal'. Maaari ring pumili ng kulay gamit ang native color swatch.
Bakit minsan pumapasa at minsan bumabagsak ang parehong ratio?
Depende ang kinakailangang ratio sa laki ng teksto at sa level na tina-target. Ang ratio na 3.5:1 ay bumabagsak sa AA para sa normal na teksto ngunit pumapasa sa AA para sa malaking teksto, kaya palaging suriin laban sa laki at level na aktwal mong ginagamit.