This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Přístupnost
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.
Příklady
Šedý text na bílém
body { color: #999999; background: #ffffff; } /* 2,8:1 */body { color: #595959; background: #ffffff; } /* 7,0:1 */Mezní hodnota pro normální text je 4,5: 1, pro velký text od 24 pixelů 3: 1. Hodnota je ve zkušebním protokolu za referenční hodnotu.
Bílé písmo na barvě značky
.knopf { color: #fff; background: #5aa9ff; } /* 2,5:1 */.knopf { color: #fff; background: #1a5fb4; } /* 6,3:1 */- 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.
