Kontrast barev (WCAG)
Zkontrolujte kontrastní poměr textu a pozadí podle standardu WCAG. Nástroj spočítá relativní jas obou barev a z nich kontrastní poměr, který porovná s hranicemi pro úroveň AA a AAA u běžného textu. Vše počítá přímo prohlížeč – barvy nikam neodesíláte.
Jak kontrast barev funguje
Kalkulačka vychází přímo ze vzorce WCAG 2.1 pro relativní jas (relative luminance). Z HEX barvy nejdřív spočítá lineární hodnoty R, G, B (s korekcí gama pro hodnoty pod a nad prahem 0,03928) a poté je zkombinuje váhami 0,2126 / 0,7152 / 0,0722 – lidské oko je totiž nejcitlivější na zelenou složku a nejméně na modrou. Z relativního jasu světlejší (L1) a tmavší (L2) barvy se pak spočítá kontrastní poměr podle vzorce (L1 + 0,05) / (L2 + 0,05). Výsledek je číslo od 1:1 (barvy jsou stejné, žádný kontrast) do 21:1 (čistě černá na čistě bílé, maximální kontrast).
Nástroj poté poměr porovná s hranicemi WCAG pro běžný text: 4,5:1 pro úroveň AA a 7:1 pro přísnější úroveň AAA. Vstupy jsou dvě barevná pole (text a pozadí), výstupem je číselný poměr, dva výsledky splňuje/nesplňuje a živý náhled textu v daných barvách.
Jak kontrast barev použít
- V poli „Barva textu" vyberte nebo zadejte HEX kód barvy písma.
- V poli „Barva pozadí" vyberte barvu podkladu, na kterém text stojí.
- Nástroj okamžitě přepočítá kontrastní poměr a zobrazí, zda splňuje AA a AAA.
- V náhledu pod poli uvidíte, jak kombinace vypadá v praxi.
| Text | Pozadí | Poměr | AA | AAA |
|---|---|---|---|---|
| #555555 | #ffffff | 7,46:1 | splňuje | splňuje |
| #777777 | #ffffff | 4,48:1 | nesplňuje | nesplňuje |
| #ffffff | #2563eb | 5,17:1 | splňuje | nesplňuje |
Poznámka: WCAG pro velký text (od 18 bodů, resp. 14 bodů tučně) povoluje mírnější hranice 3:1 (AA) a 4,5:1 (AAA) – tato kalkulačka počítá s hranicemi pro běžný (menší) text, což je přísnější a bezpečnější varianta pro obecné použití.
K čemu se kontrast barev hodí
Nejčastěji se hodí při návrhu webů a aplikací – ověříte, jestli barva textu na tlačítku, v navigaci nebo v patičce zůstane čitelná pro lidi se sníženou zrakovou ostrostí nebo barvoslepostí. Používají ho tvůrci designových systémů při definici barevné palety, vývojáři při kontrole komponent před nasazením i lidé, kteří připravují prezentace či tiskoviny s barevným pozadím. Splnění úrovně AA je běžným požadavkem u auditů přístupnosti a některé firmy nebo veřejné instituce jej vyžadují ze zákona (např. u webů veřejné správy). Protože se vše počítá přímo v prohlížeči na vašem zařízení, žádná barva ani kontext webu se nikam neodesílá.
Časté dotazy
Co znamená kontrastní poměr 4,5:1?
Je to minimální hranice pro úroveň AA u běžného textu podle WCAG 2.1. Znamená to, že světlejší barva má být zhruba 4,5× jasnější než tmavší, aby byl text dostatečně čitelný pro většinu uživatelů včetně lidí se slabším zrakem.
Jaký je rozdíl mezi AA a AAA?
AA je standardní úroveň přístupnosti (poměr 4,5:1 pro běžný text), AAA je přísnější úroveň (poměr 7:1) doporučená pro obsah, kde je čitelnost obzvlášť důležitá. Většina webů a legislativních požadavků se řídí úrovní AA.
Platí stejné hranice i pro velký text?
Ne. WCAG povoluje pro velký text (od 18 bodů nebo 14 bodů tučně) nižší hranice – 3:1 pro AA a 4,5:1 pro AAA, protože větší písmena jsou čitelná i s nižším kontrastem. Tato kalkulačka počítá s přísnějšími hranicemi pro běžný text.
Odesílají se zadané barvy někam na server?
Ne. Celý výpočet relativního jasu a kontrastního poměru probíhá přímo ve vašem prohlížeči pomocí JavaScriptu. Žádná barva ani jiná data se nikam neposílají.
Proč se poměr počítá jinak než prostý rozdíl jasů?
Lidské vnímání jasu není lineární a formule WCAG to zohledňuje gama korekcí a váhováním barevných složek podle citlivosti oka. Prostý rozdíl RGB hodnot by přesně neodpovídal tomu, jak kontrast vnímáme.
Co dělat, když kombinace nesplňuje ani AA?
Zkuste tmavší nebo světlejší variantu jedné z barev – i malá úprava odstínu často stačí k překročení hranice 4,5:1. Nástroj přepočítává v reálném čase, takže efekt úpravy uvidíte okamžitě.
Funguje kalkulačka i pro barvy zadané jako RGB nebo HSL?
Vstupní pole používá standardní výběr barvy prohlížeče, který barvu interně převádí na HEX formát. Pokud máte barvu v jiném zápisu, převeďte ji nejdřív např. nástrojem Převodník barev.
Má kontrast vliv jen na text, nebo i na jiné prvky?
WCAG definuje samostatná pravidla i pro netextové prvky (ikony, okraje formulářových polí) s nižší hranicí 3:1. Tato kalkulačka je určená primárně pro textový kontrast text/pozadí.
Zdroje a standardy
📅 Naposledy aktualizováno: 28. 7. 2026