Pag-unawa sa WCAG 2.1 / 2.2 Contrast Guidelines
Ang accessibility o kakayahang ma-access ng lahat ang isang website ay nakasalalay sa tamang contrast ng mga kulay. Ang Contrast Checker ay binuo upang matulungan ang mga designer, developer, at content team na masuri ang readability o kadalian ng pagbasa ng mga teksto at elemento ng interface. Gamit ang formula ng WCAG 2.1 / 2.2, kinakalkula ng tool ang contrast ratio sa pagitan ng kulay ng teksto at ng background nito upang matiyak na nasusunod ang mga opisyal na pamantayan sa web compliance.
Ang contrast ratio ay nagsisimula sa 1:1, na nangangahulugang walang contrast o magkapareho ang kulay, hanggang sa pinakamataas na 21:1 para sa itim sa puting kulay. Sa unang pagbukas ng tool, ang mga default na kulay ay #4f46e5 para sa teksto at #ffffff para sa background, na nagbibigay ng contrast ratio na 6.29:1.
Mga Input at Tinatanggap na Format ng Kulay
Upang magamit ang tool, kailangang maglagay ng dalawang magkaibang kulay:
- Kulay ng text: Ang kulay na gagamitin para sa mga titik o karakter.
- Kulay ng background: Ang kulay na nasa likod ng teksto.
Tinatanggap ng tool ang tatlong pangunahing format ng kulay sa web:
- Hex values: Halimbawa ay
#1a1a1ao#ffffff. - rgb() values: Halimbawa ay
rgb(26, 26, 26)orgb(255, 255, 255). - hsl() values: Mga halagang nakabatay sa hue, saturation, at lightness.
Mayroon ding swap button sa interface na nagpapahintulot na pagbaligtarin ang mga kulay ng text at background sa isang click lamang. Kung sakaling hindi wasto ang format na nailagay, ipapakita ng tool ang mga sumusunod na error:
- Para sa maling kulay ng teksto: "Maglagay ng wastong kulay ng text, tulad ng #1a1a1a o rgb(26, 26, 26)."
- Para sa maling kulay ng background: "Maglagay ng wastong kulay ng background, tulad ng #ffffff o rgb(255, 255, 255)."
Pagkakaiba ng Antas AA at AAA sa Accessibility
Ang Web Content Accessibility Guidelines (WCAG) ay may magkakaibang antas ng pagsunod batay sa higpit ng contrast ratio:
| Antas ng Accessibility | Minimum na Ratio para sa Normal na Text | Minimum na Ratio para sa Malaking Text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Ang antas AA ang karaniwang target para sa karamihan ng mga pampublikong website. Ang antas AAA naman ang pinakamataas at pinakamahigpit na pamantayan na nagbibigay ng pinakamataas na antas ng pagiging madaling basahin para sa mga taong may kapansanan sa paningin.
Kahulugan ng Normal na Text at Malaking Text
Hindi pare-pareho ang kinakailangang contrast ratio para sa lahat ng laki ng teksto dahil mas madaling basahin ang malalaking titik kahit mas mababa ang contrast nito. Sa ilalim ng mga panuntunan ng WCAG, ang mga sukat ay tinutukoy sa ganitong paraan:
- Malaking text: Ito ay mga teksto na may sukat na mula 18pt (tinatayang 24px) pataas, o 14pt (tinatayang 18.5px) pataas kung ito ay naka-bold o makapal.
- Normal na text: Lahat ng teksto na mas maliit sa mga sukat na nabanggit para sa malaking teksto.
Dahil dito, ang malaking teksto ay nangangailangan lamang ng ratio na 3:1 para pumasa sa AA, at 4.5:1 para sa AAA.
Contrast para sa UI at mga Graphic
Bukod sa mga talata at pamagat, mahalaga rin ang contrast para sa mga interactive na elemento tulad ng mga button, input border, at mahahalagang bahagi ng mga graphic o diagram.
Para sa hanay ng UI at mga graphic, ang tool ay nagpapakita ng iisang resulta batay sa isang threshold na 3:1. Walang magkahiwalay na antas ng AA at AAA para sa UI at mga graphic; ang tanging layunin ay maabot ang minimum na ratio na 3:1 upang matiyak na ang mga elemento ng interface ay madaling makita ng mga user.
Interpretasyon ng mga Resulta at Verdict
Matapos suriin ang mga kulay, magpapakita ang tool ng indicator na "Pasa" o "Bagsak" para sa bawat kategorya, kasama ang isa sa mga sumusunod na buod o verdict batay sa nakuhang ratio:
- "Pumasa sa AA at AAA para sa normal na text." (Ito ay kapag ang ratio ay umabot sa 7:1 o higit pa).
- "Pumasa sa AA para sa normal na text." (Kapag ang ratio ay nasa pagitan ng 4.5:1 at 6.9:1).
- "Pumasa sa AA para sa malaking text lamang." (Kapag ang ratio ay nasa pagitan ng 3:1 at 4.4:1).
- "Mababa sa minimum ng AA — pakitaasan ang contrast." (Kapag ang ratio ay mas mababa sa 3:1).
Seguridad at Pagproseso ng Datos
Ang lahat ng pagproseso ng kulay at pagkakalkula ng contrast ratio ay lokal na nagaganap sa loob ng web browser ng user. Walang anumang data, kulay, o impormasyong inilalagay sa tool ang ipinapadala o ina-upload sa mga server ng BroBroGo.
Mga Madalas Itanong (FAQ)
Ano ang ibig sabihin ng mga resultang AA at AAA? AA ang antas na nilalayon ng karamihan sa mga site: kailangan nito ng ratio na hindi bababa sa 4.5:1 para sa normal na text at 3:1 para sa malaking text. Mas mahigpit ang AAA — 7:1 para sa normal na text at 4.5:1 para sa malaking text. Ang ratio ay tumatakbo mula 1:1 (walang contrast) hanggang 21:1 (itim sa puti).
Ano ang itinuturing na malaking text? Text na mula 18pt (mga 24px), o 14pt (mga 18.5px) kapag naka-bold. Ang mas malaking text ay nananatiling nababasa sa mas mababang contrast, kaya pumapasa ito sa AA sa ratio na 3:1 at AAA sa 4.5:1 sa halip na sa mas mahigpit na limitasyon para sa normal na text.
Aling mga format ng kulay ang maaari kong ilagay? Mag-type ng hex value tulad ng #1a1a1a, rgb() value tulad ng rgb(26, 26, 26), o hsl() value — o i-click ang alinmang swatch para pumili ng kulay. Gamitin ang swap button para pagbaligtarin ang mga kulay ng text at background.
Ito ba ay WCAG 2 o ang mas bagong pamamaraan ng APCA? Ginagamit nito ang formula ng WCAG 2.1 / 2.2, ang tinutukoy ng mga panuntunan sa accessibility at mga audit ngayon. Ang APCA ay isang mas bago at mas perceptual na pamamaraan na kasalukuyan pang binabalangkas para sa WCAG 3 — may potensyal, ngunit hindi pa ito pamantayan sa pagsunod, kaya hindi ito ginagamit ng mga resulta ng pagpasa rito.