Barvy jsou důležitým prvkem webdesignu. Při špatném výběru můžou 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ý a to nejen 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:
- kontrastní poměr pro běžný text musí být alespoň 4,5:1
- kontrast 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 bílé. Dostatečný kontrastní poměr si můžete ověřit v nástrojích pro kontrolu kontrastu.
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á).
Toto pravidlo se týká veškerého textu na webu, který nese nějakou informaci. Tedy i toho, který se zobrazí při najetí myší (:hover) nebo když je objekt aktivní z klávesnice (:focus).
Toto pravidlo se netýká dekorativního textu, který má pouze designový účel (např. je součástí pozadí stránky).
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ý odlišovací prvek. Nepoužívejte například barvu jako jediné odlišení pro odkazy.
- Pro zvýraznění použijte místo barev tučné písmo.
- Text může být obtížně čitelný na fotce nebo barevném přechodu. Pokud je to možné, používejte text na jednobarevném pozadí.