Kontrastní pozadí pro citace

Jak vybrat správné barvy, aby se citace vymykaly z textu. Praktické příklady s Color Contrast Checker a WCAG standardy.

8 min čtení Střední úroveň Březen 2026

Barevná paleta s tužkami a výběrem barev na bílém pozadí, studio osvětlení

Autor

Petr Novotný

Vedoucí oddělení typografického designu

Web designer se 14 lety praxe zaměřený na typografii a design zvýrazněných citací v longformátovém obsahu.

Proč je kontrast zásadní

Kontrastní pozadí je jedním z nejúčinnějších způsobů, jak přilákat pozornost čtenáře k důležitým pasážím textu. Když se citáty výrazně liší od zbytku obsahu, čtenáři je instinktivně vidí a zapamatují si je lépe.

Není to ale jen o estetice. Je to i o přístupnosti. Správné barevné kombinace zajišťují, že si obsah přečte skutečně každý — bez ohledu na to, zda má normální vidění nebo trpí barvoslepostí. To je právě to, co dělá rozdíl mezi amatérským a profesionálním designem.

Designer pracující na barvové paletě v designovém softwaru, dva monitory, moderní kancelářský stůl

Měření kontrastu: Color Contrast Checker

Jak vlastně vybrat správné barvy? Nechcete se jen hádat. Existují nástroje, které vám řeknou přesně, jestli váš kontrast stačí.

Color Contrast Checker je bezplatný nástroj, který si vezmeš online a zadáš mu dvě barvy — text a pozadí. On ti pak vrátí číslo, které se nazývá “contrast ratio”. To číslo ti říká, jak moc se barvy od sebe liší. Čím vyšší číslo, tím lépe se text čte.

WCAG Standardy

AA úroveň (doporučená): Kontrast minimálně 4.5:1 pro běžný text, 3:1 pro velký text (18px+)

AAA úroveň (ideální): Kontrast minimálně 7:1 pro běžný text, 4.5:1 pro velký text

Pokud chceš, aby se tvoje citáty opravdu vymykaly, měl bys cilovat na AAA. Je to o 30-40% těžší na oku čtenáře, ale taky mnohem pamatnější.

Počítačový monitor s otevřeným nástrojem Color Contrast Checker, barevné pole v pozadí

Notebook s psaným textem a zvýrazněnými pasážemi, různé barvy značkovacích per

Praktická pravidla pro výběr barev

Když jsme tvrdili, že kontrast je důležitý — nemluvili jsme o něčem abstraktním. Tady máš konkrétní tipy, které se osvědčily v reálných projektech.

Tmavý text na světlém pozadí

Toto je nejbezpečnější kombinace. Tmavě šedý text (třeba #2c2c2c) na světle krémovém pozadí (#f9f7f4) dává kontrast kolem 8:1. To je skvělé číslo a funguje to všem.

Odstíny jedné barvy

Zvolíš jednu barvu — řekněme růžovou. Pak pro text vezmeš velmi tmavý odstín (téměř černý s trochou růžového) a pro pozadí světlý odstín. Vypadá to lépe než pouze černá a bílá.

Testuj na skutečných zařízeních

Tvůj monitor nemusí vypadat stejně jako tablet čtenáře. Zkontroluj, jak se barvy jeví na mobilu, v přímém slunečním světle a na starších displejích. Je to trocha práce, ale stojí to za to.

Zvýrazňování citací v praxi

Teď víš, jak měřit kontrast. Ale jak to aplikuješ na skutečný obsah? Jsou tu dva přístupy, které se osvědčují.

Přístup 1: Obarvené pozadí s bílým textem

Vezmeš tmavou barvu (třeba tmavomodrá, tmavě červená nebo černá) a vytvoříš blok, kde je citát na tmavobarveném pozadí s bílým textem. To je klasika a funguje to. Kontrast je obvykle 7-10:1.

Klíč je padding. Přidej dostatek místa kolem textu — minimálně 20px na všech stranách. Díky tomu to nevypadá přitisknutě a čitatelnost je lepší.

Na webu vidíš často citáty se silným levým okrajem — třeba tlusté čáry vlevo, která vede k barvě samotného pozadí. Když je ta čára třeba zlatá nebo červená a pozadí je velmi světlé, už máš jasné vizuální oddělení bez toho, aby text sám byl tmavý na tmavém.

Otevřená kniha s moderním webovým textem, zvýrazněná citace se tmavomodrým pozadím a bílým textem

Chytrý telefon a tablet na pracovním stole, na obrazovkách viditelný text s různými velikostmi

Kontrast a responzivní design

Mobil má menší displej. Kontrast, který vypadá skvěle na desktopu, se může na telefonu ztratit, protože všechno je menší. Když je tvoje citáta veliká a na tmavém pozadí, na mobilu to nemusí stačit.

Proto je dobré zvýšit velikost písma na mobilech. Pokud je citáta na desktopu 18px, měla by být na mobilu 22-24px. Tím pádem se lépe čte, i když má menší displej. A s větším textem si můžeš dovolit trošku nižší kontrast, pokud potřebuješ.

Zkus to: otestuj svůj web na fyzickém mobilu v přímém slunečním světle. Když to tam ještě pořád čteš bez problémů, máš vítězství.

Shrnutí: Kontrast je opravdu důležitý

Kontrastní pozadí pro citace není jen design trik. Je to způsob, jak se postarat o své čtenáře. Když zvolíš správné barvy a změříš kontrast pomocí Color Contrast Checkeru, zajistíš si, že si tvoje nejdůležitější myšlenky opravdu přečte každý.

Pamatuj si: WCAG AA (4.5:1) je minimum, AAA (7:1) je ideál. Tmavý text na světlém pozadí je bezpečná volba. A testy na skutečných zařízeních jsou nezbytné.

Když to aplikuješ, tvoje texty budou nejen hezčí, ale taky dostupnější a pamatnější. To je pořádný upgrade.

Poznámka k pokynům WCAG

Informace v tomto článku jsou určeny k vzdělávacím účelům a vycházejí z obecně dostupných standardů WCAG 2.1. Zatímco se snažíme poskytnout přesné a užitečné rady, realita webového designu se liší projekt od projektu. Některé kontextové faktory — jako je typ písma, velikost textu nebo jednotlivé preference uživatelů — mohou ovlivnit vnímání kontrastu. Doporučujeme vždy testovat váš design s reálnými uživateli a na různých zařízeních. Pokud potřebuješ specifickou konzultaci k tvému projektu, obrať se na profesionálního designéra nebo specialistu na přístupnost.