WCAG 1.4.11 Netextový kontrast

Kritérium úspěšnosti 1.4.11 zajišťuje, že slabozrací lidé vidí ty části stránky, které potřebují používat a chápat: kde je formulářové pole, co ukazuje ikona, která možnost je vybraná, kde je fokus klávesnice. Bylo přidáno ve WCAG 2.1, jde o úroveň AA a je součástí normy EN 301 549 (článek 9.1.4.11). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Vizuální podoba následujících prvků musí mít kontrastní poměr alespoň 3:1 vůči sousední barvě (barvám):

• Komponenty uživatelského rozhraní: vizuální informace potřebné k identifikaci komponenty a jejích stavů — okraj textového pole, obrys zaškrtávacího políčka, samotné zaškrtnutí, indikátor vybrané záložky, indikátor fokusu;
• Grafické objekty: části grafiky potřebné k pochopení obsahu — čáry a sloupce grafu, části ikony, které nesou význam.

Výjimky:

• neaktivní komponenty (například zakázané tlačítko);
• komponenty, jejichž vzhled určuje prohlížeč a autor ho nezměnil;
• grafika, u které je určitá podoba nezbytná (například fotografie nebo teplotní mapa, kde by změna barev změnila informaci).

Text sem nepatří — spadá pod 1.4.3.

Typické chyby v e-shopu

• světle šedé okraje vstupních polí (#ddd na bílé je hluboko pod 3:1) bez jiného vodítka;
• vlastní zaškrtávací políčka, přepínače a výběr velikosti, jejichž vybraný stav je jen bledý odstín;
• tlačítka jen s ikonou (vyhledávání, košík, seznam přání) ve světlé barvě značky;
• vlastní rámeček fokusu ve světlé barvě, nebo outline: none s téměř neviditelnou náhradou;
• hodnocení hvězdičkami s bledými prázdnými a jen o málo tmavšími plnými hvězdičkami;
• čáry grafu v zákaznickém účtu, které jsou vůči pozadí příliš světlé.

Jak to zkontrolovat

Automaticky: žádné automatické pravidlo našeho nástroje tomuto kritériu neodpovídá. axe-core měří kontrast textu, ale nepozná, které okraje, ikony nebo stavy jsou k pochopení komponenty potřeba. Je potřeba ruční kontrola.

Ručně: u každého formulářového pole, tlačítka, ikony a stavu (výchozí, při najetí myší, fokus, vybráno, chyba) vezměte barvu podstatné části a barvu vedle ní a změřte je v kontrole kontrastu. Poměr musí být alespoň 3:1. Projděte stránku klávesou Tab a zkontrolujte každý indikátor fokusu.

Jak to opravit

• Ztmavte v šabloně okraje vstupních polí a barvy ikon, dokud vůči pozadí nedosáhnou 3:1.
• Vybrané stavy ukazujte jasným okrajem, zaškrtnutím nebo výplní, ne jen bledým odstínem.
• Použijte indikátor fokusu s kontrastem alespoň 3:1 vůči sousedním barvám, například tmavý obrys 2 px s odsazením.
• Pokud všechny barvy grafu nemohou dosáhnout 3:1, přidejte přímé popisky nebo vzory.

Související kritéria

• 1.4.3 Kontrast (minimální) — 4,5:1 pro text.
• 1.4.1 Použití barvy — barva nesmí být jediným vodítkem.
• Kontrola kontrastu — změřte dvě barvy.

Časté otázky

Potřebují okraje formulářových polí kontrast 3:1?

Pokud je okraj jediným vizuálním vodítkem, které ukazuje, kde pole je, pak ano: potřebuje 3:1 vůči sousední barvě. Pole s jasně kontrastní výplní pozadí se může spolehnout na ni.

Potřebují neaktivní tlačítka kontrast 3:1?

Ne. Neaktivní (zakázané) komponenty uživatelského rozhraní jsou výjimkou, stejně jako ovládací prvky, jejichž vzhled určuje prohlížeč a autor ho nezměnil.

Vztahuje se 1.4.11 na ikony?

Ano, pokud je ikona potřeba k pochopení obsahu nebo k identifikaci ovládacího prvku — například ikona košíku, vyhledávání nebo zavření bez textového popisku. Čistě dekorativní ikony se nepočítají.

Dokáže netextový kontrast zkontrolovat automatický nástroj?

Spolehlivě ne. Náš nástroj měří kontrast textu, ale okraje, ikony, rámečky fokusu a části grafů je třeba zkontrolovat ručně pomocí kontroly kontrastu.