Žádné nahrávání, 100% lokálně, bez účtu

Kontrolor kontrastu WCAG

Napište nebo vyberte dvě barvy a okamžitě uvidíte poměr kontrastu WCAG se štítky AA/AAA pro běžný a velký text.

Jak Kontrolor kontrastu funguje

Tento nástroj vypočítá poměr kontrastu WCAG mezi dvěma barvami a ukáže, zda dvojice splňuje úroveň AA nebo AAA pro běžný text, velký text a netextové prvky rozhraní. Vše se počítá lokálně ve vašem prohlížeči; zadané barvy se nikdy nikam nenahrávají.

Napsal Bastien Sulyan

Kontrolor kontrastu: návod krok za krokem

  1. Zadejte nebo vyberte barvu popředí (textu).
  2. Zadejte nebo vyberte barvu pozadí.
  3. Přečtěte si poměr kontrastu a odznaky AA/AAA pro běžný text, velký text a netextové prvky rozhraní.
  4. Použijte Prohodit barvy pro kontrolu dvojice v opačném pořadí.

Časté případy použití

  • Kontrola primární firemní barvy proti bílé nebo černé před nasazením komponenty tlačítka.
  • Ověření, že tlumený šedý text v těle stránky stále splňuje AA na světlém pozadí karty.
  • Potvrzení, že barva odkazu uvnitř odstavce dosahuje prahu 4,5:1 pro běžný text.
  • Test, zda velký, tenčí nadpis stále splňuje uvolněný práh 3:1 pro velký text.

Často kladené otázky

Odesílá tento nástroj mé barvy na server?

Ne, výpočet probíhá zcela ve vašem prohlížeči pomocí JavaScriptu; nic, co zadáte, se nikam neodesílá.

Jaký poměr kontrastu potřebuji pro AA nebo AAA?

WCAG 2.x vyžaduje 4,5:1 pro AA u běžného textu, 7:1 pro AAA u běžného textu, 3:1 pro AA u velkého textu a 4,5:1 pro AAA u velkého textu.

Co se považuje za velký text?

Alespoň 24px (18pt) normální tloušťky nebo přibližně 18,7px (14pt) tučně; vše menší používá prahy pro běžný text.

Proč prohození popředí a pozadí nezmění poměr kontrastu?

Vzorec pro poměr je symetrický: porovnává jen světlejší a tmavší jas, ne to, která barva je použita pro text. Prohození je přesto užitečné, protože ukáže, zda dvojice funguje i s obrácenými rolemi, například tmavý text na světlém štítku oproti světlému textu na tmavém štítku.

Zaručuje splnění AA, že je můj návrh přístupný?

Ne. Kontrast je jedno z mnoha kritérií úspěšnosti WCAG. Volba barev pro lidi s poruchami barevného vidění, viditelnost fokusu, změna velikosti textu a ovládání klávesnicí jsou samostatné kontroly; simulátor barvosleposti na tomto webu pokrývá jednu z nich.

Je to oficiální nástroj W3C nebo WebAIM?

Ne. Nezávisle implementuje veřejný vzorec kontrastu WCAG 2.x a není spojen s W3C ani žádnou jinou organizací zabývající se přístupností.

Související nástroje

Zachovejte vše lokálně, prozkoumejte doplňkové nástroje.

Všechny nástroje pro vývojáře