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)?

Pro připravované směrnice WCAG 3.0 se algoritmus APCA (Advanced Perceptual Contrast Algorithm) zvažuje jako možný nástupce současného matematického vzorce kontrastu, rozhodnuto však ještě není. 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. Naskenujte svůj web zdarma.