Contrast Checker vypočítá kontrastní poměr WCAG 2.1 mezi dvěma barvami a ohodnotí ho podle prahů AA/AAA pro běžný i velký text. Živý náhled zobrazuje text vykreslený ve zvolených barvách a tlačítko „vybrat pozadí stránky“ vzorkuje aktuální stránku.
Přístupnost je stále více vyžadovaná — soulad s WCAG je v mnoha jurisdikcích zákonným požadavkem, a i tam, kde není, slabý kontrast odrazuje uživatele. Contrast Checker vám okamžitě řekne, zda dvě barvy splňují standardy WCAG. Vyberte popředí a pozadí pomocí výběru barev nebo vložte hex hodnoty; nástroj vypočítá kontrastní poměr podle oficiálního vzorce WCAG pro jas a ohodnotí ho podle čtyř prahů: AA normal (≥4,5:1), AA large (≥3:1), AAA normal (≥7:1) a AAA large (≥4,5:1). Každý práh zobrazuje jasný odznak Pass/Fail. Živý náhled vykreslí velký i běžný text ve zvolených barvách, takže vidíte skutečný vizuální dopad. Pohodlné tlačítko vzorkuje barvu pozadí body aktuální stránky — užitečné při ověřování, zda kombinace barev na reálném webu splňuje standardy. Vše probíhá lokálně ve vašem prohlížeči, žádné nahrávání dat.
Pro výpočet kontrastního poměru používá oficiální vzorec WCAG pro jas. Výsledek je přesný a odpovídá každému kompatibilnímu nástroji pro kontrolu přístupnosti.
Pass/fail pro AA normal (≥4,5:1), AA large (≥3:1), AAA normal (≥7:1) a AAA large (≥4,5:1) — vše zobrazené v přehledné mřížce.
Vykreslí skutečný velký i běžný text ve vámi zvolených barvách, takže vidíte vizuální dopad vedle číselného poměru.
Jedním kliknutím zjistí vypočtenou barvu pozadí body aktuální stránky — užitečné pro testování reálných kombinací.
Zadejte hex hodnotu nebo použijte nativní výběr barvy. Hodnoty se obousměrně synchronizují, ať upravujete kteroukoliv z nich.
Jedním kliknutím prohodíte popředí a pozadí — užitečné při kontrole invertovaných témat nebo stavů hover.
Před finalizací barevné palety zkontrolujte každou barvu textu vůči jejímu pozadí, abyste zajistili soulad s WCAG AA — ušetříte si pozdější přepracování.
Použijte „vybrat pozadí stránky“ na živém webu a vložte skutečnou barvu textu — najdete porušení přístupnosti během pár minut bez otevírání Lighthouse.
Pokud značka zvolí barvu, která by mohla neprojít kontrolou přístupnosti, použijte checker k nalezení nejbližší vyhovující varianty (tmavšího/světlejšího odstínu).
Ověřte, že barvy stavů hover/active/disabled stále splňují požadavky na kontrast, nejen výchozí stav.
Tmavá témata často neprojdou kontrolou kontrastu u šedého textu na šedém pozadí. Zkontrolujte své nejtmavší šedé odstíny vůči nejtmavším pozadím a odhalte tyto případy.
Klikněte na ikonu Contrast v docku DevSuite Pro. Otevře se panel s poli pro barvu popředí a pozadí.
Pro každou barvu použijte výběr barvy nebo vložte hex hodnotu. Živý náhled se aktualizuje při každé změně barvy.
Velké číslo (např. 4,8:1) je kontrastní poměr. Vyšší je lepší. 3 je naprosté minimum; 4,5 je cíl pro běžný text.
Odznaky Pass/fail pro AA a AAA, běžný i velký text, ukazují na první pohled, na jakou úroveň vaše kombinace dosahuje.
Pokud kombinace neprojde, upravte barvy. Ztmavte popředí nebo zesvětlete pozadí (případně naopak), dokud cílová úroveň nezobrazí Pass.
Nainstalujte si DevSuite Pro zdarma a odemkněte 64+ vývojářských nástrojů pro svůj prohlížeč.
