Ang WCAG contrast check ay dumadaan sa ilang simpleng hakbang. Walang umaalis sa iyong browser.
- Maglalagay ka ng foreground at background na kulay. Pinaparsa ng tool ang hex, rgb(), hsl(), o pinangalanang CSS colors sa kanilang red, green, at blue channel values.
- Ang bawat RGB channel ay nililinis gamit ang sRGB transfer function. Kino-convert nito ang gamma-encoded display values sa linear light intensities.
- Ang linear values ay tinitimbang ayon sa sensitivity ng mata ng tao sa bawat channel — 0.2126 para sa red, 0.7152 para sa green, 0.0722 para sa blue. Ang kabuuan ay ang relative luminance ng kulay.
- Ang contrast ratio ay (L1 + 0.05) ÷ (L2 + 0.05), kung saan ang L1 ay ang luminance ng mas matingkad na kulay at L2 ay ang mas madilim. Ang extrang 0.05 ay nagpapanatili ng bisa ng formula para sa purong itim.
- Ang ratio ay ikinukumpara laban sa WCAG thresholds: AA normal text ay nangangailangan ng hindi bababa sa 4.5:1, AA large text ay nangangailangan ng 3:1, AAA normal text ay nangangailangan ng 7:1, at AAA large text ay nangangailangan ng 4.5:1. Ang large text ay nangangahulugang hindi bababa sa 18pt o 14pt bold.
FAQ
Mga karaniwang tanong tungkol sa WCAG contrast checking.
Ano ang pagkakaiba ng AA at AAA?
Ang AA ay ang minimum na antas ng pagsunod para sa karamihan ng web content. Ito ay nangangailangan ng contrast ratio na hindi bababa sa 4.5:1 para sa normal na teksto at 3:1 para sa malaking teksto. Ang AAA ay isang mas mataas na pamantayan na nangangailangan ng 7:1 para sa normal na teksto at 4.5:1 para sa malaking teksto. Maaari mong i-target ang AAA para sa mahalagang content tulad ng body copy sa isang news site, habang ginagamit ang AA para sa mas malawak na disenyo. Ang pagtugon sa AAA sa lahat ng dako ay maaaring maging mahirap gamit ang brand colors, kaya maraming team ang nagta-target ng AA sa kabuuan at itinataas ang mahalagang teksto sa AAA kung saan kaya nila.
Ano ang itinuturing na "malaking teksto" sa ilalim ng WCAG?
Tinutukoy ng WCAG 2.x ang malaking teksto bilang hindi bababa sa 18 point (24px) para sa regular na bigat, o 14 point (mga 19px) para sa bold na bigat. Ang mga simbolo at icon na bahagi ng isang font face ay sumusunod sa parehong mga threshold. Kung hindi ka sigurado kung aling threshold ang naaangkop sa iyong UI, suriin pareho — ang AA Large ay may mas mababang bar (3:1), kaya karamihan sa mga pares ng kulay na bumagsak sa AA Normal ay pumapasa sa AA Large kapag ang teksto ay sapat na malaki.
Bakit pumapasa ang aking pares sa AA Large ngunit bumagsak sa AA Normal?
Dahil ang AA Large ay nangangailangan lamang ng 3:1 ratio habang ang AA Normal ay nangangailangan ng 4.5:1. Nagtatakda ang WCAG ng mas mababang threshold para sa malaking teksto dahil ang mas malalaking karakter ay mas madaling basahin kahit na may mas kaunting contrast. Ang isang pares ng kulay na nakakuha, halimbawa, 4.0:1 ay pumapasa sa AA Large (3:1 threshold) ngunit bumagsak sa AA Normal (4.5:1 threshold). Ito ay napaka-karaniwan sa mas matingkad na brand colors na ginagamit bilang foreground sa puting background.
Maaari ba akong umasa sa tool na ito lamang para sa accessibility auditing?
Ang tool na ito ay sumusuri ng isang bagay — ang WCAG 2.x contrast ratio sa pagitan ng dalawang solid na kulay. Ang tunay na accessibility ay may kinalaman sa higit pa: focus indicators, laki at bigat ng font, kulay bilang tanging paraan upang maghatid ng impormasyon, at compatibility sa screen readers at zoom tools. Gamitin ang contrast check na ito kasama ng iba pang audit methods para sa kumpletong larawan ng accessibility ng iyong application.
Anong mga format ng kulay ang tinatanggap ng input?
Maaari kang mag-paste ng 3, 4, 6, o 8-digit hex codes (mayroon o walang #), rgb() at rgba() values sa legacy comma syntax o modern space-separated syntax, hsl() at hsla() na may anumang standard hue unit (deg, rad, grad, turn), hsv(), hwb(), at alinman sa 150 pinangalanang CSS colors mula sa CSS Color Module Level 4 spec. Ang kulay ay pinaparsa nang buo sa iyong device.