Barevný kontrast a WCAG: jaký je požadavek a jak ho měřit?

Stručná odpověď. WCAG úroveň AA vyžaduje kontrastní poměr nejméně 4,5:1 mezi textem a pozadím u běžného textu a 3:1 u velkého textu a grafických prvků (ikony, rámečky vstupních polí). Nedostatečný kontrast je zdaleka nejčastější chyba přístupnosti v e-shopech — a naštěstí jde často opravit najednou napříč celou šablonou. Navíc je 100% přesně měřitelný softwarem, takže o něm není o čem diskutovat.

Proč je kontrast tak důležitý?

Světle šedý text na bílé vypadá na vašem monitoru elegantně, ale špatně se čte slabozrakým, starším návštěvníkům a komukoli, kdo se na telefon dívá na ostrém slunci. Velká část vašich zákazníků spadá nejméně do jedné z těchto skupin. Špatný kontrast vás tedy doslova stojí čitelnost — a tím i prodeje.

Jaké jsou přesné požadavky WCAG na kontrast?

Norma rozlišuje podle velikosti textu a typu prvku. Čím menší písmo, tím ostřejší musí být kontrast:

• Běžný text (menší než 24px, nebo 18,66px tučně): nejméně 4,5:1.
• Velký text (od 24px, nebo 18,66px tučně — tedy 18pt / 14pt bold): nejméně 3:1.
• Grafické komponenty (ikony, rámečky vstupních polí, rámečky aktivních tlačítek): nejméně 3:1 vůči sousedním barvám (WCAG 1.4.11).

Kontrast se vyjadřuje jako poměr: 1:1 znamená žádný kontrast, 21:1 je čistá černá na bílé. Několik běžných kombinací:

Jak kontrast sami změříte?

Nemusíte hádat ani počítat vzorce. Existují tři spolehlivé způsoby:

1. Automatizovaný sken (doporučeno). Nástroje jako Seviranta spočítají hodnotu kontrastu každého textového prvku na stránce najednou a označí přesný řádek kódu u prohřešků — včetně naměřené hodnoty vedle té požadované.
2. Vývojářské nástroje vašeho prohlížeče. V Chrome nebo Edge klikněte pravým tlačítkem na text → „Prozkoumat"; výběr barvy často rovnou zobrazí kontrastní poměr a stav podle WCAG.
3. Ruční kontrola kontrastu. Zadáte dva hexadecimální kódy a dostanete poměr. Užitečné ve fázi návrhu, ale zdlouhavé pro celý živý web.

Jak chyby kontrastu opravíte efektivně?

Krása chyb kontrastu: téměř vždy jsou řízené centrálně. V Shopify, WooCommerce nebo Magentu jsou barvy navázané na globální proměnné ve vaší šabloně. Ztmavte nebo zesvětlete barvu textu či pozadí o odstín, dokud poměr nesedí, a požadavek na kontrast splníte najednou pro celý e-shop.

Začněte u konverzního trychtýře: text na tlačítkách „Přidat do košíku" a „Objednat", cenovky, položky menu a upozornění u pokladny. Tam je největší zisk. Mimochodem, jde o jednu z 10 nejčastějších chyb přístupnosti.

Proč tohle widget přístupnosti nevyřeší?

Mnoho podnikatelů doufá, že kontrast vyřeší overlay widgetem a jeho tlačítkem „vysoký kontrast". To je technicky i právně nedostatečné: dozorové orgány a AI scrapery kontrolují výchozí stav vašeho zdrojového kódu. Pokud vaše CSS nesplňuje 4,5:1, nevyhovujete — dočasná JavaScriptová vrstvička na tom nic nemění. Proč vás overlay widget nechrání jde v tomto do hloubky. Jediná udržitelná cesta je upravit barvy ve vlastní šabloně.

Co se změní s WCAG 3.0 (APCA)?

V připravovaných směrnicích WCAG 3.0 nahradí současný matematický vzorec kontrastu algoritmus APCA (Advanced Perceptual Contrast Algorithm). APCA lépe odpovídá tomu, jak lidské oko kontrast skutečně vnímá — zohledňuje písmo, tloušťku a kontext namísto čisté světlosti dvou barev. Pokud teď svůj web nastavíte přesně na požadavek 4,5:1 podle WCAG 2.1/2.2, budete dobře připraveni i na tento přechod.

Zjistěte, jak na tom váš web je

Zajímá vás, které barvy na vašem webu ještě nevyhovují? Naskenujte zdarma jednu stránku. U každého místa uvidíte naměřený kontrastní poměr vedle požadovaného, se skutečnými barvami vašeho webu — za méně než 60 sekund, bez účtu.