This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Přístupnost
Jaký kontrast potřebují tlačítka a vstupní pole na webových stránkách?
Tlačítka, vstupní pole a výstižná grafika potřebují kontrastní poměr vůči okolí alespoň 3:1. Tato hranice pochází ze standardu WCAG. Zajišťuje, že slabozraký návštěvník pozná, kam kliknout a kam psát — bílé vstupní pole se světle šedým rámečkem na bílém pozadí je prakticky neviditelné.
Ovládací prvky se musí rýsovat
Zatímco známé pravidlo kontrastu se týká textu, tady jde o vše ostatní viditelné, co nese funkci: rámeček vstupního pole, plochu tlačítka, symbol lupy u vyhledávání, fajfku v zaškrtávacím poli. Moderní, velmi minimalistický design je zde nejčastější past — světle šedé rámečky polí na bílém pozadí působí elegantně, ale často jsou hluboko pod 3:1. Návštěvník s klesající zrakovou ostrostí pak vidí formulář bez rozpoznatelných polí: neví, kam s kurzorem. I symboly bez textového popisku — třeba hamburgerové menu — se musí od pozadí odlišovat alespoň 3:1, jinak pro něj navigace neexistuje.
Jak naše měřicí jádro měří kontrast ovládacích prvků
Naše měřicí jádro vybere vzorek ovládacích prvků stránky — vstupní pole, tlačítka, stylizovaná odkazová tlačítka — a vyfotí každý z nich i s okolím v prohlížeči. Z obrazových bodů vypočítá jas okraje, výplně a okolí a z toho skutečný kontrastní poměr hranice prvku. Pokud jsou naměřené hranice pod 3:1, zpráva to záměrně nahlásí jako doložený případ ke kontrole, ne rovnou jako porušení: zdánlivě příliš slabé pole může být vizuálně nesené okolním kontejnerem — to posoudí u zlatého standardu člověk podle přiloženého snímku obrazovky. Za splněné se kritérium počítá jen u dostatečně velkého, zcela bezvadného vzorku; čistě grafické objekty jako diagramy zůstávají věcí lidské kontroly.
Příklady
Vstupní pole s bledým rámem
input { border: 1px solid #dddddd; background: #fff; } /* 1,3:1 */input { border: 1px solid #767676; background: #fff; } /* 4,5:1 */Rámy, symboly a fokální rámy potřebují 3: 1 na pozadí, jinak není pole rozpoznatelné jako pole.
- Zkontrolujte své formuláře: každé vstupní pole potřebuje rámeček nebo výplň, která se zřetelně odlišuje od pozadí.
- Požádejte svou agenturu, aby prověřila barvy rámečků polí vůči hranici 3:1 a kde je potřeba, je ztmavila.
- Zkontrolujte symboly bez textu — vyhledávání, menu, košík — na dostatečný kontrast vůči pozadí.
- Dávejte pozor na stavy: i označení vybrané záložky nebo aktivního zaškrtávacího pole potřebuje 3:1.
- Prohlédněte si své formuláře ze vzdálenosti dvou metrů — pokud pole opticky zmizí, je kontrast příliš slabý.
