Provjera kontrasta – Contrast Checker

Ova Provjera kontrasta provjerava WCAG i APCA boje kontrasta za usklađenost s ADA — test pristupačnosti boja za bilo koju web…

✅ Što ćete dobiti od ove provjere kontrasta: - WCAG 2.2 omjer kontrasta i APCA Lc, - elementi s problemima istaknuti na stranici, - CSS pravila koja su proizvela boje, praćena kroz izvorne karte (ako su dostupne), - ugrađeni alat za odabir boja s analitičarom kontrasta i predloženim alternativama, - pregled uživo ispravaka, - izvoz ispravaka u CSS (s komentarima koji lociraju izvor). 🔍 Izgrađeno kao alat za provjeru kontrasta boja na webu koji prolazi kroz pseudo-stanja, shadow DOM, iframe-ove iste domene i tekst preko slika i gradijenata — ne samo ravne pozadine. ⚠️ Potrebna dozvola za debagiranje. Pokrivenost ove provjere kontrasta moguća je samo putem Chrome DevTools protokola, koji zahtijeva dozvolu 'debugger'. Kada se poveže, Chrome prikazuje obavijest na svim karticama i ne skriva je prilikom odspajanja. ⚡ Visoko optimiziran radni tok: • Pogledajte sve elemente s problemima pristupačnosti boja istaknute na prvi pogled. • Odmah pregledajte promjene, s recalibriranim omjerima kontrasta i presudama. • Primijenite prilagođeni CSS na kartici Stilovi; pogođeni problemi označeni su na popisu. • Za ručnu provjeru kontrasta boja, koristite ugrađeni alat za odabir boja: lijevim klikom postavite prednju boju, desnim klikom pozadinsku boju, a omjer se odmah ažurira. • Koristite karticu Isključenja da sakrijete sve osim elemenata koje ispravljate. 📐 Kriteriji iza presuda. Ova provjera omjera kontrasta testira pristupačnost boja prema WCAG i APCA zahtjevima. APCA Lc ocjenjuje se prema Bridge-PCA pragovima, koji su stroži od odgovarajućih WCAG omjera — tako da prolaz Bridge-PCA uvijek implicira prolaz WCAG. 🔬 Što je APCA? APCA (Accessible Perceptual Contrast Algorithm) je model koji prati kako ljudi čitaju tekst na ekranu. Dva para boja s istim WCAG omjerom mogu izgledati znatno različito, a njihov APCA Lc (kontrast luminiscencije) to odražava: par može proći WCAG, ali se može činiti teškim za čitanje. Ovaj alat za provjeru pristupačnosti boja izračunava oba broja. 🚧 Ograničenja: 1. Kao i svaki drugi alat za provjeru pristupačnosti weba, ovaj daje najbolje procjene, a ne certifikat o usklađenosti. 2. Pokrivenost je samo tekstualna; provjera ne-tekstualnih elemenata (WCAG 1.4.11) je na planu. 3. Iframe-ovi s različitih izvora nisu uključeni. 4. Složene pozadine i animacije uzimaju se uz ograničen broj prostorno-vremenskih točaka; omjer najgoreg uzorka se prijavljuje, ali može biti optimističan; uzorak također može biti zavaravan artefaktima renderiranja. 5. Visoko dinamične stranice mogu proizvesti lažne probleme. 6. Ovaj alat za provjeru kontrasta boja ne pokreće OCR na slikama automatski; testirajte slike s značajnim tekstom putem uključenog alata za odabir boja. 🔒 Privatnost i dozvole. ▸ Radi lokalno; nijedan podatak s web stranice nikada ne napušta vaše računalo. ▸ 'activeTab' samo: skripta za analizu se umetne kada kliknete na ikonu na alatnoj traci. ▸ Potrebna je dozvola 'debugger' za ulazak u Shadow DOM i iframe-ove, praćenje CSS izvora i uzorkovanje složenih pozadina. 🧮 Detalji točnosti. Polu-prozirni tekst i prozirnost predaka se ispravno obrađuju: prednja boja se sastavlja preko svoje stvarne pozadine prije mjerenja luminiscencije, tako da prijavljeni omjer odgovara onome što korisnici zapravo vide. Funkcije boja širokog spektra — oklch, lab, lch, color(display-p3) — također su podržane, ograničene na sRGB kada su izvan spektra. 🎨 Tekst preko slika i gradijenata. Za razliku od većine sličnih alata, ovaj ne odustaje od ne-ravnih pozadina niti vjeruje onome što 'getComputedStyle' / 'CSS.getBackgroundColors' izvještava. Prolazi kroz redoslijed bojenja preglednika kako bi sastavio stvarnu pozadinu — prozirnost, načini miješanja, linearni gradijenti, backdrop-filter — i kada to nije dovoljno, ovaj alat za provjeru kontrasta boja uzima uzorke renderiranih piksela na lokaciji teksta. ❓ Pitanja i odgovori 📌 Zašto isti par boja ponekad dobije različite presude pod WCAG i APCA? ↳ WCAG mjeri luminiscenciju; APCA mjeri perceptivni kontrast. Par koji prođe 4.5:1 može i dalje biti ispod praga Bridge-PCA Lc — strožeg modela. 📌 Zamjenjuje li APCA WCAG? ↳ Ne — APCA nije zamjena, već korisno drugo mišljenje. Ova provjera kontrasta izvještava o oba. 📌 Mogu li skenirati lokalnu datoteku ili svoj dev server s ovim alatom za pristupačnost? ↳ Da. Omogućite "Dopusti pristup URL-ovima datoteka" u postavkama ekstenzije. Otvorite file:// ili localhost URL i kliknite na ikonu na alatnoj traci. Samo chrome://, Chrome Web Store i drugi ograničeni shemi se preskoče. 📌 Certificira li ovaj alat usklađenost s ADA? ↳ Ne. Provjerava samo kontrast boja — jedan aspekt pristupačnosti. Usklađenost s ADA je pravna odluka koja pokriva mnoge standarde i kriterije (semantika, pristup tipkovnici, alt tekst, titlovi i još mnogo toga) i trebala bi se procijeniti od strane kvalificiranog stručnjaka.