Světle šedý text na bílém pozadí může na první pohled vypadat elegantně a minimalisticky – a být zcela nečitelný pro uživatele se zrakovým postižením, silným slunečním zářením na obrazovce nebo jen obyčejným namáháním očí na konci pracovního dne. Barevný kontrast je jedním z „nejtechnickějších“ kritérií přístupnosti – existují přesná čísla, která je třeba splnit – ale je také jedním z nejjednodušších, které lze předem otestovat a opravit.

Ve zkratce – co tento průvodce pokrývá

  1. Jaké poměry vyžaduje WCAG
  2. Proč je u velkého textu povolen menší kontrast
  3. Jak ověřit kontrastní poměr v praxi
  4. Jak předem vybrat dostupnou paletu barev

Jaké poměry WCAG vyžaduje

WCAG definuje kontrastní poměr jako číslo mezi 1:1 (vůbec žádný kontrast — identická barva) a 21:1 (maximální možný kontrast — čistě černá na čistě bílé). Na úrovni AA (povinná úroveň na většině míst včetně Izraele) je požadavkem poměr mezi běžným textem a pozadím za ním alespoň 4,5:1. Na přísnější úrovni AAA se požadavek zvyšuje na 7:1.

Proč je velký text povolen s menším kontrastem

Velký text zůstává čitelný i při nižším kontrastu, takže WCAG pro něj nastavuje snazší práh: 3:1 na úrovni AA (místo 4,5:1) a 4,5:1 na úrovni AAA (místo 7:1). „Velký text“ je definován jako text o velikosti 18 bodů nebo větší (přibližně 24 pixelů) nebo 14 bodů nebo větší (přibližně 18,7 pixelů), pokud je tučný. Velké nadpisy si například mohou „dovolit“ o něco nižší kontrast než běžný hlavní odstavec a přesto požadavek splňují.

Ilustrativní schéma Porovnání kontrastních poměrů Tři příklady textu na pozadí s různými kontrastními poměry Kontrastní poměr mezi textem a pozadím Ukázka textu 1,8:1 — ✕ se nezdaří Ukázka textu 7.1:1 — ✓ splňuje také AAA Ukázka textu 5,4:1 — ✓ splňuje úroveň AA Běžný text: alespoň 4,5:1 · Velký text (24 pixelů+ nebo 18,7 pixelů tučně): alespoň 3:1 Nástroje jako WebAIM Contrast Checker vám poskytnou přesný poměr před dokončením barevné palety
Tři příklady textu na pozadí: příliš nízký poměr (1,8:1) selže i na základní úrovni; ostatní dva poměry splňují požadavky AA a AAA.

Jak zkontrolovat kontrastní poměr v praxi

Není třeba počítat ručně – bezplatné nástroje, jako je WebAIM Contrast Checker, vám umožní zadat kódy barev textu a pozadí a okamžitě získat přesný poměr a skóre vyhovění/neúspěchu pro každou úroveň. Vyplatí se zkontrolovat nejen text na plném pozadí, ale také text přes obrázky na pozadí nebo přechody – kde se kontrast mezi různými oblastmi stejného obrázku může lišit, takže je nejlepší otestovat „nejproblematičtější“ místo.

💡 Praktický tip

Nejen text: stejný požadavek na kontrast (s jednodušší prahovou hodnotou, 3:1) platí také pro grafické komponenty uživatelského rozhraní, jako jsou obrysy polí formuláře, funkční ikony a okraje tlačítek – nejen pro písmena.

Jak předem vybrat dostupnou paletu barev

Nejúčinnějším přístupem je kontrola kontrastu ve fázi návrhu šablony, nikoli v každém dokumentu zvlášť. Při výběru barev značek pro nadpisy, hlavní text a odkazy se vyplatí předem potvrdit, že každá kombinace textu a pozadí, kterou skutečně používáte, splňuje alespoň poměr 4,5:1. Tímto způsobem každý nový dokument vytvořený ze šablony automaticky „zdědí“ správný kontrast, namísto kontroly každého dokumentu zvlášť poté, co byl již napsán.

Chcete vědět, zda vaše dokumenty splňují požadavky na kontrast?

Náš nástroj kontroluje barevný kontrast jako součást automatického skenování každého souboru PDF na vašem webu.

Naskenujte svůj web zdarma ←