Zadejte HEX barvy nebo vyberte barvy Pantone pro popředí a pozadí.
Zkontrolujte poměr kontrastu a výsledky WCAG AA nebo AAA pro běžný text, velký text a UI komponenty.
Použijte živý náhled, prohoďte barvy, zkopírujte CSS nebo vyzkoušejte dostupné návrhy Pantone.

Použití kontroly kontrastu

Ověřte páry značkových barev před použitím v digitálních návrzích.
Zkontrolujte tlačítka, formuláře, navigaci a další UI komponenty kvůli čitelnému kontrastu.
Porovnejte palety inspirované Pantone před převodem tiskových barev na obrazovky.
Dokumentujte výsledky WCAG pro kontroly přístupnosti a předání designu.

Kontrola barevného kontrastu pro workflow WCAG, UI a Pantone

Použijte tuto kontrolu kontrastu, když potřebujete ověřit, že barva textu, pozadí, stav tlačítka nebo paleta značky bude čitelná před použitím na webu, v aplikaci, prezentaci nebo design systému.

Správné čtení výsledku WCAG

Nástroj vypočítá relativní jas obou barev a vrátí poměr kontrastu používaný WCAG. Běžný text obvykle vyžaduje 4.5:1 pro AA a 7:1 pro AAA, zatímco velký text a důležité UI komponenty mají nižší prahy.

Propojte barvy Pantone s digitální přístupností

Barvy Pantone se často volí pro značku a tisk, ale jejich obrazovkové ekvivalenty je stále nutné kontrolovat z hlediska přístupnosti. Hledejte názvy Pantone nebo hodnoty HEX, zobrazte náhled páru a porovnejte dostupné alternativy před předáním designu či vývoji.

Praktický postup pro designéry a vývojáře

Začněte přesnými hodnotami HEX z designového souboru, otestujte směr popředí i pozadí, zkopírujte CSS nebo zprávu a uložte vyhovující pár barev spolu s dokumentací palety Pantone.

Časté dotazy ke kontrole kontrastu

Co tato kontrola kontrastu měří?

Měří poměr jasového kontrastu mezi barvou popředí a barvou pozadí a porovnává výsledek s prahy WCAG.

Jaké jsou požadavky kontrastu WCAG AA a AAA?

WCAG AA vyžaduje alespoň 4.5:1 pro běžný text a 3:1 pro velký text nebo UI komponenty. WCAG AAA vyžaduje 7:1 pro běžný text a 4.5:1 pro velký text.

Lze barvy Pantone kontrolovat pro webovou přístupnost?

Ano. Reference Pantone lze převést na obrazovkové hodnoty barev a potom zkontrolovat digitální kontrast. Finální barvy vždy ověřte v médiu, ve kterém se zobrazí.

Upozornění ke kontrastu

Výsledky se počítají z digitálních hodnot barev a slouží pro plánování přístupnosti. Fyzický tisk, materiály, osvětlení a kalibrace displeje mohou změnit vnímaný kontrast.