Kontrast a barvy — Přístupnost pro všechny čtenáře
Správné použití barev a kontrastu není jen otázka estetiky. Je to klíč k tomu, aby si váš obsah mohli přečíst všichni — včetně lidí se slabším viděním nebo barvoslepostí.
Proč na kontrastu záleží
Když se podívám na většinu webů, kterých se vejdu, vidím stejný problém pořád znovu. Světle šedý text na bílém pozadí, slabé barvy, které se těžko rozlišují. A pak přijde někdo se zhoršeným viděním a prostě to nemůže číst.
Věc je v tom, že to není jen pro lidi s postižením. Když máte slunečný den a koukáte na mobil venku, najednou ta slabá barvička vůbec nevidíte. Nebo když čtete v noci a oči vám už bolí — potřebujete silný kontrast, aby váš mozek nemusel pracovat na maximum.
WCAG standardy — co vlastně znamenají
Existují standardy. Oficiální, schválené. Říkají se WCAG 2.1 — to jsou pokyny na přístupnost webu. A víte co? Nejsou to záhady. Jsou to jednoduché čísla.
Pro běžný text potřebujete poměr 4.5:1. To znamená, že barva textu musí být 4,5krát tmavší než pozadí. Nebo naopak — 4,5krát světlejší. Zvláště pro velké nadpisy — ty mohou mít poměr 3:1. Je to dost? Ano. Víte proč? Protože to vědci otestovali s tisíci lidí.
Když to dodržíte, nejenže budete v souladu se zákonem. Přečtou si to všichni. Včetně těch, kterých to bolí oči, nebo jsou starší a vidí hůř.
Barvy a jejich kombinace
Tady se to komplikuje. Nejen že potřebujete silný kontrast. Musíte si dát pozor na barvy navzájem.
Asi 8 procent mužů a 0,5 procenta žen má nějakou formu barvoslepostí. Nejčastější je červeno-zelená. Znamená to, že když dáte červený text na zeleném pozadí — některé lidi to nebudou schopni rozlišit. Budou vidět jen rozmazaný chaos.
Hlavní pravidlo: Nikdy nepoužívejte barvu jako jedinou cestu, jak předat informaci. Přidejte ikonu, text, nebo vzor.
Když máte tlačítko “Odeslat” a chcete, aby bylo vidět, že je aktivní — nedělejte ho jen červeným. Udělejte ho červeným, přidejte ikonu, a uveďte text “Aktivní”. Tímto způsobem si to přečte každý.
Praktické tipy — jak na to
Testujte s nástroji
Nemusíte to počítat ručně. Existují bezplatné nástroje. WebAIM Contrast Checker vám za sekundu řekne, jestli vaše kombinace splňuje normu. Chromium DevTools má vestavěný check přímo v inspektoru.
Volte barvy chytře
Tmavé texty na světlých pozadích. Nebo naopak — světlé texty na tmavých pozadích. Vyhnete se tím těm paskvilům jako velmi tmavá modrá na velmi tmavé šedé. To vidí jen vy.
Nestarejte se jen o nadpisy
Běžný text — odstavce, seznamy — potřebuje také dobrý kontrast. Ne všichni jsou k počítači přiblížení tak blízko jako vy. Když máte text malý, potřebuje být tmavší a čistší.
Přidejte visuální prvky
Neobejdejte se jen barvou. Když chcete něco zvýraznit, přidejte bold text, ikonu, nebo tečku. Lidem s barvoslepostí to pak nebude chybět informace.
Testujte na reálných zařízeních
Monitor v kanceláři v noci vypadá úplně jinak než v slunečný den venku. Vyzkoušejte svůj web na tabletu, na mobilu, ve venkovním světle. Pokud to vidíte i tam, máte vyhráno.
Používejte aplikace na simulaci
Chrome extension “Color Contrast Analyzer” vám ukáže, jak váš web vypadá lidem s různými typy barvoslepostí. Změníte perspektivu. Když se vám pak líbí, víte, že je to opravdu dobré.
Nástroje, které vám pomůžou
Nemusíte být expert. Existují aplikace, které vám vše řeknou. A nejlepší? Jsou zadarmo.
Zkuste si:
- WebAIM Contrast Checker — vložíte si čísla a on vám řekne, jestli to splňuje normu
- Stark (plugin do Figmy) — designeři si s tím hrají, ale funguje to skvěle i pro web
- Color Contrast Analyzer — extension do Chrome, ukáže vám všechny problémy na stránce
- WAVE (WebAIM Extension) — kontroluje přístupnost a najde vám všechny chyby s barvami
Všechny jsou bezplatné. Všechny vám ušetří čas. A hlavně — všechny vám pomůžou vytvořit web, který si budou moci přečíst všichni.
Shrnutí — co si zapamatovat
Kontrast a barvy nejsou jen o estetice. Jsou to základy přístupnosti. Když se na to podíváte správně, zjistíte, že to ani není tak složité.
Poměr 4.5:1 — to je to číslo, které si musíte zapamatovat pro běžný text.
Nepoužívejte jen barvu — přidejte text, ikonu, nebo vzor. Lidi s barvoslepostí vám budou vděční.
Testujte — věřte nástrojům. Jsou tady proto, aby vám to usnadnily.
Reálné podmínky — vyzkoušejte svůj web venku, na slunci, na různých zařízeních. Pokud to vidíte i tam, máte vyhráno.
Když se o to postaráte, nejen že budete v souladu se zákony. Přečtou si vás všichni. A to je cíl, ne?
Poznámka k obsahu
Tento článek poskytuje obecné informace o přístupnosti webu a standardech WCAG. Legislativa a požadavky se liší podle země a kontextu. Vždy si ověřte aktuální právní požadavky pro vaši jurisdikci. Obsah je zamýšlen jako vzdělávací materiál, ne právní poradenství.
