Kontrast barev a přístupnost: poměry WCAG, kontrola a opravy

Světle šedý text na bílém pozadí vypadá v návrhu čistě. Na telefonu na ostrém slunci nebo pro slabozrakého člověka se ale čte ztěžka. Je to také vůbec nejčastější chyba přístupnosti: WebAIM Million 2026 (otevře se v nové kartě) našel text s nízkým kontrastem na 83,9 % z milionu nejnavštěvovanějších domovských stránek, v průměru 34 různých výskytů na stránku.

Dobrá zpráva je, že kontrast jde změřit, hranice jsou jasné a opravy většinou levné. Tento průvodce vám dá čísla, bezplatné nástroje a postup, jak opravit barvy značky, aniž byste začínali od nuly.

Co je kontrastní poměr?

Kontrastní poměr je číslo, které porovnává relativní jas neboli luminanci dvou barev, obvykle textu a jeho pozadí. WCAG ho počítá podle pevného vzorce a výsledek se pohybuje od 1:1 (žádný rozdíl, bílá na bílé) po 21:1 (černá na bílé). Čím vyšší číslo, tím snáz se obě barvy rozliší.

Vzorec je (L1 + 0,05) / (L2 + 0,05), kde L1 je relativní luminance světlejší barvy a L2 tmavší. Ručně ho počítat nikdy nebudete muset, ale jeden detail je důležitý: počítá se jen luminance, ne odstín. Proto může červený text na zeleném pozadí vypadat sytě, a přesto dopadnout špatně.

Druhý detail, který lidé přehlížejí, je zaokrouhlování. Vysvětlující dokument W3C ke kritériu 1.4.3 (otevře se v nové kartě) uvádí, že vypočtené hodnoty „by se neměly zaokrouhlovat (např. 4,499:1 nesplňuje hranici 4,5:1)“. Šedá #767676 na bílé (4,54:1) tedy vyhovuje, zatímco #777777 na bílé (4,48:1) ne, přestože je okem nikdo nerozliší.

Jaký kontrastní poměr WCAG vyžaduje?

Na úrovni AA, na kterou odkazuje většina zákonů a smluv, potřebuje běžný text alespoň 4,5:1 vůči pozadí a velký text 3:1 (kritérium úspěšnosti 1.4.3). Prvky rozhraní a významová grafika potřebují 3:1 vůči sousedním barvám (1.4.11). Přísnější úroveň AAA vyžaduje 7:1 u běžného textu a 4,5:1 u velkého (1.4.6).

Proč právě 4,5:1? W3C vysvětluje, že tato hodnota „kompenzuje ztrátu kontrastní citlivosti, kterou obvykle mají uživatelé se ztrátou zraku odpovídající zrakové ostrosti přibližně 20/40“ (vízus zhruba 0,5). Jinými slovy, je nastavená pro lidi se středně sníženým zrakem, mezi které patří mnoho starších zákazníků, kteří by o sobě nikdy neřekli, že mají zdravotní postižení.

Některý text je vyjmutý: loga a názvy značek, čistě dekorativní text, text, který není nikomu vidět, text na obrázku s jiným významným vizuálním obsahem a text v neaktivních (vypnutých) ovládacích prvcích. Vaše logo tedy může zůstat, jak je. Odstavec vysázený v bledé barvě loga už ne.

Co se považuje za velký text?

Velký text je podle WCAG text o velikosti alespoň 18 bodů nebo alespoň 14 bodů, pokud je tučný. W3C to převádí zhruba na 24 CSS pixelů a 18,5 pixelu tučně. Vše menší potřebuje plných 4,5:1. Text odstavců, popisky obrázků, popisky polí, ceny a odkazy v patičce téměř nikdy nejsou velkým textem, takže potřebují vyšší poměr.

Jak to vypadá v praxi: šedá #949494 na bílé má 3,03:1. Na nadpis o výšce 28 pixelů to stačí, na 16pixelový odstavec ve stejné barvě ne. Spousta webů projde u nadpisů a neprojde u všeho pod nimi.

Tenká a ozdobná písma vyžadují zvláštní pozornost. W3C upozorňuje, že kvůli vyhlazování hran „mohou být zvlášť tenká nebo neobvyklá písma vykreslena uživatelskými agenty v mnohem slabší barvě“, než jakou jste zvolili. Pokud má vaše firemní písmo tenký řez, nechte si rezervu nad 4,5:1 a nemiřte na 4,51.

Platí požadavky na kontrast i pro tlačítka, ikony, indikátory fokusu a grafy?

Ano. Podle kritéria úspěšnosti 1.4.11 (úroveň AA) potřebuje vše, co lidé musí vidět, aby poznali ovládací prvek, jeho stav nebo grafiku, poměr 3:1 vůči sousedním barvám. Týká se to okrajů polí formulářů, ikon bez textového popisku, obrysů fokusu, stavů zaškrtávacích políček a přepínačů i čar a výsečí grafů. Text uvnitř tlačítka stále potřebuje 4,5:1.

• Pole formulářů: světle šedý okraj #CCCCCC na bílé má 1,61:1. Pokud jen tato slabá čára ukazuje, kam psát, nevyhovuje.
• Tlačítka: WCAG nevyžaduje viditelný okraj kolem každého tlačítka. Vysvětlující dokument W3C ke kritériu 1.4.11 (otevře se v nové kartě) uvádí, že hranice je potřeba jen tehdy, když ovládací prvek nejde rozpoznat jinak. Pokud je tlačítko rozpoznatelné jen podle barevného tvaru, tento tvar potřebuje 3:1 vůči stránce.
• Ikony: lupa vyhledávání, srdíčko seznamu přání nebo ikona košíku bez textu vedle potřebují 3:1.
• Indikátory fokusu: obrys ukazující fokus klávesnice musí kontrastovat s pozadím kolem sebe. Novější kritéria pro fokus probírá náš průvodce WCAG 2.2.
• Grafy: čáry spojnicového grafu a výseče koláčového grafu potřebují 3:1, pokud stejné hodnoty nejsou uvedené i textem.
• Vypnuté ovládací prvky jsou vyjmuté, i když lidé stále potřebují poznat, zda jde tlačítko stisknout.

Zvláštním případem jsou odkazy v souvislém textu. Pokud je odlišuje jen barva, bez podtržení, technika W3C G183 (otevře se v nové kartě) požaduje 3:1 mezi barvou odkazu a okolního textu, přičemž obojí stále potřebuje 4,5:1 vůči pozadí. Najít tři barvy, které tohle všechno splní, je těžké. Podtržení je mnohem jednodušší.

Jak zkontrolovat kontrast barev?

Na konkrétní dvojice barev použijte bezplatný nástroj pro kontrolu kontrastu, na živé stránky vývojářské nástroje prohlížeče a na vyhledání problémových míst v celém webu automatický sken. Pak okem zkontrolujte, co nástroje přehlédnou: text na fotkách a přechodech, stavy při najetí a fokusu, zástupný text a chybové hlášky. Většinou to zabere pár minut na šablonu stránky.

• WebAIM Contrast Checker (otevře se v nové kartě): zadejte dva hexadecimální kódy a dostanete poměr s hodnocením pro běžný text, velký text a grafické objekty. Posuvník světlosti se hodí k nalezení nejbližšího vyhovujícího odstínu.
• Colour Contrast Analyser (otevře se v nové kartě): bezplatná desktopová aplikace od společnosti Vispero pro Windows a macOS. Její kapátko načte barvu libovolného pixelu na obrazovce, což se hodí u textu na obrázcích, v PDF a v aplikacích, a obsahuje simulátor poruch barevného vidění.
• Chrome DevTools: prozkoumejte kus textu a otevřete výběr barvy. Jeho sekce kontrastního poměru (otevře se v nové kartě) ukazuje čáry pro AA a AAA a umí navrhnout vyhovující barvu. Panel CSS Overview vypíše všechny problémy s kontrastem na stránce.
• Automatické nástroje: rozšíření prohlížeče a Lighthouse označí text s nízkým kontrastem na celé stránce, ale text na obrázcích nebo přechodech často označí k ruční kontrole, místo aby ho uznaly nebo zamítly.

Kde nástroje nestačí, měřte ručně. U textu na úvodní fotce změřte nejsvětlejší část obrázku za nejsvětlejšími písmeny; W3C uvádí obrázky na pozadí bez dostatečného kontrastu jako známou chybu (F83). Najeďte na tlačítka, přejděte na ně klávesou Tab, vyvolejte chybu ve formuláři, přepněte na tmavý režim, pokud ho nabízíte. I tmavý motiv může nevyhovovat: šedá #757575 na pozadí #121212 má 4,07:1. Náš návod jak otestovat přístupnost webu řadí kontrast mezi další rychlé ruční kontroly.

Jak opravit nízký kontrast bez změny vizuální identity?

Obvykle tak, že přidáte tmavší odstín barvy značky pro text a malé prvky a originál ponecháte pro velké nadpisy, pozadí a ilustrace. Mnoho barev značek selhává jen v malých velikostech. Často stačí na světlé barvě značky zaměnit bílý text za tmavý a většina návštěvníků si všimne jen toho, že se stránka čte snáz.

1. Vytvořte „textovou“ verzi každé barvy značky s kontrastem alespoň 4,5:1 vůči hlavním pozadím a používejte ji pro text odstavců, odkazy a malé ikony.
2. Původní jasnou barvu používejte pro velké nadpisy (tam stačí 3:1), pozadí, ilustrace a dekorace.
3. Na světlých barvách značky změňte text tlačítek z bílého na tmavý.
4. Pod text umístěný na fotkách dejte plný nebo poloprůhledný podklad.
5. Zkontrolujte každý stav: najetí, fokus, navštívený odkaz, výběr, chybu a zástupný text.
6. Vyhovující dvojice uložte jako design tokeny nebo nastavení šablony, aby je nové stránky přebíraly, místo aby je vymýšlely znovu.

Design pro barvoslepost: proč samotná barva nestačí

Kontrast a barva jsou dva oddělené problémy. Podle Colour Blind Awareness (otevře se v nové kartě) má poruchu barevného vidění, nejčastěji v rozlišování červené a zelené, zhruba každý dvanáctý muž a každá dvoustá žena. Kritérium WCAG 1.4.1 (otevře se v nové kartě) (úroveň A) říká, že barva nesmí být jediným vizuálním prostředkem sdělení informace, takže ji doplňte textem, ikonami, vzory nebo podtržením.

• Chyby ve formulářích: samotný červený okraj nevyhovuje. Přidejte k poli zprávu, například „Zadejte PSČ“, ideálně s ikonou.
• Dostupnost a stav: zelená nebo červená tečka u produktu mnoha zákazníkům nic neřekne. Napište „Skladem“ nebo „Vyprodáno“.
• Grafy: legenda, která stojí na přiřazování barev, se čte špatně. Popisujte čáry přímo nebo použijte vzory a různé styly čar.
• Odkazy: v textu odstavců je podtrhávejte, z důvodů uvedených výše.

Pokud chcete problém vidět na vlastní oči, Chrome DevTools umí emulovat poruchy barevného vidění a simulátor má i Colour Contrast Analyser. I tady pomáhá kontrast: poměr měří světlost, ne odstín, takže dvě barvy s vysokým poměrem zůstanou rozlišitelné, i když se jejich odstíny zdají podobné. Víc o tom, jak si slabozrací lidé a lidé s jiným postižením nastavují zařízení, najdete v článku jak lidé se zdravotním postižením používají web.

Stačí režimy vysokého kontrastu a přepínače kontrastu?

Ne. Kontrastní motivy operačního systému a přepínače kontrastu na stránce pomáhají lidem, kteří vědí, že potřebují vyšší kontrast, a sami si ho zapnou. WCAG ale posuzuje stránku ve výchozím stavu, takže barvy, které každý návštěvník uvidí jako první, musí vyhovovat. Přepínač je možnost navíc pro ty, kdo chtějí víc, ne oprava barev, které nevyhovují.

Někteří lidé se zdravotním postižením používají kontrastní motivy Windows, které vaše barvy nahradí vlastními. Vyplatí se web s takovým motivem otestovat: ikony vytvořené z obrázků na pozadí mohou zmizet a styly fokusu kreslené jen stínem (box-shadow) také. Dotaz na médium prefers-contrast v CSS navíc umožňuje nabídnout kontrastnější verzi lidem, kteří o ni požádali v nastavení systému.

Náš vlastní widget má úpravu kontrastu a profil pro barvoslepost a některým návštěvníkům se hodí. Přesto vám řekneme totéž: pokud máte text odstavců v barvě #999999 na bílé, změňte CSS. Widget dává návštěvníkovi, který chce vyšší kontrast, možnost ho získat. Nevyhovující výchozí barvy tím vyhovující nebudou a říká to i přehled WCAG v naší dokumentaci.