Zkontrolujte kontrast barev a čitelnost textu podle WCAG

Nástroj ukazuje poměr kontrastu na stupnici od 1:1 (žádný kontrast) do 21:1 (maximální kontrast – černý text na bílém pozadí). Výsledek se porovnává s prahy stanovenými standardem WCAG:

• Běžný text – vyžaduje kontrast alespoň 4.5:1 pro úroveň AA (minimální standard) nebo 7:1 pro úroveň AAA (rozšířený standard). Platí pro text menší než 18pt (24px) nebo menší než 14pt (18.5px) tučný.
• Velký text / tučný – vyžaduje kontrast alespoň 3:1 pro úroveň AA nebo 4.5:1 pro úroveň AAA. Platí pro text od 18pt (24px) nebo od 14pt (18.5px) tučný – nadpisy, tlačítka, zvýraznění.
• Ikony a grafické prvky – vyžadují kontrast alespoň 3:1 pro úroveň AA. Platí pro ikony, tlačítka, pole formulářů a další UI prvky nesoucí informaci.

Úroveň AA je minimum vyžadované předpisy o digitální přístupnosti v mnoha zemích, včetně směrnice EU o přístupnosti webových stránek. Úroveň AAA zajišťuje lepší čitelnost, ale ne vždy je prakticky dosažitelná pro všechny prvky.

Pokud je kontrast příliš nízký, není nutné hledat správnou barvu metodou pokusů a omylů. Funkce Dopasuj automaticky najde variantu barvy textu, která splňuje zvolený práh kontrastu.

Jak přizpůsobení funguje:

1. Vyberte cíl přizpůsobení ze seznamu – např. AA pro běžný text nebo AAA pro velký text.
2. Spusťte funkci tlačítkem Dopasuj.
3. Nástroj prohledá varianty jasu barvy textu a navrhne nejbližší splňující požadavky.
4. Navržený kód barvy lze zkopírovat do schránky nebo přímo nastavit jako novou barvu textu.

Algoritmus zachovává odstín a sytost původní barvy a mění pouze jas. Navržená barva tak zůstává v souladu s vizuální identitou a zároveň splňuje standard přístupnosti.

Vidím chybovou zprávu o formátu barvy

Zkontrolujte formát barvy. HEX kód by měl začínat znakem # a obsahovat 3 nebo 6 znaků (např. #fff nebo #ffffff). Pro formát RGB zkontrolujte, zda jsou hodnoty odděleny čárkami a jsou v rozsahu 0-255.

Funkce Dopasuj nenachází vhodnou barvu

Když mají pozadí a text podobný jas ve stejném odstínu, algoritmus nemusí najít variantu splňující požadavky bez změny odstínu. V takovém případě zvažte změnu barvy pozadí nebo výběr úplně jiné barvy textu.

Barva v próbniku neodpovídá zadanému kódu

Próbnik barev v prohlížeči podporuje pouze formát HEX bez průhlednosti. Pokud zadáte barvu ve formátu RGBA nebo HSLA s průhledností, próbnik zobrazí pouze barevnou složku (bez alpha). Výpočty kontrastu stále zohledňují průhlednost.

Porucha barvocitu (barvoslepost) je porucha vnímání barev, která postihuje přibližně 8 % mužů a 0,5 % žen. Osoby s poruchou barvocitu mohou mít potíže s rozlišením některých párů barev, i když je kontrast jasu dostatečný.

Nejčastější typy poruchy barvocitu:

• Deuteranopie – potíže s rozlišením zelené a červené (nejčastější forma)
• Protanopie – potíže s vnímáním červené
• Tritanopie – potíže s vnímáním modré a žluté (vzácná)

Tento nástroj kontroluje kontrast jasu, který je důležitý pro všechny uživatele. Při návrhu je však dobré navíc vyhnout se problematickým kombinacím barev (např. červený text na zeleném pozadí) a nespoléhat se výhradně na barvu při předávání informací – používejte také tvary, ikony a text.

Česká republika implementovala směrnici EU o přístupnosti webu prostřednictvím Zákona č. 99/2019 Sb. o přístupnosti internetových stránek a mobilních aplikací. Zákon vyžaduje, aby veřejné instituce splňovaly normu EN 301 549, která odkazuje na WCAG 2.1 úrovně AA.

• Veřejný sektor - od roku 2020 musí weby státní správy, krajů, obcí a organizací zřízených zákonem splňovat WCAG 2.1 AA.
• Evropský akt o přístupnosti (EAA) - od června 2025 se povinnost rozšiřuje na soukromý sektor: e-shopy, bankovnictví, dopravní služby a mediální platformy.
• Slovensko - zákon č. 95/2019 Z. z. stanovuje obdobné požadavky. Pokud obsluhujete český i slovenský trh, platí pro oba stejné standardy WCAG 2.1 AA.

Kontrastní poměr 4,5:1 pro běžný text a 3:1 pro velký text je vyžadován všemi výše uvedenými předpisy. Tento nástroj kontroluje přesně tyto prahy.