WCAG 1.4.1 Použití barvy

Kritérium úspěšnosti 1.4.1 zajišťuje, že se informace neztratí pro lidi, kteří vidí barvy jinak nebo vůbec — lidi s poruchou barevného vidění, slabozraké lidi a kohokoli, kdo používá monochromatický nebo vysoce kontrastní displej. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.1.4.1). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Barva nesmí být jediným vizuálním prostředkem k:

• sdělení informace („zlevněné ceny jsou červené“);
• označení akce;
• vyzvání k reakci;
• rozlišení vizuálního prvku (například odkazu uvnitř odstavce).

Barvu lze stále používat — jen potřebuje druhý vizuální signál: text, ikonu, podtržení, vzor nebo tvar.

U odkazů uvnitř textu dokument W3C Understanding přijímá jako dodatečný signál rozdíl ve světlosti: pokud má barva odkazu kontrast alespoň 3:1 vůči okolnímu textu (technika G183), považuje se za rozlišitelnou. Odkazy, které nejsou vizuálně odlišeny vůbec, do rozsahu 1.4.1 nespadají, i když se špatně používají.

Typické chyby v e-shopu

• odkazy v popisech produktů, obchodních podmínkách nebo zápatí zobrazené jen trochu jinou barvou, bez podtržení;
• chybně vyplněná pole formuláře označená jen červeným okrajem;
• dostupnost zboží zobrazená jako zelená nebo červená tečka bez textu („Skladem“, „Není skladem“);
• vzorníky barev bez názvů, takže kupující nerozezná „námořnickou modrou“ od „černé“;
• grafy nebo průvodce velikostmi, kde se kategorie liší jen barvou;
• vybraná velikost nebo aktuální krok vyznačené jen změnou barvy.

Jak to zkontrolovat

Automaticky: náš nástroj označí odkazy uvnitř bloku textu, které lze od okolního textu odlišit jen barvou (pravidlo odkaz v bloku textu). Jiná použití barvy — stavové tečky, chybové stavy, grafy — automaticky posoudit nelze a vyžadují ruční kontrolu.

Ručně: zobrazte stránku ve stupních šedi (rozšířením prohlížeče nebo barevným filtrem operačního systému). Cokoli, čemu už nerozumíte — co je odkaz, které pole má chybu, která možnost je vybraná — kritérium nesplňuje. Zkontrolujte stavy při najetí myší, při fokusu, při chybě a při výběru.

Jak to opravit

• Odkazy v textu podtrhávejte, alespoň v běžném textu a při najetí myší a fokusu.
• K chybám a dostupnosti zboží přidejte text a ikonu.
• U každého vzorníku barvy uveďte název, alespoň jako přístupný název a při výběru.
• V grafech používejte kromě barvy i vzory, popisky nebo přímé poznámky.
• Vybranou možnost označte okrajem, zaškrtnutím nebo tučným textem, ne jen novou barvou.

Související kritéria

• 1.4.3 Kontrast (minimální) — 4,5:1 pro text.
• 1.4.11 Netextový kontrast — 3:1 pro ikony a ovládací prvky.
• 1.3.3 Smyslové charakteristiky — instrukce, které spoléhají na barvu.

Časté otázky

Musí být odkazy v textu podtržené?

Ne vždy, ale samotná barva nestačí, pokud nedává rozdíl světlosti alespoň 3:1 vůči okolnímu textu (technika W3C G183). Nejjednodušší a nejspolehlivější možností je podtržení.

Stačí červený okraj u chybně vyplněného pole?

Ne. Přidejte druhý signál, který na barvě nezávisí, například ikonu a chybovou zprávu v textu. Popis chyby v textu požaduje i 3.3.1 Identifikace chyb.

Zakazuje 1.4.1 barevné kódování?

Ne. Barva je dovolená a užitečná; jen nesmí být jediným vizuálním prostředkem. Přidejte k ní text, vzor, ikonu nebo tvar.

Týká se 1.4.1 kontrastu?

Ne. Kontrast textu řeší 1.4.3 a kontrast ikon a ovládacích prvků 1.4.11. 1.4.1 se týká barvy jako jediného signálu, bez ohledu na kontrast.