Testování kontrastu: Zajistěte čitelnost pro všechny
Podrobný průvodce testováním barevného kontrastu podle WCAG standardů. Praktické nástroje, které vám pomohou, a běžné chyby, kterým se vyhnout.
Proč je kontrast důležitý?
Kontrast mezi textem a pozadím není jen estetickou záležitostí. Jde o to, aby se váš obsah dal přečíst. Skutečně každý. Ať už má někdo slabší zrak, používá web na slunečním světle nebo má starší monitor.
Když barvy nestojí dost proti sobě, čtenáři se namáhají. Jejich oči se unavují. A pokud se unaví dost, prostě přejdou na konkurenční web. To se vám nehodí. Navíc — přístupný design není jen morálně správný. Je to také legislativa. WCAG 2.1 standardy jsou teď v mnoha zemích povinné.
WCAG 2.1 standardy: Jaké hodnoty potřebujete?
WCAG 2.1 definuje tři úrovně přístupnosti: A, AA a AAA. Každá má jiné požadavky na kontrast. Nejčastěji se cílí na úroveň AA — to je balans mezi dostupností a designem.
Úroveň AA
4.5:1 pro normální text. To znamená, že světlost mezi textem a pozadím musí být v poměru alespoň 4,5 ku 1. Zvuk to zní technicky, ale je to vlastně celkem jednoduché.
Úroveň AAA
7:1 pro normální text. To je vyšší standard — používá se pro weby, kde se opravdu záleží na čitelnosti. Jako zdravotnické portály nebo edukační stránky.
Pro velký text (18pt nebo větší) jsou požadavky mírnější: 3:1 pro AA a 4.5:1 pro AAA. To má smysl — větší písmeno se čte líp i s nižším kontrastem.
Jak testovat kontrast: Praktické nástroje
Nemusíte to počítat ručně. Existují skvělé online nástroje, které to dělají za vás. Tady jsou ty, co my používáme:
- WebAIM Contrast Checker — Vložíte hex kód barvy textu a pozadí, a dostanete hned poměr. Ukazuje vám taky, jaký je to standard (AA, AAA). Je to asi nejjednoduší.
- Contrast Ratio (contrastchecker.com) — Podobný, ale má nice náhled. Vidíte hned, jak to vypadá s vaší kombinací barev.
- Browser devtools — Chrome a Firefox mají kontrast checker rovnou v devtools. Zvolte element a hledejte “Contrast” sekci. Super pro testování na hotovém webu.
- Accessibility Insights — Rozšíření pro Chrome. Dá vám automatickou kontrolu celého webu. Najde všechny problémy s kontrastem najednou.
Chyby, kterých se vyvarujte
V praxi vidíme stále stejné chyby. Tady jsou ty nejčastější:
Světlé barvy na světlém pozadí
Třeba světle šedý text na bílém pozadí. Vypadá to jemně a elegantně v návrhu, ale když to někdo čte, je to noční můra. Naučte se — pokud je pozadí světlé, text musí být tmavý. Bez výjimek.
Testování jen na novém monitoru
Váš ultrašikovný 4K monitor zobrazuje barvy perfektně. Ale starší monitor nebo levný displej to vidí úplně jinak. Testujte na více zařízeních. Nebo aspoň víte, že má existovat nějaký buffer.
Zapomínání na interaktivní prvky
Testujete text v odstavcích, ale zapomínáte na tlačítka, linky a formuláře. Ty taky musí mít dobrý kontrast. Všechny prvky, všechny stavy — normální, hover, focus.
Spoléhání jen na barvu
Pokud rozlišujete informace jen barvou (jako červená = chyba, zelená = úspěch), lidé s barevnou slepotou to nevidí. Přidejte ikonu, text nebo symbol. Barva je jen bonus.
Praktické tipy do práce
Jak to dělat správně? Tady je to, co vám vskutku pomůže:
Začněte s temným a světlým
Nejsnadnější kombinace je tmavý text na světlém pozadí nebo světlý text na tmavém. Ostatní kombinace vyžadují více péče. Když jste nejistí, vraťte se k tomuhle.
Testujte od začátku
Nekončete s testováním až když je web hotov. Testujte při výběru barev. Ušetříte si čas a frustraci. Dvacet minut teď se vyplatí.
Dejte si výchozí poměr 5:1
WCAG říká AA je 4.5:1. Ale my si dáváme cíl 5:1 nebo vyšší. Je to jak bezpečnostní polštář. Máte prostor na případné chyby.
Zkontrolujte všechny stavy
Tlačítko není jen normální stav. Má hover, focus, active, disabled. Všechny ty stavy musí mít dobrý kontrast. To není luxus, to je povinnost.
Nástroje jsou pomocník, ne rozhodčí
Nástroje ti řeknou číslici. Ale otevřete web, kouknete na to očima. Někdy se ti bude zdát, že je kontrast OK, i když čísla říkají něco jiného. Věřte svým očím, ale taky si počítejte.
Všichni nejsou tvoji matka
To, že vidíš kontrast dobře ty, ještě neznamená, že to vidí všichni. Někdo má slabší zrak. Někdo stárne. Někdo kouká na mobil venku. Dělej to pro všechny.
Důležitá poznámka
Tenhle článek je vzdělávacím materiálem o barevném kontrastu a dostupnosti webu. Informace, které tu najdete, jsou založeny na WCAG 2.1 standardech a běžných praktikách. Každý web je jiný a okolnosti se liší. Pokud vytváříte web pro konkrétní účely nebo odvětví, poraďte si s odborníkem na dostupnost. Legislativa se mění, a tak se mění i požadavky. Vždy si ověřte aktuální normy pro vaši zemi.
Závěr: Kontrast je přístupnost
Kontrast není design prvek, který si můžete vzít nebo nechat. Je to součást odpovědného webdesignu. Když vaše barvy mají dobrý kontrast, čte se vám web líp všem. Starší lidi, mladší lidi, lidi se slabším zrakem, lidi, co kouká na mobil venku na sluníčku. Všem se to čte líp.
A víte co? Dobré barvy nejsou těžké. Není to nějaká věda. Tmavý text na světlém, světlý na tmavém. Jednoduché. A když si vezměte jeden ze zmíněných nástrojů a otestujete si to, budete vědět, že to máte správně.
Tak pojďme na to. Zkontrolujte si svůj web. Otevřete WebAIM. Zadejte si barvy. A jděte od toho. Vaši čtenáři budou vděční.
Chcete se dozvědět víc o barevných paletách a designu?
Zjistit více o barevných paletách
