Kontrast textu (Text contrast)

Příklady z praxe

1. 01

   Šedý text v patičce neprojde auditem

   Patička e-shopu používá odstín #999999 na bílém pozadí, což dává poměr přibližně 2,85:1. Automatický audit označí všechny odkazy v patičce jako chybu úrovně AA. Ztmavení na #767676 posune poměr těsně nad 4,5:1, aniž by se vizuálně změnila hierarchie stránky.

   /* nedostatečné: cca 2,85:1 */
   .footer a { color: #999; background: #fff; }
   
   /* vyhovuje AA pro běžný text: cca 4,54:1 */
   .footer a { color: #767676; background: #fff; }

2. 02

   Titulek nad fotografií

   Hero banner má bílý nadpis přes fotografii městské ulice. Nad tmavou fasádou je kontrast v pořádku, nad oblohou klesá pod 2:1 a slovo uprostřed titulku zaniká. Přidání tmavého překryvu s pevnou průhledností zajistí předvídatelné pozadí bez ohledu na to, jakou fotku redaktor nahraje.

   <div class="hero">
     <div class="hero__overlay"></div>
     <h2 class="hero__title">Doprava zdarma</h2>
   </div>

Časté omyly

MýtusKdyž jsou barvy hodně odlišné, kontrast je dostatečný.

Ve skutečnostiKontrastní poměr měří rozdíl světlosti, nikoli rozdíl odstínu. Sytě červená na sytě zelené jsou opticky velmi odlišné barvy, ale jejich poměr se pohybuje kolem 1,3:1 a text je prakticky nečitelný.

MýtusKontrast řeším jen kvůli nevidomým uživatelům.

Ve skutečnostiNevidomí uživatelé čtou obrazovku odečítačem a barvy je nezajímají. Kontrast pomáhá lidem se slabozrakostí, staršímu zraku, uživatelům levných displejů a komukoli, kdo se dívá na telefon na přímém slunci.

MýtusBílý text na černém pozadí je pro tmavý režim nejlepší volba.

Ve skutečnostiPoměr 21:1 je sice maximum, ale extrémní kontrast vyvolává halaci a rozpití hran písma, zvlášť u astigmatismu. Bezpečnější je tmavě šedé pozadí a mírně tlumené bílé písmo, které stále splňuje 4,5:1.

Časté dotazy

Jak změřit kontrast textu přímo v prohlížeči?

Kontrast textu ověříte v DevTools prohlížečů založených na Chromiu i ve Firefoxu. Po vybrání elementu se u vlastnosti color zobrazí vypočtený kontrastní poměr vůči zjištěnému pozadí spolu s informací, zda splňuje úroveň AA a AAA. Barevná pipeta navíc ukazuje hranici, pod kterou už odstín nevyhoví. Celý dokument najednou prověří audit přístupnosti v Lighthouse, který vypíše seznam prvků s nedostatečným poměrem. Automatické nástroje ale spolehlivě pracují jen s jednolitým pozadím, takže text nad fotografiemi, přechody nebo videem je nutné posoudit ručně.

Platí požadavek na kontrast textu i pro loga a ikony?

Kontrast textu se u log neposuzuje: WCAG dává logotypům a značkám výslovnou výjimku, protože jejich podoba je daná identitou firmy. Ikony a další netextová grafika ale výjimku nemají. Pokud ikona nese informaci nebo je součástí ovládacího prvku, musí mít vůči okolí poměr alespoň 3:1. Stejná hranice platí pro viditelné ohraničení formulářových polí, přepínačů a fokusového rámečku. Čistě dekorativní grafika, která nenese žádné sdělení a je skrytá před odečítačem obrazovky, se do kontroly nepočítá.

Jaký kontrast textu vyžaduje česká legislativa?

Kontrast textu na webech a v aplikacích veřejného sektoru se v Česku řídí zákonem o přístupnosti internetových stránek a mobilních aplikací, který odkazuje na evropskou normu EN 301 549. Ta přebírá kritéria WCAG na úrovni AA, tedy poměr 4,5:1 pro běžný text a 3:1 pro velký text a netextové prvky. Povinnost dopadá na úřady, školy, nemocnice a další subjekty veřejné správy. Komerční weby zákon přímo nezavazuje, směřování evropské legislativy k přístupnosti spotřebitelských služeb ale požadavky postupně rozšiřuje.

Musí splňovat kontrast i text v disabled tlačítku?

Kontrast textu u zakázaných ovládacích prvků WCAG explicitně vyjímá z kritéria 1.4.3, takže formálně chybu nezpůsobí. Z pohledu použitelnosti je ale ztlumené tlačítko na hranici viditelnosti problém: uživatel nepozná, co tlačítko dělá ani proč je nedostupné. Doporučený postup je držet u disabled stavu poměr alespoň kolem 3:1 a nedostupnost signalizovat i jinak než pouhým zesvětlením, například doplňujícím textem s vysvětlením podmínky. Stejná úvaha platí pro placeholder v poli, který uživatelé často čtou jako popisek.

Zdroje

1. Web Content Accessibility Guidelines (WCAG) 2.2(otevře se v novém okně)W3C, 2023
2. Understanding WCAG 2.2(otevře se v novém okně)W3C Web Accessibility Initiative
3. WCAG 2 Overview(otevře se v novém okně)W3C Web Accessibility Initiative
4. prefers-contrast(otevře se v novém okně)MDN Web Docs
5. Zákon č. 99/2019 Sb., o přístupnosti internetových stránek a mobilních aplikací(otevře se v novém okně)Zákony pro lidi, 2019

Související pojmy

• Design systemDesign system je sdílený soubor pravidel, komponent, vizuálních tokenů a dokumentace, který pomáhá týmu navrhovat a vyvíjet konzistentní digitální produkty. Propojuje UX, UI a frontend, aby tlačítka, formuláře, barvy, typografie i chování aplikace nevznikaly pokaždé znovu a šly bezpečně měnit napříč produkty.
• PřístupnostPřístupnost je vlastnost digitálního produktu, díky níž jej mohou používat lidé s různými schopnostmi, zařízeními a způsoby ovládání bez zbytečných překážek. Ve webu zahrnuje sémantické HTML, ovládání klávesnicí, dostatečný kontrast, textové alternativy, srozumitelné formuláře a kompatibilitu s asistivními technologiemi, například čtečkami obrazovky.
• Design tokenyDesign tokeny jsou pojmenované hodnoty vizuálních rozhodnutí, jako jsou barvy, odsazení, poloměry rohů nebo velikosti písma, uložené odděleně od kódu i od návrhu. Místo konkrétního zápisu #0B5FFF se v designu i v aplikaci odkazuje název color.action.primary, takže jedna změna hodnoty se promítne do webu, mobilní aplikace i dokumentace současně.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Alfa kanálAlfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.
• Alt atributAlt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.