WCAG Color Contrast para sa mga Designer
Ang 4.5:1 na panuntunan, matematika ng contrast ratio, at mga libreng tool para suriin ang anumang pares ng kulay.
Kung ang iyong teksto ay hindi pumasa sa WCAG AA contrast, tinatayang 285 milyong taong may kapansanan sa paningin ang hindi makakabasa nito. Dagdag pa, nasa nanginginig kang legal na katayuan sa EU at US. Ang magandang balita: simple ang panuntunan.
Ang 4.5:1 na panuntunan
Ang body text ay dapat may contrast ratio na hindi bababa sa 4.5:1 laban sa background nito upang pumasa sa WCAG AA. Ang malaking teksto (24px+ regular o 18px+ bold) ay may mas mababang bar na 3:1.
Para sa AAA conformance: 7:1 para sa body, 4.5:1 para sa malaking teksto.
Paano kinakalkula ang contrast ratio
Gumagamit ang WCAG ng relative luminance — i-convert ang bawat kulay sa isang luminance value (0 = itim, 1 = puti) gamit ang isang tiyak na formula, pagkatapos ay kalkulahin ang (L1 + 0.05) / (L2 + 0.05), kung saan ang L1 ay ang mas maliwanag na kulay.
Hindi mo kailangang gawin ang matematika — gamitin ang aming libreng contrast checker upang ilagay ang anumang dalawang kulay at makita ang ratio.
Mga karaniwang kaso ng pagkabigo
- Light grey sa puti — #999 sa #fff = 2.85 (bigo). #767676 sa #fff = 4.54 (pumasa).
- Puti sa dilaw — halos palaging bigo. Gumamit ng dark text sa dilaw.
- May kulay na mga link sa body text — karamihan sa mga asul na link ay pumasa laban sa puti ngunit bigo laban sa light grey. Subukan ang aktwal na nakapaligid na background.
- Mga brand color na mukhang maganda — madalas silang bigo. Magdagdag ng off-white background o padilimin ang teksto.
Pagpili ng accessible na mga pares ng kulay
Tatlong maaasahang pattern:
- Dark sa light — #1f2937 sa #fff = 14:1 (perpekto).
- Puti sa dark — #fff sa #1f2937 = 14:1 (perpekto).
- Dark sa accent — #1f2937 sa #fbbf24 = 9:1 (perpekto para sa mga button).
Higit pa sa teksto
Ang WCAG 2.1 ay nangangailangan din ng 3:1 para sa mga non-text element (mga button, focus rings, form borders). Ang checker ay humahawak sa pareho.
Mga Wallpaper na hindi lalaban sa iyong mga widget
Kung ikaw ay isang designer na nagtatakda ng mga wallpaper sa likod ng mga clock widget at notification, pumili ng mga wallpaper na may contrast na mas mababa sa 5:1 sa mga widget zone. Ang aming Gaussian blur tool ay maaaring lumambot sa mga abalang lugar ng anumang wallpaper para sa mas mahusay na pagiging nababasa ng widget.
Subukan ang aming mga libreng tool
Karamihan sa mga gabay na ito ay may kasamang hands-on tool na magagamit mo ngayon — walang kinakailangang sign-up para sa unang paggamit:
- Image resizer — pixel-perfect downscale + upscale.
- Convert to WebP — 30-50% mas maliit na file kaysa sa JPG.
- Background remover — isang-click na cutout, transparent PNG.
- Favicon generator — bawat laki ng browser mula sa isang source.
- Social-media resizer — eksaktong sukat ng bawat platform.
- Bulk processing — ilapat ang anumang tool sa hanggang 200 larawan nang sabay-sabay.
I-browse ang buong katalogo ng tool.
