This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Barrierefreiheit
Jaký kontrast barev je předepsán pro text na webových stránkách?
Normální text potřebuje kontrastní poměr vůči pozadí alespoň 4,5:1, velký text — od zhruba 24 pixelů nebo tučně od zhruba 18,7 pixelu — alespoň 3:1. Tyto hranice pocházejí z mezinárodního standardu WCAG. Zajišťují, že vaše texty přečtou i lidé s klesající zrakovou ostrostí — a každý návštěvník na slunci na telefonu.
Kontrastní poměr vysvětlený běžnou řečí
Kontrastní poměr popisuje, jak silně se barva textu a barva pozadí liší v jasu. Černá na bílé dosahuje maximální hodnoty 21:1 a čte se bez námahy. Módní světle šedá na bílé bývá často pod 3:1 — pro lidi s věkem klesající zrakovou ostrostí se takový text rozplývá do šedé plochy. Netýká se to jen zrakově postižených: i zákazník, který hledá vaši otevírací dobu na slunci na telefonu, na slabém kontrastu ztroskotá. Hranice 4,5:1 pro normální text a 3:1 pro velký text je ve standardu stanovený kompromis mezi grafickou svobodou a spolehlivou čitelností.
Jak naše měřicí jádro měří kontrast — i na obrázcích
Základní měření provádí axe-core: pro texty na stránce vypočítá kontrastní poměr z barvy textu a pozadí. U textu na fotografiích nebo barevných přechodech nedokáže žádný nástroj pozadí jednoduše odečíst — přesně tam jde naše měřicí jádro dál: text na okamžik skryje, vyfotí místo v prohlížeči, vypočítá jas skutečného pozadí bod po bodu a z toho odvodí skutečný kontrast vůči barvě textu. Z „nelze rozhodnout“ tak vznikne podložené hodnocení. Každé nevyhovující místo zpráva dokumentuje naměřenou hodnotou, požadovanou hranicí a doloženým snímkem obrazovky — vidíte tedy přesně, kterého místa v textu se to týká.
Jak zlepšit kontrast, aniž byste obětovali design
Dobrý kontrast nevynucuje černobílý design. Většinou stačí barvu textu o pár odstínů ztmavit — ze světle šedé vznikne střední antracitová, která vyzařuje stejnou zdrženlivost a přitom je čitelná. U textu na fotografiích pomáhají osvědčené postupy: poloprůhledná tmavá plocha za textem, barevný přechod při dolním okraji obrázku nebo přesunutí textu na klidnější část obrázku. Své firemní barvy kvůli tomu zpravidla nemusíte měnit — často stačí použít je pro velké plochy pozadí a pro text zvolit tmavší nebo světlejší variantu stejné barevné rodiny.
- Zkontrolujte nejdřív šedé texty na své webové stránce — patičky, popisky obrázků a poznámky u formulářů bývají pod hranicí nejčastěji.
- Požádejte svou agenturu, aby prověřila všechny barvy textu vůči hranicím 4,5:1 a 3:1 a zdokumentovala hodnoty.
- Podložte text na fotografiích poloprůhlednou tmavou plochou, místo abyste čitelnost nechali na obrázku.
- Prohlédněte si svou stránku na telefonu na jasném denním světle — co tam neobstojí, neobstojí vždy ani pro slabozraké návštěvníky.
- Zaznamenejte ověřené kombinace barev do svého grafického manuálu, aby je přebíraly i nové stránky.
FAQ
Co znamená kontrastní poměr 4,5:1?
Znamená to, že světlejší plocha je čtyřapůlkrát jasnější než tmavší. Černá na bílé dosahuje 21:1, bílá na bílé 1:1. Standard WCAG vyžaduje pro normální text alespoň 4,5:1 a pro velký text alespoň 3:1, aby texty zůstaly čitelné i při klesající zrakové ostrosti.
Od kdy se text považuje za velký ve smyslu pravidla kontrastu?
Od velikosti písma zhruba 24 pixelů, u tučného písma už od zhruba 18,7 pixelu. Pro takový velký text stačí mírnější kontrastní poměr 3:1, protože větší písmena zůstávají rozpoznatelná i při slabším kontrastu. Naše měřicí jádro zohledňuje velikost a tloušťku písma automaticky u každého jednotlivého měření.
Jak se měří kontrast u textu na fotografii?
Naše měřicí jádro text na okamžik skryje, vyfotí místo v prohlížeči a vypočítá jas pozadí z jednotlivých obrazových bodů. Vůči barvě textu z toho vyplyne skutečný kontrastní poměr. Nevyhovující místa zpráva dokumentuje naměřenou hodnotou a doloženým snímkem obrazovky.
Musím kvůli kontrastu měnit své firemní barvy?
Zpravidla ne. Většinou stačí použít firemní barvu pro velké plochy a pro texty zvolit tmavší nebo světlejší odstín stejné barevné rodiny. Mnoho známých značek jede přesně toto řešení: rozpoznatelnost zůstává, texty dosahují požadovaných hranic.