Vrstvení vzorů bez chaos — jak začít
Máš návod krok za krokem. Nejdřív průhlednost, pak zrnitost, nakonec vrstvení. V…
Čti dálČitelnost textu — zlaté pravidlo
Všechno se změní, když si uvědomíš jednu věc. Kontrast není jen barva — je to kombinace tónů a průhlednosti.
Když řekneš „kontrast”, mnoho designérů si představí černý text na bílém pozadí. Ale není to tak jednoduché. Kontrast je živý pojem — mění se podle toho, jak se podíváš. Průhlednost, barevné tóny, vzdálenost od čtenáře — všechno to hraje roli.
Pracuješ s texturou pozadí? S geometrickými vzory? S jemným šumem? Pak je kontrast tvůj nejlepší pomocník. Nebo tvůj největší nepřítel — pokud ho nepoužiješ správně. Pojďme se na to podívat pořádně.
Proč kontrast selhává u textur
Texturované pozadí není plochá barva. Když přidáš geometrické vzory, jemný šum nebo gradient mesh, vytváříš vrstvené prostředí. Text v takovém prostředí potřebuje víc než jen dobrou barevnou kombinaci.
Problém? Textura má vlastní kontrast. Zrnitost se chová jako druhý prvek designu. Pokud tvůj text není dostatečně tmavý nebo světlý, rozpustí se v textuře. Čtenář pak vidí všechno najednou — text, vzor, pozadí — a není jasné, co má číst.
Pravidlo je jednoduché: čím jemnější textura, tím vyšší kontrast textu potřebuješ. Není to trik. Je to fyzika vnímání. WCAG doporučuje minimálně poměr 4,5:1 pro normální text. U textury? Často potřebuješ 7:1 nebo 8:1.
Zlaté pravidlo
Kontrast není absolutní číslo — je to vztah mezi textem a jeho pozadím. Když máš texturované pozadí, neměříš kontrast jen mezi barvami. Měříš kontrast mezi textem a vším, co je za ním. Textura, barva, průhlednost — všechno se počítá.
Tři vrstvy, jeden kontrast
Představ si, že máš tři vrstvy: pozadí (barva), textura (zrnitost nebo vzor), a text (obsah). Kontrast mezi textem a pozadím je důležitý. Ale kontrast mezi textem a texturou? Ten je kritický.
Pokud je textura tmavá a text je tmavý, nečte se to. Pokud je textura světlá a text je světlý, to stejné. Třetí vrstva — průhlednost textury — to změní. Když máš 40% průhlednost na textuře, textura se prolíná s textem. Musíš to zvážit.
Jak to řešit? Vyzkoušej to. Vezmi svou texturu, nastav průhlednost na 30%, 50%, 70% a koukej, jak se mění čitelnost. Pak vyber text, který na každé vrstvě funguje. Obvykle to znamená: je-li textura na světlém pozadí, text musí být výrazně tmavší. Je-li textura na tmavém pozadí, text musí být výrazně světlejší.
Důležitá poznámka
Informace v tomto příspěvku jsou vzdělávacího charakteru a slouží jako obecný průvodce principy kontrastuálnosti v designu. Každý projekt má své specifické požadavky. Doporučujeme vždy testovat kontrast na cílových zařízeních a s opravdovými uživateli. WCAG pokyny jsou minimum — ne maximum. Tvůj design by měl být přístupný všem, bez ohledu na jejich zrak nebo zařízení.
Zapamatuj si jednu věc
Kontrast není jen barevný rozdíl. Je to příběh, který se odehrává mezi textem, texturou a čtenářem. Když máš texturované pozadí, nemůžeš jen otevřít color picker a vybrat černou nebo bílou. Musíš vědět, jak se textura chová. Jak se mění s průhledností. Jak ji vnímá lidské oko.
Testuj. Opravdu. Otevři svůj design, podívej se na něj z jiného úhlu, z jiné vzdálenosti, na jiném zařízení. Když text zůstane čitelný — vítězství. Když se rozpustí v textuře — musíš to změnit. Žádné omluvky typu „ale na monitoru to vypadá dobře”. Na monitoru se to podívá jenom ty. Ostatní to budou číst na mobilu, tabletu, nebo vytisknuté na papíru.
Zlaté pravidlo? Kontrast, kterému věříš, když se na něj podíváš. Ne ten, kterého si představuješ v hlavě.
