Kontrolór kontrastu – Contrast Checker

Tento kontrolór kontrastu kontroluje farebný kontrast podľa WCAG a APCA pre súlad s ADA — test farebnej prístupnosti pre akúkoľvek…

✅ Čo získate z tohto kontrolóra kontrastu: - kontrastný pomer WCAG 2.2 a APCA Lc, - prvky s problémami zvýraznené na stránke, - CSS pravidlá, ktoré vytvorili farby, sledované cez zdrojové mapy (ak sú k dispozícii), - vstavaný nástroj na výber farieb s analyzátorom kontrastu a navrhovanými alternatívami, - živý náhľad opráv, - export opráv do CSS (so zdrojovými komentármi). 🔍 Vytvorený ako webový kontrolór farieb, ktorý prechádza pseudo-stavmi, shadow DOM, iframes s rovnakým pôvodom a textom nad obrázkami a gradientmi — nie len plochými pozadiami. ⚠️ Vyžaduje sa povolenie na ladenie. Pokrytie tohto kontrolóra kontrastu je možné iba prostredníctvom protokolu Chrome DevTools, ktorý vyžaduje povolenie 'debugger'. Po pripojení Chrome zobrazuje informačný panel na všetkých kartách a nezmizne pri odpojení. ⚡ Vysoko optimalizovaný pracovný tok: • Zobrazte všetky prvky s problémami prístupnosti farieb zvýraznené na prvý pohľad. • Okamžite si prehliadnite zmeny, s prepočítanými kontrastnými pomermi a verdiktmi. • Použite vlastné CSS na karte Štýly; ovplyvnené problémy sú označené v zozname. • Na manuálne kontrolovanie kontrastu farieb použite vstavaný nástroj na výber farieb: ľavým kliknutím nastavte popredie, pravým kliknutím pozadie a pomer sa okamžite aktualizuje. • Použite kartu Výnimky na skrytie všetkého okrem prvkov, ktoré opravujete. 📐 Kritériá za verdiktmi. Tento kontrolór kontrastného pomeru testuje prístupnosť farieb voči požiadavkám WCAG a APCA. APCA Lc je hodnotený voči prahom Bridge-PCA, ktoré sú prísnejšie ako zodpovedajúce pomery WCAG — takže prechod cez Bridge-PCA vždy znamená prechod cez WCAG. 🔬 Čo je APCA? APCA (Algoritmus prístupného percepčného kontrastu) je model, ktorý sleduje, ako ľudia čítajú text na obrazovke. Dve farebné dvojice s rovnakým pomerom WCAG môžu vyzerať výrazne odlišne a ich APCA Lc (kontrast luminancie) to odráža: dvojica môže prejsť WCAG, ale môže sa zdať ťažko čitateľná. Tento webový kontrolór prístupnosti farieb vypočítava obe čísla. 🚧 Obmedzenia: 1. Rovnako ako každý iný kontrolór prístupnosti webu, aj tento poskytuje odhady s najlepším úsilím, nie certifikát o zhode. 2. Pokrytie je len textové; kontrola netextových prvkov (WCAG 1.4.11) je na pláne. 3. Cross-origin iframes nie sú spracované. 4. Zložité pozadia a animácie sú vzorkované na konečnom počte priestorových a časových bodov; pomer najhoršej vzorky je hlásený, ale môže byť stále optimistický; vzorkovač môže byť tiež zavedený do omylu renderovacími artefaktmi. 5. Vysoko dynamické stránky môžu produkovať falošné problémy. 6. Tento kontrolór kontrastu farieb automaticky nespúšťa OCR na obrázkoch; testujte obrázky s významným textom pomocou zahrnutého nástroja na výber farieb. 🔒 Ochrana súkromia a povolenia. ▸ Beží lokálne; žiadne údaje z webovej stránky nikdy neopustia váš stroj. ▸ 'activeTab' iba: analytický skript je injektovaný, keď kliknete na ikonu panela nástrojov. ▸ Na vstup do Shadow DOM a iframes, sledovanie CSS zdrojov a vzorkovanie zložitých pozadí je potrebné povolenie 'debugger'. 🧮 Detaily presnosti. Polopriehľadný text a opacita predkov sú správne spracované: popredie je zložené nad jeho skutočným pozadím pred meraním luminancie, takže hlásený pomer zodpovedá tomu, čo používatelia skutočne vidia. Funkcie farieb s širokým gamutom — oklch, lab, lch, color(display-p3) — sú tiež podporované, obmedzené na sRGB, keď sú mimo gamutu. 🎨 Text nad obrázkami a gradientmi. Na rozdiel od väčšiny podobných nástrojov, tento sa nevzdáva netextových pozadí ani neverí tomu, čo hlásia 'getComputedStyle' / 'CSS.getBackgroundColors'. Prechádza poradie maľovania prehliadača, aby zložil skutočné pozadie — opacita, režimy miešania, lineárne gradienty, backdrop-filter — a keď to nestačí, tento nástroj na kontrolu kontrastu farieb vzorkuje vykreslené pixely na mieste textu. ❓ Otázky a odpovede 📌 Prečo má rovnaká farebná dvojica niekedy rôzne verdikty pod WCAG a APCA? ↳ WCAG meria luminanciu; APCA meria percepčný kontrast. Dvojica, ktorá prejde 4.5:1, môže stále nedosiahnuť prah Lc Bridge-PCA — prísnejší model. 📌 Nahrádza APCA WCAG? ↳ Nie — APCA nie je náhradou, ale užitočným druhým názorom. Tento kontrolór kontrastu hlási oboje. 📌 Môžem skenovať lokálny súbor alebo svoj vývojový server s týmto kontrolórom prístupnosti? ↳ Áno. Povoliť "Povoliť prístup k URL súborov" v nastaveniach rozšírenia. Otvorte URL file:// alebo localhost a kliknite na ikonu panela nástrojov. Iba chrome://, Chrome Web Store a iné obmedzené schémy sú preskočené. 📌 Certifikuje tento nástroj zhody s ADA? ↳ Nie. Kontroluje iba kontrast farieb — jednu stránku prístupnosti. Zhoda s ADA je právne určenie pokrývajúce mnohé normy a kritériá (semantika, prístup cez klávesnicu, alternatívny text, titulky a ďalšie) a mala by byť posúdená kvalifikovaným odborníkom.