Jak opravit nízký kontrast textu

Krátká odpověď

Běžný text musí mít proti pozadí kontrast aspoň 4,5:1, velký text aspoň 3:1. Opravíte ho tak, že text nebo pozadí ztmavíte (případně zesvětlíte), u textu přes fotku přidáte tmavý podklad. Kontrast změříte v Chrome (nástroje pro vývojáře nebo Lighthouse), nástrojem WAVE nebo kalkulačkou kontrastu.

Nízký kontrast je nejrozšířenější chyba přístupnosti na českých a slovenských e‑shopech. V naší studii 279 českých a slovenských e‑shopů (automatický test axe-core, 20. 10. 2026) ho mělo 91 % obchodů.

Jaký kontrast požadují pravidla WCAG?

WCAG uvádí velikost velkého textu v bodech (18 bodů, tučně 14 bodů). V pixelech webu to odpovídá zhruba 24 px a 18,7 px. Poměr se nezaokrouhluje: 4,48:1 nestačí.

Výjimky jsou úzké: neaktivní prvky (zašedlé tlačítko, které nejde stisknout), čistě ozdobný text, text v logu a text, který je jen součástí fotografie s jiným hlavním obsahem (třeba jmenovka na fotce lidí). Text banneru se slevou nebo akcí nese sdělení, takže kontrast splnit má, i když je vložený jako obrázek.

Kritéria najdete na w3.org: 1.4.3 Kontrast (minimum) a 1.4.11 Kontrast netextových prvků. Přísnější úroveň AAA (7:1, kritérium 1.4.6) zákon nevyžaduje.

Jak kontrast změříte?

Naše Kontrola webu kontrast neměří. Čte HTML stránky bez vykreslení, a barvy proto nevidí. Použijte jeden z těchto nástrojů:

1. Chrome, nástroje pro vývojáře. Klikněte pravým tlačítkem na text a zvolte Prozkoumat. V panelu Styles klikněte na barevný čtvereček u vlastnosti color. Výběr barvy ukáže poměr kontrastu (Contrast ratio) a jestli splňuje AA a AAA.
2. Lighthouse v Chrome. Test přístupnosti vypíše všechny prvky s chybou „Background and foreground colors do not have a sufficient contrast ratio“.
3. WAVE od WebAIM označí chyby kontrastu přímo na stránce.
4. WebAIM Contrast Checker: zadáte dvě barvy a uvidíte poměr. Hodí se při výběru barev ještě před úpravou webu.

Automatické nástroje neumí spolehlivě změřit text přes fotku nebo přechod barev. Takové místo obvykle nechají k ručnímu posouzení. Tam změřte barvu textu proti nejsvětlejšímu místu pozadí pod ním.

Jak opravit šedý text na bílém pozadí?

Světle šedý text (ceny před slevou, popisky, patička, datum u článku) je nejčastější případ.

Špatně – #999 na bílé má kontrast 2,85:1:

.popis {
  color: #999999;
}

Správně – #767676 je nejsvětlejší neutrální šedá, která na bílé projde (4,54:1):

.popis {
  color: #767676;
}

Pozor, #777777 už neprojde (4,48:1). Pokud chcete rezervu, použijte #595959 (7:1). Pozor také na průhlednost: opacity nebo barva s průhledností (rgba) kontrast snižuje stejně jako světlejší barva.

Jak opravit text přes fotku?

Bílý nadpis přes fotografii může na tmavém místě vypadat dobře a o kus vedle, na obloze, zmizet. Řešení jsou tři:

• dát pod text tmavý poloprůhledný závoj,
• dát text na plný podklad (štítek, pruh),
• dát text pod fotku nebo vedle ní.

Správně – tmavý závoj pod bílým textem:

.banner {
  background:
    linear-gradient(
      rgb(0 0 0 / .55),
      rgb(0 0 0 / .55)
    ),
    url("banner.jpg") center / cover;
  color: #ffffff;
}

Černý závoj s krytím 55 % ztmaví i úplně bílé místo fotky natolik, že bílý text na něm má kontrast přes 4,5:1. Nad tmavší fotkou může stačit slabší závoj, ale pak je potřeba změřit nejsvětlejší místo pod textem. A myslete na mobil: na úzkém displeji se fotka ořízne jinak a pod textem může být jiné místo než na počítači.

Jak opravit placeholder a okraje polí?

Šedý zástupný text v poli (placeholder) je text jako každý jiný. Pokud nese informaci, potřebuje kontrast 4,5:1. Výchozí barvu placeholderu určuje prohlížeč nebo šablona, takže ji nastavte sami:

input::placeholder {
  color: #767676;
  opacity: 1;
}

(opacity: 1 je tam proto, že některé prohlížeče placeholder samy zprůhledňují.) Lepší je ale mít nad polem viditelný popisek a placeholder nepotřebovat, viz Jak opravit pole formuláře bez popisku.

Okraj pole, podle kterého člověk pozná, kam psát, spadá pod kritérium 1.4.11 a potřebuje kontrast 3:1. Světle šedý okraj #cccccc na bílé má jen 1,61:1. Nejsvětlejší neutrální šedá, která projde, je #949494 (3,03:1).

Jak opravit tlačítka v barvě značky?

Bílý text na oranžovém, žlutém nebo světle zeleném tlačítku je klasika e‑shopů a často neprojde.

Špatně – bílá na #ff6b00 má kontrast 2,86:1:

.btn {
  background: #ff6b00;
  color: #ffffff;
}

Správně – tmavší odstín (5,18:1), nebo černý text na původní oranžové (7,36:1):

.btn {
  background: #c2410c;
  color: #ffffff;
}
/* nebo */
.btn {
  background: #ff6b00;
  color: #000000;
}

Barvu značky nemusíte zahodit. Často stačí použít její tmavší odstín jen pro tlačítka a text a původní barvu nechat na plochy bez textu. Zkontrolujte i stav při najetí myší (:hover) a při ovládání klávesnicí (:focus). Tam se kontrast často zhorší.

Jak na to ve WordPressu, Shoptetu nebo Webnode?

Barvy bývají v nastavení vzhledu šablony nebo v jejím CSS. Když šablona umožňuje přidat vlastní CSS, stačí přepsat barvu u konkrétních tříd. Ve WordPressu dělejte úpravy kódu v podřízené šabloně (child theme), aby je nepřepsala aktualizace. Na hostovaných platformách záleží na šabloně a tarifu, jestli vlastní CSS jde. Když ne, zbývá vybrat jinou barevnou variantu šablony nebo se obrátit na podporu.

Týká se to zákona o přístupnosti?

Kritéria 1.4.3 a 1.4.11 patří do úrovně AA pravidel WCAG 2.1, podle kterých se přístupnost webů v praxi posuzuje. Pokud se na vás zákon č. 424/2023 Sb. vztahuje, týkají se i vás. Jestli se vás týká, vysvětluje článek Týká se zákon o přístupnosti i mého webu?

Kdy to zvládnete sami a kdy se vyplatí pomoc?

Sami zvládnete šedé texty, placeholder a okraje polí: jde o pár řádků CSS a výsledek hned změříte.

Pomoc se vyplatí, když se chyba týká barev značky (tlačítka, odkazy, bannery) a je potřeba najít odstíny, které projdou a budou pořád vypadat jako vy, nebo když chcete projít celý web včetně stavů tlačítek a textu přes fotky. Opravy děláme za 890 Kč / hod., u větších pevnou cenu řekneme předem. Audit webu za 7 900 Kč kontrast změří ve skutečném prohlížeči a projde i místa, která automatický test nezvládne. Nejsme plátci DPH, ceny jsou konečné.

Další návody: Jak opravit tlačítko nebo odkaz bez názvu a Jak opravit pole formuláře bez popisku.