WCAG 1.4.3 Kontrast (minimální)

Kritérium úspěšnosti 1.4.3 zajišťuje, že text přečtou i lidé, kteří vnímají kontrast hůře — starší návštěvníci, lidé se slabozrakostí nebo poruchou barevného vidění a kdokoli, kdo se dívá na telefon na slunci. Jde o úroveň AA, takže patří k tomu, o co se opírá norma EN 301 549 a Evropský akt o přístupnosti (článek 9.1.4.3). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Kontrastní poměr mezi textem a jeho pozadím musí být alespoň:

• 4,5:1 u běžného textu;
• 3:1 u velkého textu — alespoň 18 pt (24 CSS px) v běžné tloušťce, nebo 14 pt (přibližně 18,66 CSS px) tučně.

Poměr se počítá z relativní svítivosti obou barev a pohybuje se od 1:1 (stejná barva) do 21:1 (černá na bílé). Pravidlo platí i pro obrázky textu, například banner se sloganem vloženým přímo do obrázku.

Výjimky:

• text v logu nebo názvu značky;
• text neaktivních ovládacích prvků, například zakázaného tlačítka;
• dekorativní text, který nikdo nepotřebuje číst, a text, který je součástí fotografie s jiným podstatným obsahem.

Typické chyby v e-shopu

• světle šedý zástupný (placeholder) nebo pomocný text ve formulářích (například #aaa na bílé má asi 2,3:1);
• původní cena, štítky „vyprodáno“ a drobné písmo pod tlačítkem „Přidat do košíku“;
• bílý text na fotografickém banneru, kde je část fotografie světlá;
• barva značky použitá pro odkazy nebo tlačítka, která na velké obrazovce vypadá dobře, ale nedosahuje 4,5:1;
• text, který má nízký kontrast jen při najetí myší nebo při fokusu.

Jak to zkontrolovat

Automaticky: náš nástroj měří kontrast každého viditelného textového prvku (pravidlo barevný kontrast) a ukáže nalezené barvy i poměr. Text přes obrázky nebo přechody nedokáže vždy posoudit — takové výsledky jsou označeny k ruční kontrole.

Ručně: u textu přes fotografie zkontrolujte nejsvětlejší část obrázku za textem. Zkontrolujte také stav při najetí myší, při fokusu a při chybě, nejen výchozí stav. Kontrola kontrastu vám dá přesný poměr pro dvě barvy.

Jak to opravit

• Ztmavte text nebo zesvětlete pozadí, dokud poměr nedosáhne alespoň 4,5:1; obvykle stačí malá změna světlosti.
• Text na obrázcích umístěte na plný nebo poloprůhledný podklad.
• Nepoužívejte zástupný text jako jediný popisek; pokud ho ponecháte, zajistěte, aby byl také čitelný.
• Barvu opravte jednou v nastavení šablony nebo v CSS proměnných, ne stránku po stránce.

Související kritéria

• 1.4.11 Netextový kontrast — ikony, okraje polí a indikátory fokusu (3:1).
• 1.4.1 Použití barvy — barva nesmí být jediným způsobem, jak sdělit informaci.
• 1.4.4 Změna velikosti textu — text musí zůstat použitelný při zvětšení na 200 %.

Časté otázky

Jaký kontrastní poměr vyžaduje WCAG AA?

Alespoň 4,5:1 mezi textem a jeho pozadím a alespoň 3:1 u velkého textu. Úroveň AAA (1.4.6) požaduje 7:1 a 4,5:1.

Co se ve WCAG považuje za velký text?

Text o velikosti alespoň 18 bodů (24 CSS pixelů) v běžné tloušťce, nebo alespoň 14 bodů (přibližně 18,66 CSS pixelu) tučně.

Platí 1.4.3 i pro loga a neaktivní tlačítka?

Ne. Text, který je součástí loga nebo názvu značky, text neaktivních (zakázaných) ovládacích prvků a čistě dekorativní text jsou výjimkou.

Vztahuje se 1.4.3 na ikony a okraje formulářových polí?

Ne, 1.4.3 se týká jen textu a obrázků textu. Ikony, rámečky fokusu a okraje formulářových polí spadají pod 1.4.11 Netextový kontrast, které požaduje 3:1.