Napadlo vás někdy, proč je některý web lehce čitelný a jiný vás rychle unaví? Může za to řada věcí – a jednou z nich bývá kontrast. Ten rozhoduje o tom, jestli texty vnímáte s lehkostí, nebo vás bolí oči už po pár vteřinách.
Co to je kontrast?
Kontrast vyjadřuje rozdíl mezi dvěma barvami. Nejčastěji mezi textem a pozadím. Je klíčový pro čitelnost. Neplatí ale, že čím větší kontrast, tím lepší. Důležité je najít rovnováhu: barvy by měly být dost odlišné, aby byl text dobře vidět, ale zároveň vizuálně příjemné na pohled.
Představte si, že čtete světle šedý text na bílém pozadí. Musíte mžourat, abyste text přečetli, oči vás bolí. Co uděláte? Nejspíš odejdete.
Ale pozor: úplně opačný extrém, tedy černý text na ostré bílé, také není ideální. Je moc tvrdý. Při delším čtení unavuje oči.
Proč kontrast řešit?
Protože text musí být čitelný. Lidé na web chodí proto, aby získali informace, pobavili se nebo nakoupili. A pokud jim dělá problém obsah přečíst, tak odcházejí.
Dostatečný rozdíl mezi textem a pozadím pomáhá každému. Ocení ho všichni, nejvíc ale lidé, kteří hůře vidí – a těch je opravdu hodně. Týká se to nás všech:
- Na mobilu venku na sluníčku
- Večer, když máme oči unavené
- Lidí s horším zrakem nebo barvoslepostí
Co říkají pravidla přístupnosti?
Podle pravidel WCAG (mezinárodní standard přístupnosti) platí:
- Běžný text musí mít kontrast alespoň 4,5 : 1
- Velký nebo tučný text může mít nižší kontrast 3 : 1
Minimální kontrasty definují kritéria 1.4.3 a 1.4.11. Cílem je zpřístupnit obsah co největšímu počtu lidí – včetně těch, kteří mají horší zrak, barvoslepost nebo jiné omezení.
Výjimky:
- Text, který je jen ozdobný a neobsahuje žádnou důležitou informaci (například grafický prvek v pozadí), nemusí splňovat pravidla kontrastu. Ale pozor – pokud má text nějaký význam, měl by být dobře čitelný.
- To samé platí pro texty na neaktivních prvcích (např. tlačítka, která nejdou použít).
- Také loga a názvy firem nebo produktů nemusí splňovat pravidla pro minimální kontrastní poměry.
Nástroje pro kontrolu kontrastu
Kontrasty není třeba počítat ručně. Existují online nástroje, které to udělají za vás.
- Kontrola kontrastu: Color.review
- Generátor přístupné barevné palety: Accessible color palette generator
- Kontrola barevné palety: Contrast Grid
- Kontrola konkrétní barvy webu: Developer Tools v prohlížeči (Mozilla i Chrome)
- Kontrola kontrastů webu: online nástroj WAVE
Nejčastější chyby a mýty
- „Ale klient to chtěl přesně takhle.“ Super, ale klient není jediný, kdo bude web používat. Špatný kontrast = horší čitelnost = méně zákazníků.
- „Máme firemní barvy, to se nedá změnit.“ Jde to. V logu můžete barvu nechat a pro texty ji lehce upravit. Můžete doplnit stín u nadpisů, změnit jen barvu textu nebo přidat pozadí s lepším kontrastem.
- „Kontrast je pro nevidomé – a ti náš web nečtou.“ To je omyl. Nevidomí používají speciální čtečky, takže kontrast neřeší. Ale slabozrací, senioři a běžní uživatelé na prudkém slunci web čtou. A těch je mnohem víc.
Pamatujte – přístupnost není o extrémech, ale o zajištění komfortu pro co nejvíc lidí.
Shrnutí
- Kontrast pomáhá číst texty pohodlně a bez námahy.
- Dobrý kontrast = lepší přístupnost pro všechny.
- Špatný kontrast můžete snadno odhalit a většinou i snadno opravit.
Potřebujete více informací nebo pomoct s otestováním vašeho webu?
Vazba na pravidla přístupnosti
Správně nastavený kontrast pomáhá splnit kritéria přístupnosti: