Kontrast a Dostupnost: Barvy pro Všechny
Dobrý kontrast není přepych — je to povinnost. Naučte se jednoduché pravidlo a vždy máte výhru.
Proč na Kontrastu Záleží
Představte si, že čtete noviny psané světlešedou barvou na světlejším šedém pozadí. Bolí vás oči, není to? Miliony lidí na internetu zažívají tohle denně — ne proto, že by byly hloupé, ale protože webdesignéři často nevědí, jak se na kontrastu podílí dostupnost.
Není to jen o lidem se slabším zrakem. Je to o všech nás. Když sedíte v autě na slunečném dni a chcete si přečíst něco na mobilu — tam je kontrast opravdu kritický. Když vám je zle a máte těžko se soustředit — potřebujete text, který skoro vyskakuje ze stránky.
Poměr 4.5:1 — Magické Číslo
Existuje pravidlo. Není to vymyšlené — vychází z vědeckého výzkumu o tom, jak lidské oko vnímá rozdíl mezi barvami. Standard se jmenuje WCAG (Web Content Accessibility Guidelines) a jeho základní povinná úroveň AA říká: poměr kontrastu musí být minimálně 4.5:1 pro běžný text.
Co to znamená v praxi? Vezměte si černý text na bílém pozadí — to je přibližně 21:1. Je to čitelné, že? Teď si vezměte tmavou šedou na světlé šedé — třeba 2:1. Už je to horší. Právě někde mezi tím leží 4.5:1 — minimální hranice, kde i lidé se slabším zrakem, barevnou slepotou nebo jen čtoucí text na horším displeji mohou pohodlně číst.
Jak Kontrolovat Svůj Kontrast
Není to těžké. Existují bezplatné nástroje, které ti řeknou, jestli je tvůj design v pořádku nebo ne.
WebAIM Contrast Checker
Zadáš barvu textu, barvu pozadí, a on ti řekne přesný poměr. Stejně jednoduché, jak to zvládneš.
Color Contrast Analyzer
Aplikace, kterou si stáhneš. Klikneš na libovolné místo na stránce a zjistíš, jestli má dobrý kontrast. Tak snadné to je.
Chrome DevTools
Otevřeš vývojářské nástroje, inspektuješ element a hned tam vidíš, jestli se mu daří. Součást tvého prohlížeče.
WAVE — Web Accessibility
Rozšíření pro prohlížeč. Spustíš ho na libovolné stránce a zjistíš všechny problémy s kontrastem a dalšími prvky dostupnosti.
Praktické Příklady, Které Fungují
Tady jsou kombinace, které vidím neustále a které zkrátka fungují. Není to originální, ale to není cíl. Cíl je, aby všichni mohli číst.
Chyby, Které Lidi Dělají
Vidím je pořád. A ne, nejsi sám, když je děláš.
Světlá šedá na bílém
Vypadá to „jemně” a „sofistikovaně” v Photoshopu. Na reálné stránce na mobilu v autě? Nevidíš to vůbec. Dělá to design vypadat prázdný a lidi si myslí, že stránka nefunguje.
Text na obrázku bez pozadí
Máš krásnou fotografii a chceš na ní napsat. Skvělý nápad. Jen si daj pozor — když je text stejné barvy jako části obrázku, lidem to nebude dělat smysl. Přidej pod text tmavé pozadí nebo text zesílením.
Spoléhání se na barvu
Když říkáš „klikni na červený text”, ale ten červený text je pro někoho barevně slepého neviditelný, selhal jsi. Vždy používej i další signál — tvar, text, ikona.
Zapomínání na hover stavy
Když se odkaz změní při hoveru, musí mít stále dobrý kontrast. Lidé vidí, že se něco změnilo, ale pokud to nemůžou číst, je to k ničemu. Stejné pravidlo platí pro všechny interaktivní prvky.
Barevná Slepota Není Černobílá
Když řekneš „barevná slepota”, lidi si představí, že někdo vidí jen černou a bílou. Není to tak. Nejčastější typ — červeno-zelená slepota — znamená, že osoba vidí červené a zelené barvy podobně. Některé kombinace, které ti připadají super odlišné, pro někoho vypadají stejně.
Dobrá zpráva? Pokud máš dobrý kontrast (ten poměr 4.5:1), pomocí jasného rozdílu v tónech, pak i lidé s barevnou slepotou to vidí. Tmavá a světlá jsou pro ně stále odlišné. Takže si to zopakuj: kontrast není jen o barvě. Je to o tónu.
„Dostupnost není přidaná funkcionalita. Je to předpoklad. Když uděláš web, který není dostupný, neuděláš web — uděláš něco, co se jen tváří jako web.”
— Léon Dupont, Accessibility Specialist
Jak Sám Testovat Svůj Design
Nemusíš být expert. Tady jsou kroky, které zvládneš hned.
Vyber si barvy
Navrhni svůj design normálně. Máš barvu textu a barvu pozadí? Pěkně. Teď si je poznamenej jako hex kódy.
Zkontroluj online
Jdi na WebAIM.org, tam je contrast checker. Vlož obě barvy a stiskni „Check Contrast Ratio”. Uvidíš číslo.
Porovnej s normou
Číslo musí být alespoň 4.5 pro normální text. Pokud je nižší, vyber tmavší text nebo světlejší pozadí a zkus znovu.
Testuj na mobilu
Dej si web na telefon a pohledej na něj v jasném světle. Vidíš text pořádně? Dobrý znak. Pokud ti svědí oči, je něco špatně.
Příběh ze Skutečného Světa
Pracuji s jednou klientkou, která má web pro své brýlařství. Její původní design měl světlou šedou na světlejším pozadí. Vypadal elegantně — až do chvíle, když jsem ho viděl na mobilu v autě. Nemohl jsem nic přečíst.
Změnili jsme text na tmavou šedou. Stejný elegantní vzhled, ale nyní čitelný. Měřili jsme kontrast — 9.2:1. To je skoro dvakrát více, než jaké minimum vyžaduje standard. A víš co? Lidé jí psali, že se jim stránka lépe čte. Někdo si ani nevšiml, že jsme něco měnili — prostě to prostě fungovalo lépe.
Závěrem: Jednoduché Pravidlo
Poměr 4.5:1. Zapamatuj si to. Když si budeš pamatovat jenom toto číslo z celého článku, máš z něj, co potřebuješ.
Není to nudné, není to složité a není to omezující. Je to naopak — je to liberace. Když víš, jak na to, můžeš dělat krásné design, který vidí každý. A to je přece cíl, ne?
Dobrý kontrast není o tom, aby web vypadal „přístupně”. Je to o tom, aby fungoval pro všechny.
Poznámka k Článku
Tento článek se zaměřuje na výukové informace o kontrastech barev a dostupnosti webu. Pokud pracuješ s určitými poruchami zraku nebo máš specifické potřeby v oblasti dostupnosti, doporučujeme konzultaci s odborníky na webovou dostupnost. Standard WCAG se neustále vyvíjí a doporučujeme vždy si ověřit nejnovější verzi pro nejlepší praktiky.
