Kontroler kontrastu – Contrast Checker

Tento Kontroler kontrastu prověřuje barevný kontrast WCAG a APCA pro shodu s ADA — test přístupnosti barev pro jakoukoli webovou…

✅ Co získáte z tohoto kontroleru kontrastu: - kontrastní poměr WCAG 2.2 a APCA Lc, - prvky s problémy zvýrazněné na stránce, - CSS pravidla, která vytvořila barvy, sledována prostřednictvím zdrojových map (pokud jsou k dispozici), - vestavěný nástroj pro výběr barev s analyzátorem kontrastu a navrhovanými alternativami, - živý náhled oprav, - export oprav do CSS (s komentáři pro lokalizaci zdrojů). 🔍 Vytvořen jako webový kontroler barevného kontrastu, který prochází pseudo-stavy, shadow DOM, iframes se stejným původem a textem přes obrázky a gradienty — nejen ploché pozadí. ⚠️ Vyžaduje oprávnění pro ladění. Pokrytí tohoto kontroleru kontrastu je možné pouze prostřednictvím protokolu Chrome DevTools, který vyžaduje oprávnění 'debugger'. Jakmile je připojeno, Chrome zobrazuje informační lištu na všech kartách a neskrývá ji při odpojení. ⚡ Vysoce optimalizovaný pracovní postup: • Zobrazte všechny prvky s problémy v oblasti přístupnosti barev zvýrazněné na první pohled. • Okamžitě náhled změn, s přepočítanými kontrastními poměry a verdikty. • Použijte vlastní CSS na kartě Styl; dotčené problémy jsou označeny v seznamu. • Pro ruční kontrolu barevného kontrastu použijte vestavěný nástroj pro výběr barev: levým kliknutím nastavte popředí, pravým kliknutím pozadí, a poměr se okamžitě aktualizuje. • Použijte kartu Výjimky k skrytí všeho kromě prvků, které opravujete. 📐 Kritéria za verdikty. Tento kontroler kontrastního poměru testuje přístupnost barev podle požadavků WCAG a APCA. APCA Lc je hodnoceno podle prahových hodnot Bridge-PCA, které jsou přísnější než odpovídající poměry WCAG — takže úspěch v Bridge-PCA vždy znamená úspěch v WCAG. 🔬 Co je APCA? APCA (Accessible Perceptual Contrast Algorithm) je model, který sleduje, jak lidé čtou text na obrazovce. Dvě barevné dvojice se stejným poměrem WCAG mohou vypadat znatelně odlišně, a jejich APCA Lc (luminanční kontrast) to odráží: dvojice může projít WCAG, ale může se zdát obtížně čitelná. Tento webový kontroler přístupnosti barev vypočítává obě čísla. 🚧 Omezení: 1. Jako každý jiný kontroler přístupnosti webu, i tento poskytuje odhady s nejlepšími snahami, nikoli certifikát o shodě. 2. Pokrytí je pouze textové; kontrola netextových prvků (WCAG 1.4.11) je na plánu. 3. Cross-origin iframes nejsou procházeny. 4. Složitá pozadí a animace jsou vzorkována na konečném počtu prostorových a časových bodů; poměr nejhoršího vzorku je hlášen, ale může být stále optimistický; vzorkovač může být také zmaten renderovacími artefakty. 5. Vysoce dynamické stránky mohou produkovat falešné problémy. 6. Tento kontroler kontrastu barev automaticky nespouští OCR na obrázcích; testujte obrázky s významným textem pomocí zahrnutého nástroje pro výběr barev. 🔒 Soukromí a oprávnění. ▸ Běží lokálně; žádná data webové stránky nikdy neopustí váš stroj. ▸ Pouze 'activeTab': skript analýzy je vložen, když kliknete na ikonu na panelu nástrojů. ▸ Oprávnění 'debugger' je vyžadováno pro vstup do Shadow DOM a iframes, sledování CSS zdrojů a vzorkování složitých pozadí. 🧮 Detaily přesnosti. Poloprůhledný text a opacita předků jsou správně zpracovány: popředí je složeno přes jeho skutečné pozadí před měřením luminance, takže hlášený poměr odpovídá tomu, co uživatelé skutečně vidí. Široké barevné funkce — oklch, lab, lch, color(display-p3) — jsou také podporovány, omezovány na sRGB, když jsou mimo gamut. 🎨 Text přes obrázky a gradienty. Na rozdíl od většiny podobných nástrojů, tento se nevzdává netextových pozadí ani nevěří tomu, co hlásí 'getComputedStyle' / 'CSS.getBackgroundColors'. Prochází pořadím malování prohlížeče, aby složil skutečné pozadí — opacita, režimy míchání, lineární gradienty, backdrop-filter — a když to nestačí, tento nástroj pro kontrast barev vzorkuje vykreslené pixely na místě textu. ❓ Q&A 📌 Proč má stejná barevná dvojice někdy různé verdikty podle WCAG a APCA? ↳ WCAG měří luminanci; APCA měří percepční kontrast. Dvojice, která splňuje 4.5:1, může stále nedosáhnout prahu Bridge-PCA Lc — přísnějšího modelu. 📌 Nahrazuje APCA WCAG? ↳ Ne — APCA není náhradou, ale užitečným druhým názorem. Tento kontroler kontrastu hlásí obojí. 📌 Mohu skenovat místní soubor nebo svůj vývojový server tímto kontrolerem přístupnosti? ↳ Ano. Povolte "Povolit přístup k URL souborů" v nastavení rozšíření. Otevřete URL file:// nebo localhost a klikněte na ikonu na panelu nástrojů. Pouze chrome://, Chrome Web Store a další omezené schémata jsou vynechány. 📌 Certifikuje tento nástroj shodu s ADA? ↳ Ne. Kontroluje pouze barevný kontrast — jednu stránku přístupnosti. Shoda s ADA je právní určení pokrývající mnoho standardů a kritérií (sémantika, přístup z klávesnice, alt text, titulky a další) a měla by být posouzena kvalifikovaným odborníkem.