Představte si formulář, kde máte vyplnit povinné údaje. Rámečky políček jsou jen o trochu tmavší než pozadí. Na mobilu na slunci skoro nevidíte, kde máte vlastně klikat nebo psát. Přesně takové situace řeší kritérium „Kontrast netextových prvků“.
Kritérium říká, že kontrast všech ovládacích prvků vůči svému okolí má být minimálně 3:1.
Komu to pomáhá
- Lidem s horším zrakem: slabozrakým nebo s barvoslepým usnadňuje rozpoznání ovládacích prvků webu
- Seniorům: často hůře vnímají kontrasty a detaily. Jasně oddělené a kontrastní prvky jim zajistí větší komfort
- Každému v běžném životě:
- Při používání mobilu na přímém slunci: výrazný kontrast zabraňuje ztrátě informace.
- Když má uživatel unavené oči: zřetelné rámečky a přepínače pomůžou snížit chybovost.
- Při rychlém rozhodování: kontrastní prvky usnadňují orientaci.
Co znamená „Kontrast netextových prvků“?
Kritérium 1.4.11 říká, že důležité vizuální prvky, které slouží k ovládání nebo jsou důležité pro pochopení stavu, obsahu a funkčnosti, musí mít kontrast minimálně 3:1 vůči sousedním barvám.
Kontrast netextových prvků se měří mezi barvou prvku a bezprostředně sousedící barvou (pozadím nebo okolním tvarem).
Kritérium se týká vzhledu prvku jako celku, netýká se samotného textu. Týká se tvaru, barvy, výplně, obrysu nebo stínu prvku. To platí bez ohledu na to, zda prvek obsahuje či neobsahuje text.
Toto pravidlo se týká ne-textových prvků. Text samotný řeší kritéria 1.4.3 Minimální kontrast a 1.4.6 Zvýšený kontrast.
Kritérium se týká dvou oblastí:
Ovládací prvky
Týká se interaktivních prvků, které umožňují kliknutí, psaní, přepnutí,… Pokud mají prvky vizuální obrys nebo výplň, jejich grafická část musí být kontrastní vůči okolí minimálně 3:1.
Patří sem např. tlačítka, posuvníky, zaškrtávací políčka, výběrové prvky, ikony v navigaci a ovládání (např. „hamburger“ menu, šipky dopředu/dozadu…)
Nestačí, že prvek „nějak vypadá“, uživatel musí poznat, co se s ním právě děje. Proto nezapomeňte vzájemně odlišit jednotlivé stavy těchto ovládacích prvků:
- normální stav
- vybraný stav (:active)
- stav při najetí myši (:hover)
- stav při aktivování klávesnicí (:focus)
- deaktivovaný stav
Výjimka: U neaktivních prvků kontrast neřešíme, protože s nimi uživatel nic nedělá. Nemá na ně klikat, ani je používat. Mají být opravdu neinteraktivní.
Grafické prvky s významem
Týká se grafiky, která nese informaci nebo má funkci, jako např. červený křížek označující „chybový stav“. Grafika musí mít minimální kontrast 3:1 vůči okolí, pokud je potřebná k pochopení obsahu.
Patří sem například:
- Ikony se specifickým významem: ikona koše = smazat, ikona zámku = uzamčeno, ikona vykřičníku = varování
- Části grafů a diagramů: sloupce, výseče, linie v grafu, části legendy (značka + barva)
- Stavové indikátory: pruh, který ukazuje průběh nahrávání nebo odesílání; ukazatel stavu (např. baterie, signál); barevný rámeček kolem formulářového pole, pokud obsahuje chybu
Neplatí pro čistě dekorativní grafiku nebo prvky, které mají jasný význam díky doprovodnému textu.
Tenké čáry a jemné tvary
Při vyhlazování hran mohou tenké čáry působit světleji, než jakou barvu jim nastavíte v CSS stylu. Na papíře to sice splňuje kontrastní poměr, ale ve skutečnosti to tak být nemusí.
Řešení: Nepoužívejte příliš tenké linie nebo zvolte větší kontrast než jen 3:1.
Příklady
Přepínač
Popis: Přepínač (radio button) je světle šedý na bílém pozadí. Při změně stavu na vybraný je výplň zobrazena jen tmavším odstínem šedé.
Problém: Prvek splývá s pozadím, kontrast je pod 3:1. Uživateli nemusí být jasné, že jde o ovládací prvek. Není dostatečný rozdíl mezi vybraným a nevybraným stavem.
Řešení: Ztmavte, případně zesilte okraj přepínače. Jasně odlište stavy.
Zaškrtávací políčko
Popis: Zaškrtnuté políčko má zelené zaškrtnutí na středně šedém pozadí.
Problém: Značka „✔“ není dostatečně vidět. Kontrastní poměr nestačí pro jasné odlišení stavu „zaškrtnuto“.
Řešení: Změňte barvu zaškrtnutí tak, aby byla dostatečně kontrastní. Pokud nemůžete změnit barvu zaškrtnutí, změňte barvu pozadí. Můžete značku zaškrtnutí zvětšit, aby byla lépe viditelná. Případně místo značky zaškrtnutí použijte plné políčko s dostatečným kontrastem.
Špatný příklad:
Dobrý příklad:
Tlačítko při najetí myši
Popis: Tlačítko má normální a „hover“ stav (při přejetí myší) skoro stejný. Je zde jen mírná změna odstínu.
Problém: Uživatel nepozná, že je tlačítko interaktivní nebo že na něj najel kurzorem. Rozlišení stavů nesplňuje kontrastní rozdíl.
Řešení: Tlačítku upravte stavy tak, aby byly jasně rozlišitelné. Změňte u jednoho stavu barvu pozadí. Pokud nemůžete změnit barvy, upravte „hover“ efekt přidáním kontrastního okraje (outline nebo border) nebo stínu, případně obojího.
Ikona nastavení
Popis: Ikona ozubeného kola je světle šedá na bílém pozadí.
Problém: Lidé s poruchou zraku nebo při špatném světle si ji nemusí vůbec všimnout. Kontrast mezi ikonou a pozadím je malý.
Řešení: Změňte barvu ikony, aby byla dostatečně kontrastní. Pokud nemůžete změnit barvu ikony, dejte pod ikonu kontrastní stín nebo okraj.
Zvýraznění aktivního pole formuláře
Popis: Vybrané pole má jen mírně odlišné pozadí (např. světle modrá místo bílé).
Problém: Barevný rozdíl je příliš jemný. Rozdíl mezi běžným a aktivním polem není snadno viditelný, zvlášť u horších monitorů nebo při únavě očí.
Řešení: Změňte pozadí pole na kontrastnější (nezapomeňte upravit i barvu písma), případně přidejte výrazný okraj řádku.
Špatný příklad:
Dobrý příklad:
Výběr varianty produktu
Popis: V e-shopu je vybraná varianta (např. barva oblečení) označena pouze slabě barevným rámečkem.
Problém: Pokud je rámeček světle modrý na světlém pozadí, kontrast nestačí k bezpečnému rozpoznání výběru.
Řešení: Použijte kontrastnější rámeček, případně přidejte i stín. Pokud nemůžete měnit barevnost, přidejte do vybraného obrázku značku pro vybrané zboží: ✓.
Špatný příklad:
Dobrý příklad:
