Barvy jsou důležitým prvkem webdesignu. Při špatném výběru můžou totiž přinést víc škody, než užitku. Minimální kontrast mezi textem a pozadím je důležitý, aby byl text čitelný i pro lidi se slabším zrakem a barvoslepé.
Komu to pomáhá
- Lidem se slabším zrakem nebo barvoslepým, kteří mají často potíže číst text, který je špatně odlišený od pozadí.
- Lidem bez vady zraku, například při prohlížení webu na mobilu na slunci.
Představte si, že přijdete na web, kde barva textu splývá s pozadím. Takže text nejde skoro přečíst. Bude se vám chtít text luštit nebo odejdete jinam? Nedostatečný kontrast může uživatele frustrovat a být důvodem pro opuštění stránky.
Detailní popis
Kritérium stanovuje, že kontrastní poměr pro běžný text musí být alespoň 4,5:1, zatímco pro velký text (minimálně 18 bodů nebo 14 bodů – pokud je text tučný) stačí kontrast 3:1.
Poznámka: Velikosti bodů jsou založeny na CSS velikosti „pt“ (obrazové body). Poměr mezi velikosti v bodech a pixelech je: 1pt = 1,333px, proto 18pt a 14pt jsou přibližně 24px a 18,5px.
Výjimku kontrastu mají dekorativní texty a logotypy. Text, který je součástí loga nebo názvu firmy či produktu, nepodléhá žádným požadavkům na minimální kontrast.
Pokud máte tmavé pozadí, text by měl být světlý a naopak. Černá a bílá poskytují maximální kontrast, který také není ideální. Tím jak je výrazný, unavuje oči. Proto se nejčastěji používá tmavě šedá na „špinavé“ bílé. Dostatečný kontrastní poměr si můžete ověřit v on-line nástroji pro kontrolu kontrastu.
Toto pravidlo se týká veškerého textu na webu, tedy i textu, který se zobrazí při najetí myší (:hover) nebo když je objekt aktivní z klávesnice (:focus).
Důležité je nezadávat pro daný prvek pouze barvu textu nebo jen barvu pozadí. Vždy je třeba, aby byla pro daný text na webu definována jak barva, tak pozadí (dědičnost se počítá).
Poznámka: Toto kritérium se vztahuje pouze na text. K podobným problémům dochází i u obsahu v tabulkách, grafech, diagramech a dalších netextových prvcích, které řeší kritérium 1.4.11.
Související doporučení
- Používejte větší text a jednoduchá (ne ozdobná) písma. Bezpatková písma jsou vhodnější.
- Nespoléhejte na barvu jako jediný prostředek přenosu informací. Nepoužívejte například barvu jako jedinou metodu označení úrovní nadpisu.
- Pro zvýraznění použijte místo barev tučné písmo.
- Text může být obtížně čitelný na fotografickém nebo gradientním pozadí. Pokud je to možné, nastavte text na pevné pozadí.