This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Barrierefreiheit
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.
- 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ý.
FAQ
Čím se toto pravidlo liší od pravidla kontrastu textu?
Pravidlo kontrastu textu vyžaduje 4,5:1 pro normální text. Toto pravidlo se týká všeho viditelného kromě textu, co nese funkci nebo informaci: rámečky polí, plochy tlačítek, symboly, čáry v diagramech. Pro to platí mírnější hranice 3:1 — grafické tvary jsou rozpoznatelné i při trochu slabším kontrastu.
Proč jsou světle šedá vstupní pole problém?
Protože jejich rámeček na bílém pozadí bývá hluboko pod požadovaným poměrem 3:1. Návštěvník s klesající zrakovou ostrostí pak nepozná, kde pole začíná a končí — formulář na něj působí prázdně. O trochu tmavší rámeček problém vyřeší, aniž by design znatelně změnil.
Jak kontrolní služba měří kontrast tlačítek?
Měřicí jádro vyfotí vzorek ovládacích prvků v prohlížeči a z obrazových bodů vypočítá jas okraje, výplně a okolí. Naměřené hranice pod 3:1 se uvádějí jako doložený případ ke kontrole se snímkem obrazovky; konečné rozhodnutí u zlatého standardu vynáší člověk, protože okolní design může prvek vizuálně nést.