Přístupnost barev — WCAG standard v praxi
Jak ověřit, že váš web čtou všichni — včetně lidí se slabším zrakem. Nástroje a jednoduché testy, které zvládnete.
Barvy nejsou jen krásné — musí fungovat
Pokud máte na webu text bílé barvy na světle modrém pozadí, některé lidi jednoduše nebudou schopné jej přečíst. Není to jejich vina. Je to proto, že nedodržujete WCAG standard pro přístupnost barev.
Problém? Není to těžké. Stačí znát správné poměry kontrastu a vědět, kde je ověřit. Vysvětlím vám to tak, aby to mělo smysl — a hlavně aby vám to šetřilo čas.
Co je to kontrastní poměr a proč vůbec existuje
Představte si číselnou škálu od 1 do 21. Čím vyšší číslo, tím lépe se barvy od sebe liší. Jeden znamená, že jsou barvy úplně stejné — příšerné. Dvacet jeden je maximální kontrast — jako černá a bílá.
WCAG standard říká: normální text musí mít poměr aspoň 4.5:1. To znamená, že tmavý text na světlém pozadí nebo světlý text na tmavém pozadí by měl být čitelný i pro lidi se slabším zrakem. Nejde o to, aby vypadal luxusně. Jde o to, aby lidé mohli váš obsah skutečně přečíst.
Pro větší text — třeba nadpisy nad 18 pixelů — stačí 3:1. Ale počítejte s tím: pokud to zvládne 3:1, bude to vypadat divně. Raději zůstaňte u 4.5:1.
Tři nástroje, které vám vždy pomohou
Není potřeba složitých výpočtů. Existují online nástroje, které vám řeknou, jestli váš kontrast splňuje standard.
WebAIM Contrast Checker
Zadáte barvu textu a pozadí (jako #ffffff a #003366), a hned vidíte, jaký je vaš poměr. Řekne vám, co splňuje WCAG AA a co WCAG AAA.
Colour Contrast Analyser
Offline aplikace, kterou si stáhnete. Má pipetu — ukážete na něco na obrazovce a ona zjistí barvu. Pak už jen ověříte, jaký je kontrast.
DevTools v prohlížeči
Chrome a Firefox mají vestavěný inspektor kontrastu. Kliknutí na barvu v DevTools vám hned řekne, jestli je kontrast dobrý nebo špatný.
Jak to vypadá v praxi — příklady z reálného webu
Vezměte si typickou situaci. Máte web se tmavým pozadím — řekněme #1a1a1a. Chcete na něj dát text. Zkusili jste #666666? Špatně. To splní maximálně 3:1. Poměr není dost dobrý pro normální text.
Zkuste místo toho #e0e0e0. Teď máte 10:1. To je skvělé. Váš text budou číst všichni. Nebo si vezměte běžný případ — máte bílý text na modrém pozadí. Modrá #0066cc, text #ffffff? To máte 4.3:1. To projde. Ale když si vezmete tlumavější modrou, může se to stát problémem.
Nejjednoduší přístup? Zůstaňte u tmy a světla. Buď tmavý text na světlém pozadí, nebo světlý text na tmavém. Střední tóny si vybírejte opatrně — je to nejčastější chyba.
Pokročilé tipy pro ty, co jdou dál
1. Barvy nejsou jen pro oči
Nikdy nepoužívejte barvu jako JEDINÝ způsob, jak komunikovat informaci. Pokud je tlačítko červené, aby znamenalo chybu, mělo by říkat “Chyba” nebo mít ikonu. Barevně slepí lidé barvu nevidí. To jsou asi 8 procent mužů a méně žen, ale není to zanedbatelné.
2. Testujte v režimu simulace barevné slepoty
Existují online nástroje, které simulují, jak váš web vidí člověk s barvoslepostí. Nejčastější je deuteranopia — nevnímání zelené a červené. Zkuste nástroj Coblis a podívejte se, jak váš web vypadá těm lidem.
3. Kombinujte s ostatními signály
Když chcete zvýraznit něco důležitého, nepolečujte se jen na barvu. Použijte tloušťku písma, velikost, pozici nebo ikonu. Kombinace funguje vždy lépe.
Kontrolní seznam — ověřte si to sami
Chcete vědět více o přístupnosti?
Přístupnost není přidaný luxus — je to součást odpovědného webdesignu. Pokud vás zajímá, jak dělat web pro všechny, podívejte se na naše další články o WCAG standardu a praktických tipech.
Přejít na kategorii
Poznámka k obsahu
Tento článek obsahuje informace o WCAG standardu a nejlepších praktikách pro přístupnost barev. Cílem je edukace a zvýšení vědomí o přístupnosti webu. Konkrétní implementace se liší podle vašeho projektu, typu obsahu a technických omezení. Doporučujeme konzultovat s odborníky na přístupnost, pokud máte specifické požadavky. WCAG standard se čas od času aktualizuje — informace v tomto článku odpovídají stavu v únoru 2026.