Základy WCAG 2.1 standardů pro webové designéry
Stručný přehled nejdůležitějších pokynů pro tvorbu přístupných webů…
Barevný kontrast a čitelnost textu — jak na to správně
Praktický průvodce správným výběrem barev a kontrastu. Zajistěte, aby váš obsah viděli všichni uživatelé bez problémů.
9 min čtení
Začátečník
Květen 2026
Markéta Svobodová
Vedoucí oddělení přístupnosti a inkluzivního designu
Vedoucí specialistka na webovou přístupnost a inkluzivní design s 14 lety zkušeností v tvorbě přístupných webů.
Proč na kontrastu záleží
Když se podíváte na web, nejspíš vám nevadí, že text je dostatečně tmavý a pozadí světlé. Ale miliony lidí se s vizuálními problémy každý den potýkají s webovými stránkami, které jsou pro ně prakticky nečitelné. Slabý kontrast mezi textem a pozadím způsobuje bolest očí, únavu a v horších případech je obsah prostě neviditelný.
To není jen problém lidí se slabým zrakem. Dyslexie, barvoslepost, catarakta — všechny tyto stavy ovlivňují vnímání barev a kontrastu. Navíc, když se koukáte na mobil na slunečnici, vidíte kontrasty úplně jinak než v tmavé místnosti. Správný kontrast není luxus. Je to základní potřeba.
Klíčová čísla WCAG
- 4.5:1 — minimální poměr pro normální text
- 3:1 — poměr pro velký text (18pt+)
- 7:1 — AAA standard (vyšší úroveň)
- 3:1 — minimální poměr pro grafické prvky
Jak funguje výpočet kontrastu
Možná si myslíte, že kontrast je věc subjektivní. Ale není. WCAG 2.1 má konkrétní matematický vzorec, kterým se počítá kontrast mezi dvěma barvami. Vezme se relativní luminance obou barev a vydělí se světlejší hodnota tou tmavší.
To zní komplikovaně, ale v praxi to znamená jednoduše: měřte správně. Nemůžete se spoléhat na to, co vidíte na obrazovce. Když si vezmete online nástroj pro kontrolu kontrastu a zadáte barvu textu a pozadí, dostanete přesný poměr. To je jediná správná cesta.
Když máte poměr 4.5:1, splňujete standard AA pro normální text. Je to v pořádku pro většinu webů. Ale pokud chcete být opravdu inkluzivní, zkuste dosáhnout 7:1. To je AAA a znamená to, že váš web bude čitelný prakticky pro všechny.
Praktické techniky pro správný kontrast
Máte tři základní přístupy. Prvně, můžete zvolit klasickou kombinaci — tmavý text na světlém pozadí. To je nejbezpečnější volba a pro web nejčastější. Druhý přístup je obrácený — světlý text na tmavém pozadí. To funguje, ale musíte být opatrnější s vybranými barvami.
Třetí přístup? Vyhněte se kombinacím barev, které jsou problematické. Zelená na červené, modrá na fialové — tyto páry jsou noční můra pro lidi s barvoslepostí. Nerad se to říká, ale barvoví slepci nevidí barvy stejně. Ověřte si své kombinace pomocí online simulátorů barvoslenosti.
1
Vyberte primární barvy
Rozhodněte se pro základní kombinaci — světlé nebo tmavé pozadí.
2
Testujte kontrast
Použijte WebAIM nebo Contrast Ratio. Ověřte si, že máte minimálně 4.5:1.
3
Zkontrolujte barvoslepost
Simulujte si web jako člověk s deuteranopií nebo protanopií.
4
Aplikujte konzistentně
Ověřte si, že všechny sekce mají stejné standardy kontrastu.
Nástroje, které vám pomohou
Nemusíte si nic počítat sami. Existují skvělé online nástroje, které vám řeknou, jaký kontrast máte. Jsou zadarmo a trvá vám to dvacet sekund.
WebAIM Contrast Checker
Klasik mezi nástroji. Zadáte hex kódy barev a hned vidíte, jestli splňujete AA nebo AAA standard. Ukazuje vám to i pro normální a velký text.
Zjistit víceColor Oracle
Stažení do počítače. Simuluje vám, jak vidí barvy lidé s různými typy barvoslenosti. Opravdu užitečné pro kontrolu vašeho designu.
Zjistit víceWCAG Color Contrast Checker
Integrovaný přímo do browseru jako rozšíření. Jednoduše si klikněte na prvek a vidíte hned jeho kontrast vůči pozadí.
Zjistit víceAccessible Colors
Nejde jen o kontrolu. Tohle vám pomůže najít vhodné kombinace barev, které mají správný kontrast. Generátor na míru.
Zjistit víceInformace o tomto článku
Tento článek poskytuje informace a doporučení o správném výběru barevného kontrastu podle standardů WCAG 2.1. Jedná se o vzdělávací materiál, který vám pomůže pochopit principy přístupného designu. Konkrétní implementace a aplikace těchto principů by měla vždy zohledňovat specifické potřeby vašeho projektu a jeho cílovou skupinu. Pokud máte dotazy ohledně konkrétní situace, doporučujeme vám kontaktovat specialistu na přístupnost a inkluzivní design.
Shrnutí — Co si zapamatovat
Správný kontrast není složitý. Musíte jen vědět, co hledat. Minimálně 4.5:1 pro normální text, ověřit si to nástrojem a netestovat se spoléhat na svůj subjektivní pocit. Zvlášť pokud máte perfektní zrak — to co vidíte vy, nemusí vidět všichni ostatní.
Pokud si vezmu jeden závěr z této diskuse, je to tenhle: kontrast je věc měřitelná a vědecká. Není to o umění ani o estetice. Máte konkrétní poměry, které musíte splnit. A když je splníte, váš web bude čitelný pro všechny. To je přece něco krásného.
Začněte hned. Vezměte si jeden svůj web a zkontrolujte si kontrast. Zřejmě zjistíte, že máte kde se zlepšit. A to je v pořádku. Žádný web není dokonalý. Ale web, který se snaží být přístupný, to je web, kterého se nemusíme stydět.
