Kontrola Kontrastu

Bezplatný online nástroj pro kontrolu barevného kontrastu pro přístupnost WCAG AA a AAA. Zadejte barvy textu a pozadí a okamžitě ověřte shodu.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

21:1
Contrast Ratio
WCAG AA WCAG AAA
Normal Text
Large Text

Jak to funguje

  1. Zadejte barvu textu ve formátu HEX (např. #2c2c2c) nebo ji vyberte pomocí nástroje pro výběr barvy.
  2. Zadejte barvu pozadí stejným způsobem.
  3. Klikněte na tlačítko pro kontrolu a nástroj okamžitě vypočítá kontrastní poměr.
  4. Zkontrolujte, zda výsledek splňuje požadavky WCAG AA nebo AAA.
  5. Upravte barvy podle potřeby, dokud nedosáhnete požadované úrovně přístupnosti.

Příklad

Vstup: Barva textu: #222222, Barva pozadí: #f5f5f5
Výsledek: Kontrastní poměr: 16.10:1 — Splňuje WCAG AA i AAA pro normální i velký text

Časté dotazy

Kontrastní poměr vyjadřuje rozdíl v relativní svítivosti dvou barev. Vypočítává se podle vzorce WCAG jako poměr mezi světlejší a tmavší barvou, přičemž výsledek se pohybuje od 1:1 (žádný kontrast) do 21:1 (maximální kontrast).

Pro splnění úrovně AA je potřeba alespoň 4.5:1 pro normální text a 3:1 pro velký text (18pt nebo 14pt tučné). Pro nejvyšší úroveň AAA jsou požadavky 7:1 a 4.5:1.

Vaše data jsou zcela v bezpečí. Veškeré zpracování probíhá přímo ve vašem prohlížeči na straně klienta. Žádné barvy ani jiné informace se neodesílají na žádný server.

Ano, přestože je nástroj zaměřen na webový obsah, kontrastní poměry jsou relevantní i pro mobilní aplikace. Doporučení WCAG jsou široce přijímaná i v oblasti mobilního designu.