axessia.eu

Nejčastější chyba při barevném kontrastu: co se pokazí a jak ji předejít?

Nedostatečný kontrast mezi textem a pozadím patří mezi nejčastěji zjišťované nedostatky při kontrolách přístupnosti. Tento článek vysvětluje, kde dochází k chybám, co WCAG předepisuje a jak se lze nedostatkům vyhnout systematicky.

Nedostatečný kontrast mezi textem a pozadím je jedním z problémů, které se nejčastěji objevují v skenech přístupnosti, a zároveň jednou z chyb, kterou lze nejsnáze předcházet. K chybě dochází, když je světlešedý text na bílém pozadí, když jsou tlačítka viditelná pouze kvůli jemné změně barvy, nebo když je zástupný text v poli formuláře jedinou nápovědou k tomu, co má být vyplněno. Pro lidi se zrakovým postižením, ale také pro kohokoli, kdo používá obrazovku na přímém slunečním světle, se text stává doslova nečitelným.

WCAG 2.1, norma, na kterou se EN 301 549 odkazuje, předepisuje pro úroveň AA minimální poměr kontrastu mezi textem a pozadím, na kterém se nachází: obvykle 4,5 ku 1 pro běžný text a 3 ku 1 pro velký text a pro ovládací prvky, jako jsou tlačítka a okraje formulářů. To zní technicky, ale základní myšlenka je jednoduchá: kontrast není estetickou volbou, je to podmínka pro předávání informací.

Kde dochází k chybám v praxi

Problémy s kontrastem vznikají zřídka úmyslně. Pronikat dovnitř prostřednictvím voleb týkajících se korporátní identity, které vypadají skvěle na velkém, ostrém displeji v designovém studiu, ale u průměrného uživatele na průměrné obrazovce jen mírně nedosahují normy. Světlešedý text tlačítka na pastelově barevném pozadí je klasickým příkladem. Totéž platí pro odkazy, které lze rozpoznat pouze podle změny barvy, bez podtržení nebo jiného vizuálního signálu, což znamená, že lidé barvoslepí je prostě nevidí jako klikatelné.

Dalším se opakujícím se vzorem je stav hover: tlačítko, které v klidu vyhovuje, ale při pohybu myši se změní na barevnou kombinaci, která nebyla testována. Chybové zprávy ve formulářích jsou také často se vyskytující chybou: červený text na světle červeném pozadí vypadá v souladu s korporátní identitou, ale často nedosahuje požadovaného poměru. Kdo je zvědavý, jak vypadají tyto druhy problémů ve vlastním prostředí, můžete vidět v několika otázkách, kde stojí vaše web bez toho, abyste si pro to nejdříve museli vytvořit účet.

Proč automatický sken to částečně, ale ne zcela řeší

Poměry kontrastu lze dobře měřit automaticky: skener čte hodnoty barev textu a pozadí a vypočítá poměr. To znamená, že se jedná o jedno z mála kritérií WCAG, které nástroj může spolehlivě testovat. Co sken nevidí, je kontrast, který vzniká až po interakci, jako je rozbalovací nabídka, popis, který se zobrazí při zaostření, nebo stav, který se stane viditelným pouze po akci uživatele. To je přesně důvod, proč každá zpráva uvádí, jaká část byla testována automaticky a jaká část vyžaduje ruční posouzení; kontrast je silnou stránkou automatického testování, ale ne úplný obrázek.

Jak tomu strukturálně zabránit

Nejběžnějším způsobem, jak tomuto problému trvale zabránit, je nastavení kontrastu na úrovni designového systému místo podle jednotlivých stránek. Když jsou základní barvy korporátní identity již při jejím stanovení testovány podle normy, redaktor nebo vývojář to nemusí pokaždé kontrolovat znovu. To také zabraňuje tomu, aby nová stránka, dočasný banner akce nebo externě nakoupený widget nezamýšleně nezhoršil poměr kontrastu.

Kromě toho je vhodné brát kontrast explicitně v úvahu při každé vizuální změně webu, a nejen při prvním předání. Obnova firemního stylu, nové sezónní téma nebo upravený styl tlačítka mohou zavést problém, který v předchozí verzi neexistoval. Přístupnost není v tom smyslu něco, co si jednou zaškrtnete, ale bod pozornosti, který je součástí probíhajícího údržby. Více o tom, jak taková průběžná kontrola v praxi funguje, si přečtete vysvětlení, odkud pochází hodnocení.

A konečně stojí za to podívat se nejen na minimální normu, ale na účel za ní: mohou všichni, i za méně ideálních světelných podmínek nebo na starší obrazovce, skutečně rozlišit text a tlačítka. Časté pochybnosti, například zda se logo nebo dekorativní obrázek musí také řídit požadavky na kontrast, jsou podrobně vysvětleny na stránce s odpověďmi na otázky, které se vracejí.

Chcete vědět, zda kontrast a další opakující se problémové body existují i ve vašem prostředí? Bezplatný quick-scan vám dá první představu, a znalostní bází s tématy vybraná podle situace ukazuje, jak se tato otázka souvisí se zbytkem povinností kolem Direktivy (EU) 2019/882.

Tento článek je obecné informace a není právní poradou.