Začátečník 8 min čtení Květen 2026

Kontrast a čitelnost na webu

Správný kontrast není jen o designu — je to o tom, aby si váš obsah přečetli všichni. Víme, jak to udělat správně.

Webový design s vynikající čitelností a kontrastem textu

Autor

Radim Součka

Vedoucí oddělení typografie a barevné identity

Představte si web, kde máte bezedný černý text na tmavě šedém pozadí. Čtení by bylo bolestné, že? Právě to je případ, kdy kontrast selže. Není to jen estetická záležitost — jde o základní schopnost lidí číst obsah, který jste vytvořili. Když web čteme, naše oči se snaží rozlišit barvy textu od pozadí. Bez dostatečného kontrastu se texty ztrácejí, čtení se zdržuje, a návštěvníci web rychle opouští.

Zajímavý fakt: Přibližně 8 % mužů a 0,5 % žen má nějakou formu barvoslepostí. Správný kontrast pomáhá všem, ne jen těmto lidem.

Kontrast není jen o barvách. Jde o vztah mezi jasností textu a jasností pozadí. Pokud používáte světle šedý text na bílém pozadí, budete mít problém. Pokud pak přejedete na tmavý text na tmavém pozadí, stejně tak. Správná kombinace zajišťuje, že text „vyskakuje” z obrazovky a je snadné ho přečíst bez vynaložení zbytečného úsilí.

Co říkají standardy WCAG?

WCAG (Web Content Accessibility Guidelines) jsou mezinárodní standardy pro přístupnost webu. Ty definují přesné poměry kontrastu, které by váš obsah měl splňovat. Není to složité — jsou to pouhá čísla, která můžete snadno zkontrolovat.

AA úroveň (doporučená)

4,5:1 pro běžný text

To znamená, že pokud je vaše pozadí 10 jednotek jasnosti, text by měl být minimálně 45 jednotek jasný.

AAA úroveň (nejlepší)

7:1 pro běžný text

Používá se na webech, kde je přístupnost prioritou — třeba pro zdravotnické weby nebo vzdělávací platformy.

Příklad správného a špatného kontrastu textu na webu

Designer pracující s barevnými vzorky a přístupnostními nástroji

Jak na to v praxi?

Můžete si myslet, že vybrání správného kontrastu je těžké. Opravdu to tak není. Existují nástroje, které vám s tím pomohou během minut.

Vyberte si barvy

Začněte s barvami, které se vám líbí. Nemusíte se zatím starat o kontrast.

Otestujte kontrast

Použijte nástroj jako WebAIM Contrast Checker nebo Contrast Ratio. Zadejte hexadecimální kódy vašich barev.

Upravte, pokud je třeba

Pokud kontrast není dostatečný, upravte jednu z barev — nejčastěji ztmavte text nebo zjasněte pozadí.

Ověřte na reálném webu

Publikujte na webu a otestujte čtení v různých podmínkách — za slunečního dne na mobilu, v místnosti se špatným osvětlením.

Příklady z praxe

Podívejte se, jak vypadá správný kontrast v reálných případech.

Příklad kvalitního kontrastu s černým textem na bílém pozadí

Černý text na bílém

Klasická kombinace. Kontrast 21:1. Skvělé pro čtení delších textů a archivních obsahu. Není příliš originální, ale je to spolehlivé řešení, které funguje.

Příklad moderního designu s tmavým pozadím a světlým textem

Světlý text na tmavém

Dnešní trend. Když je správně implementován, usnadňuje čtení v noci a šetří energii na OLED obrazovkách. Klíč je najít správný odstín šedi.

Příklad špatného kontrastu s šedým textem na bílém pozadí

Šedý text na bílém

Toto je chyba. Kontrast je přibližně 2:1. Text je těžko čitelný, zvláště pro starší lidi nebo lidi se zhoršeným viděním. Nedoporučujeme.

Nástroje, které vám pomohou

Není třeba být matematik, abyste zkontrolovali kontrast. Existují skvělé nástroje, které to udělají za vás. Všechny jsou zdarma.

WebAIM Contrast Checker
Nejpopulárnější volba. Zadejte barvy a okamžitě vidíte, zda splňují WCAG normy.
Contrast Ratio (Lea Verou)
Elegantnější rozhraní. Ukazuje vám, jak budou barvy vypadat pro lidi s různými typy barvoslepostí.
Accessible Colors
Pomáhá najít bezpečné barevné páry. Zadáte jednu barvu a nástroj navrhne ostatní.
Chrome DevTools
Zabudované přímo v prohlížeči. Pravým kliknutím na prvek a zkontrolujte kontrast přímo na webu.

Nástroje pro kontrolu kontrastu na barevném monitoru

Závěr: Kontrast je pro všechny

Správný kontrast není luxus — je to základní součást dobrého webdesignu. Není to jen o přístupnosti pro lidi se zhoršeným viděním, ačkoliv i to je důležité. Správný kontrast dělá váš web příjemnějším pro všechny . Lidé si jej čtou snadněji. Zůstávají déle. Vrací se. To jsou čísla, která se vám líbí.

Začněte dnes. Vezměte si libovolný web, na kterém pracujete, a zkontrolujte kontrast pomocí jednoho z nástrojů, které jsme zmínili. Šance je, že tam je prostor na zlepšení. A nejlepší na tom? Zlepšení trvá jen pár minut.

Přístupnost není příslušenství — je to povinnost každého designéra.

Poznámka o přístupnosti

Informace v tomto článku jsou určeny jako vzdělávací zdroj pro webové designéry a vývojáře. Jde o obecné pokyny na základě standardů WCAG. Situace se liší podle vašeho projektu a cílové skupiny. Pokud pracujete na webu pro veřejné instituce, vždy si ověřte místní právní požadavky na přístupnost. Tento článek není právní porada.