Kikaguzi cha Mwangaza – Contrast Checker

Kikaguzi cha Mwangaza hiki kinakagua WCAG na APCA kwa ajili ya kufuata sheria za ADA — mtihani wa upatikanaji wa rangi kwa tovuti…

✅ Unachopata kutoka kwa kikaguzi cha mwangaza huu: - uwiano wa mwangaza wa WCAG 2.2 na APCA Lc, - vipengele vyenye matatizo vilivyotolewa kwenye ukurasa, - sheria za CSS zilizozalisha rangi, zilizofuatiliwa kupitia ramani za chanzo (ikiwa zinapatikana), - zana ya kuchagua rangi iliyojengwa ndani yenye mchambuzi wa mwangaza na mbadala zilizopendekezwa, - muonekano wa moja kwa moja wa marekebisho, - usafirishaji wa marekebisho kwenda CSS (ikiwa na maelezo ya kutafuta chanzo). 🔍 Imejengwa kama kikaguzi cha mwangaza wa rangi za tovuti ambacho kinatembea katika hali za pseudo, kivuli cha DOM, iframes za asili moja, na maandiko juu ya picha na mchanganyiko — si tu mandharinyuma ya gorofa. ⚠️ Ruhusa ya debugger inahitajika. Upeo wa kikaguzi cha mwangaza huu unaweza kupatikana tu kupitia Itifaki ya Chrome DevTools, ambayo inahitaji ruhusa ya 'debugger'. Mara tu inapoambatanishwa, Chrome inaonyesha bar ya taarifa kwenye tab zote na haitaficha wakati wa kutenganisha. ⚡ Mchakato ulioboreshwa sana: • Tazama vipengele vyote vyenye matatizo ya upatikanaji wa rangi vilivyotolewa kwa haraka. • Tazama mabadiliko mara moja, huku uwiano wa mwangaza na maamuzi yakihesabiwa upya. • Tumia CSS maalum kwenye tab ya Stylesheet; matatizo yaliyoathiriwa yanapewa alama kwenye orodha. • Ili kuangalia mwangaza wa rangi kwa mikono, tumia zana ya kuchagua rangi iliyojengwa ndani: bonyeza kushoto kuweka mbele, bonyeza kulia kwa mandharinyuma, na uwiano unasasishwa mara moja. • Tumia tab ya Uondoaji kuficha kila kitu isipokuwa vipengele unavyorekebisha. 📐 Kigezo nyuma ya maamuzi. Kikaguzi hiki cha uwiano wa mwangaza kinajaribu upatikanaji wa rangi dhidi ya mahitaji ya WCAG na APCA. APCA Lc inakaguliwa dhidi ya vigezo vya Bridge-PCA, ambavyo ni vikali zaidi kuliko uwiano wa WCAG unaolingana — hivyo kupita Bridge-PCA daima kunamaanisha kupita WCAG. 🔬 APCA ni nini? APCA (Algorithm ya Mwangaza wa Kueleweka) ni mfano unaofuatilia jinsi watu wanavyosoma maandiko kwenye skrini. Jozi mbili za rangi zenye uwiano sawa wa wcag zinaweza kuonekana tofauti sana, na apca Lc yao (mwangaza wa mchanganyiko) inaonyesha hivyo: jozi inaweza kupita wcag lakini kuonekana kuwa ngumu kusoma. Kikaguzi hiki cha upatikanaji wa rangi ya tovuti kinahesabu nambari hizo mbili. 🚧 Mipaka: 1. Kama kikaguzi kingine chochote cha upatikanaji wa tovuti, hiki kinatoa makadirio bora, si cheti cha kufuata. 2. Upeo ni wa maandiko pekee; ukaguzi wa vipengele visivyo vya maandiko (wcag 1.4.11) uko kwenye ramani ya barabara. 3. Iframes za asili tofauti hazijakaguliwa. 4. Mandharinyuma magumu na michoro yanachukuliwa sampuli katika idadi finyu ya maeneo ya nafasi na wakati; uwiano wa sampuli mbaya unaripotiwa lakini unaweza kuwa na matumaini; sampuli inaweza pia kudanganywa na makosa ya uwasilishaji. 5. Tovuti zenye mabadiliko makubwa zinaweza kutoa matatizo yasiyo ya kweli. 6. Kikaguzi hiki cha mwangaza wa rangi hakifanyi OCR kwenye picha kiotomatiki; jaribu picha zenye maandiko yenye maana kupitia zana ya kuchagua rangi iliyojumuishwa. 🔒 Faragha na ruhusa. ▸ Inafanya kazi kwa ndani; hakuna data ya ukurasa wa wavuti inayotoka kwenye mashine yako. ▸ 'activeTab' pekee: skripti ya uchambuzi inaingizwa unapobonyeza ikoni ya zana. ▸ Ruhusa ya 'debugger' inahitajika ili kuingia kwenye Shadow DOM na iframes, kufuatilia vyanzo vya CSS, na kuchukua sampuli za mandharinyuma magumu. 🧮 Maelezo ya usahihi. Maandishi ya nusu-transparent na opacity ya mababu yanashughulikiwa kwa usahihi: mbele inachanganywa juu ya mandharinyuma yake halisi kabla ya mwangaza kupimwa, hivyo uwiano ulioripotiwa unalingana na kile ambacho watumiaji wanaona. Kazi za rangi za wigo mpana — oklch, lab, lch, color(display-p3) — pia zinasaidiwa, zikiwa zimefungwa kwa sRGB wakati zikiwa nje ya wigo. 🎨 Maandishi juu ya picha na mchanganyiko. Tofauti na zana nyingi zinazofanana, hii haikati tamaa juu ya mandharinyuma yasiyo gorofa au kuamini kile 'getComputedStyle' / 'CSS.getBackgroundColors' kinachoripoti. Inatembea katika mpangilio wa rangi wa kivinjari ili kuchanganya mandharinyuma halisi — opacity, mitindo ya kuchanganya, mchanganyiko wa moja kwa moja, backdrop-filter — na wakati hiyo haitoshi, zana hii ya mwangaza wa rangi inachukua sampuli ya pikseli zilizowekwa kwenye eneo la maandiko. ❓ Maswali na Majibu 📌 Kwa nini jozi sawa ya rangi wakati mwingine hupata maamuzi tofauti chini ya WCAG na APCA? ↳ WCAG inapima mwangaza; APCA inapima mchanganyiko wa kueleweka. Jozi inayopita 4.5:1 inaweza bado kushindwa kufikia kigezo cha Bridge-PCA Lc — mfano mkali zaidi. 📌 Je, APCA inachukua nafasi ya WCAG? ↳ Hapana — APCA si mbadala, bali maoni ya pili yenye manufaa. Kikaguzi hiki cha mwangaza kinatoa ripoti zote mbili. 📌 Naweza kuangalia faili ya ndani au seva yangu ya maendeleo kwa kikaguzi hiki cha upatikanaji? ↳ Ndio. Wezesha "Ruhusu ufikiaji wa URL za faili" katika mipangilio ya kiendelezi. Fungua URL ya file:// au localhost na bonyeza ikoni ya zana. Ni chrome:// tu, Duka la Mtandao la Chrome, na mipango mingine iliyozuiliwa inayokosekana. 📌 Je, zana hii inathibitisha kufuata ADA? ↳ Hapana. Inakagua mwangaza wa rangi tu — kipengele kimoja cha upatikanaji. Kufuata ADA ni uamuzi wa kisheria unaoshughulikia viwango na vigezo vingi (semantiki, ufikiaji wa kibodi, maandiko mbadala, vichwa vya habari, na zaidi) na inapaswa kutathminiwa na mtaalamu mwenye sifa.