Jedním ze základních pilířů přístupného webu je dostatečný kontrastní poměr, tedy aby byl text dobře viditelný vůči pozadí. Pokud je text špatně čitelný kvůli nízkému kontrastu, web se stává nepřívětivým – nejen pro lidi se zrakovým omezením, ale i pro běžné uživatele v různých světelných podmínkách.
Než se pustíte do práce s kontrastem barev, doporučujeme si nejprve projít tyto dva úvodní články, které vám poskytnou základní přehled o přístupnosti webu:
- Připravte se na novou éru přístupnosti - úvod do přístupnosti (co to vlastně znamená, proč je důležitá a koho se týká - nejen uživatelů se zdravotním omezením).
- Přístupnost – jak zkontrolovat svůj web? - praktický návod, jak si snadno ověřit, zda váš web splňuje základní pravidla přístupnosti dle legislativy.
V tomto článku si ukážeme, jaký kontrast je podle pravidel přístupnosti považován za dostatečný a jak kontrast změřit.
Co je to kontrastní poměr a proč na něm záleží?
Obecně kontrastní poměr udává rozdíl v jasu mezi dvěma barvami – mezi barvou textu a barvou pozadí. Čím vyšší je kontrastní poměr, tím lépe je text čitelný. Například černý text na bílém pozadí má velmi vysoký kontrast (poměr 21:1), zatímco světle šedý text na bílém pozadí má kontrast nízký a může být pro uživatele těžko čitelný nebo dokonce nečitelný.
Proč je to důležité?
- Zrakové omezení – uživatelé se zhoršeným zrakem, barvoslepostí nebo jiným omezením potřebují výrazný kontrast, aby mohli pohodlně číst obsah webu.
- Mobilní použití – i lidé bez zrakového omezení mohou mít problém s čitelností například na přímém slunci nebo na malém displeji.
- Unavené oči – večer, při snížené koncentraci nebo při rychlém procházení webu uživatel instinktivně přeskočí špatně čitelné části.
Dejte si pozor při nastavování barev pro různé komponenty. Barvy můžete nastavit např. v kostičce Infobox. Zde je důležité abyste si ohlídali kontrast textu vůči pozadí, aby vše bylo dobře čitelné.
Níže je na obrázku uveden příklad špatného a správného kontrastního poměru barev - sami může posoudit, který text se vám lépe čte.
Co říká legislativa a WCAG?
Požadované hodnoty kontrastního poměru dle standardu WCAG 2.1:
-
Ideální minimální kontrastní poměr je 7:1 - tento poměr odpovídá legislativě úrovně AAA, která momentálně není povinná (tzn. je to doporučeno ale není to prozatím nutné).
-
Minimální kontrastní poměr 4.5:1 - odpovídá úrovni AA, což je úroveň kterou požaduje legislativa platná od 28. června 2025.
Na obrázku níže můžete vidět ukázku těchto kontrastních poměrů ➡️
Jak zkontrolovat kontrast na svém webu?
Nástroj, který za nás doporučujeme je WAVE. Nástroj je jednoduchý, srozumitelný a dostupný online. WAVE je zdarma, nevyžaduje žádnou registraci nebo přihlášení a nevyžaduje ani žádné technické znalosti. Funguje přímo ve vašem prohlížeči a zobrazí vám, kde jsou na stránce potenciální problémy. Obecně tomu jak pracovat s tímto nástrojem se věnuje článek Přístupnost – jak zkontrolovat svůj web?.
Přejděte na stránky nástroje WAVE (případně si můžete do Chromu stáhnout doplněk). Vložte url adresu vašeho webu do vyhledávacího pole a stiskněte Enter. Poté co nástroj udělá audit, zobrazí vám vaší stránku s výsledky. Přejděte na záložku Contrast, kde se zobrazí všechny výskyty nedostatečného kontrastního poměru.
Záložka Contrast
Záložka Contrast ukazuje, jestli jsou barvy na webu dostatečně čitelné – hlavně text vůči pozadí. Zobrazuje se zde seznam všech míst, kde kontrast nevyhovuje (např. světlý text na světlém pozadí). Každý výskyt lze prokliknout přes červenou ikonku a zjistit jaký kontrastní poměr daného výskytu je.
Obecně by měl být poměr alespoň 4.5:1, což vám i nástroj ukazuje - pokud tohoto poměru dosahujete bude vám zeleně svítit "Pass" u WCAG AA (stav u WCAG AAA zatím řešit nemusíte). Pokud se zobrazuje stav "Fall", není u daného výskytu poměr dostačující.
Na této záložce si zároveň můžete vyzkoušet jaké barvy nastavit, aby vám tato barevná kombinace prošla. Ve vrchní části záložky se vám zobrazí po prokliku na jeden z výskytů barva textu "Foreground" (levé sekce) a barva pozadí "Background" (pravá sekce). V těchto sekcí lze nastavit jiné barvy nebo sytost barvy - když budete měnit, bude se vám měnit i kontrastní poměr "Contrast Ratio" a uvidíte, zda už byste s touto barevnou kombinací prošli podle WCAG AA.
Kde lze na webu nastavit barvy?
Na webu jsou omezená práva na správu barev. Většina barev na webu se nastavuje v modulu Nastavení, kam běžně nemáte přístup a pokud pomocí nástroje narazíte na nedostatečný kontrastní poměr, doporučujeme se na nás obrátit.
U některých kostiček ale máte možnost nastavit si barvy sami, konkrétně v kostičce:
- Citace - barvu lze nastavit v parametru Podbarvení
- Infobox - celý infobox lze barevně nastavit (pozadí, popis, nadpisy atd.)
- Horizontální linka - barvu lze nastavit v parametru Změnit barvu horizontální linky
- Počítadlo - barvu lze nastavit v parametru Barva počítadla a Barva nevyplněné části počítadla
Obecně doporučujeme zkontrolovat svůj web a případně se obrátit na nás pokud se odhalí výskyty, které si sami nemůžete opravit.