Zkontroluj kontrast barev a čitelnost textu podle WCAG

Poslední revize obsahu:2026-09-30

Zadej barvu textu a pozadí a nástroj ukáže, zda je kontrast dostatečný. Výpočty jsou založeny na mezinárodním standardu přístupnosti WCAG 2.1.

Kontrastní poměr

21.00 : 1

Běžný text

AA (min. 4,5:1)AAA (min. 7:1)

Ukázkový text kontrastu WCAG 2.1

Velký / tučný text

AA (min. 3:1)AAA (min. 4,5:1)

Ukázkový text kontrastu WCAG 2.1

Ikona

AA (min. 3:1)

Proč je čitelnost barev důležitá?

Čitelnost je rozdíl jasu mezi barvou textu a barvou pozadí. Čím větší rozdíl, tím snáze se text čte. Příliš nízký kontrast ztěžuje čtení obsahu – zejména pro osoby se zrakovým postižením, starší lidi nebo v obtížných světelných podmínkách.

Podle Světové zdravotnické organizace (WHO) má přibližně 2,2 miliardy lidí na světě nějakou formu zrakového postižení.

Nástroj vypočítá poměr kontrastu pomocí vzorce definovaného v WCAG 2.1 – mezinárodních pokynech pro digitální přístupnost.

Jak použít kontrolu kontrastu barev

Kontrola čitelnosti zabere jen pár sekund:

1. Zadej barvu textu
Zadej kód barvy ve formátu HEX, RGB nebo HSL – nebo vyber barvu ve výběru barvy vedle pole.
2. Zadej barvu pozadí
Zadej barvu pozadí, na kterém bude text zobrazen.
3. Přečti si výsledky
Nástroj vypočítá poměr kontrastu a ukáže, zda barvy splňují požadavky WCAG pro běžný text, velký text a ikony.
4. Uprav barvy
Pokud je kontrast příliš nízký, tlačítko Přizpůsobit automaticky navrhne variantu barvy, která splňuje zvolený práh.

Jaké formáty barev jsou podporovány?

HEX

Hexadecimální formát – zápis z CSS a grafických programů. Kód má 3 nebo 6 znaků (číslice 0-9 a písmena A-F), případně 4 nebo 8, když poslední znaky udávají průhlednost. Znak # lze vynechat, takže funguje i kód zkopírovaný bez něj, například 1B2632.

#fff – bílá (zkrácená forma)
#ffffff – bílá (plná forma)
#1a73e8 – modrá
#00000080 – černá s 50% krytím

RGB / RGBA

Formát založený na třech kanálech: červená (Red), zelená (Green), modrá (Blue). Každý kanál přijímá hodnotu od 0 do 255. Varianta RGBA přidává čtvrtý parametr – průhlednost (alpha) od 0 do 1.

rgb(255, 255, 255) – bílá
rgba(0, 0, 0, 0.8) – černá s 80% krytím

HSL / HSLA

Formát založený na odstínu (Hue, 0-360°), sytosti (Saturation, 0-100%) a světlosti (Lightness, 0-100%). Varianta HSLA přidává průhlednost. Tento formát je užitečný, když chceš upravit světlost nebo sytost barvy.

hsl(0, 0%, 100%) – bílá
hsla(217, 91%, 60%, 0.9) – modrá s 90% krytím

Jak interpretovat výsledky testu čitelnosti

Po zadání barev nástroj zobrazí výsledky ve třech sekcích:

Běžný text – vyžaduje kontrast 4.5:1 (AA) nebo 7:1 (AAA). Platí pro text pod 18pt (24px) nebo pod 14pt bold.
Velký text / bold – vyžaduje kontrast 3:1 (AA) nebo 4.5:1 (AAA). Platí pro text od 18pt (24px) nebo tučný text od 14pt (18.5px), například velké nadpisy.
Ikony – vyžaduje kontrast 3:1 (AA). Platí pro ikony a grafické UI prvky nesoucí informaci.

Zelený indikátor znamená splnění požadavku. Červený indikátor znamená příliš nízký kontrast, který je třeba opravit.

Co znamenají výsledky testu čitelnosti?

Nástroj ukazuje poměr kontrastu na stupnici od 1:1 (žádný kontrast) do 21:1 (maximální kontrast – černý text na bílém pozadí). Výsledek se porovnává s prahy stanovenými standardem WCAG:

Běžný text – vyžaduje kontrast alespoň 4.5:1 pro úroveň AA (minimální standard) nebo 7:1 pro úroveň AAA (rozšířený standard). Platí pro text menší než 18pt (24px) nebo menší než 14pt (18.5px) tučný.
Velký text / tučný – vyžaduje kontrast alespoň 3:1 pro úroveň AA nebo 4.5:1 pro úroveň AAA. Platí pro text od 18pt (24px) nebo od 14pt (18.5px) tučný – například velké nadpisy.
Ikony a grafické prvky – vyžadují kontrast alespoň 3:1 pro úroveň AA. Platí pro ikony, tlačítka, pole formulářů a další UI prvky nesoucí informaci.

Úroveň AA je úroveň, na kterou odkazuje řada zásad přístupnosti veřejných institucí, proto je dobrým výchozím bodem. Úroveň AAA zajišťuje lepší čitelnost, ale ne vždy je prakticky dosažitelná pro všechny prvky.

Automatické přizpůsobení barvy požadavkům WCAG

Pokud je kontrast příliš nízký, není nutné hledat správnou barvu metodou pokusů a omylů. Tlačítko Přizpůsobit automaticky najde variantu barvy textu, která splňuje zvolený práh kontrastu.

Jak přizpůsobení funguje:

Vyber cíl přizpůsobení ze seznamu – např. AA pro běžný text nebo AAA pro velký text.
Klikni na tlačítko Přizpůsobit.
Nástroj prohledá varianty jasu barvy textu a navrhne nejbližší splňující požadavky.
Navržený kód barvy lze zkopírovat do schránky nebo přímo nastavit jako novou barvu textu.

Algoritmus zachovává odstín a sytost původní barvy a mění pouze jas. Navržená barva tak zůstává v souladu s vizuální identitou a zároveň splňuje standard přístupnosti.

Co znamenají úrovně AA a AAA ve standardu WCAG?

	Úroveň AA (minimum)	Úroveň AAA (rozšířená)
Běžný text – min. 4.5:1	✓	✓
Běžný text – min. 7:1	—	✓
Velký text / bold – min. 3:1	✓	✓
Velký text / bold – min. 4.5:1	—	✓
Ikony a UI prvky – min. 3:1	✓	✓
Doporučeno pro hlavní obsah	✓	✓

Které zápisy barvy tento nástroj zvládne?

Vlož barvu tak, jak ji máš: kód s křížkem i bez něj, celý řádek ze stylopisu, konstantu z kódu pro Android, název z CSS nebo jen tři čísla. Nástroj si každý z těchto zápisů přečte sám. Prostřední sloupec ukazuje přečtenou barvu, další její kontrast na bílém pozadí — obojí spočítal nástroj.

Co zadáš	Jak nástroj barvu přečte	Kontrast na bílé	Jak to čteme
1B2632	rgb(27, 38, 50)	15.33:1	Křížek není potřeba, kód bez něj čteme stejně
color: #1B2632;	rgb(27, 38, 50)	15.33:1	Vlož celý řádek ze stylopisu nebo z nástrojů prohlížeče, barvu z něj vytáhneme sami
#00000080	rgba(0, 0, 0, 0.502)	4.00:1	V osmiznakovém kódu stojí krytí v posledních dvou znacích a počítáme s ním i v kontrastu
0x80000000	rgba(0, 0, 0, 0.502)	4.00:1	V konstantě z kódu pro Android nebo Kotlin stojí krytí v prvních dvou znacích a právě tam ho hledáme
rgb(59 130 246 / 50%)	rgba(59, 130, 246, 0.5)	1.84:1	Novější zápis CSS s mezerami a krytím za lomítkem přijímáme beze změny
rgba(0, 0, 0, 0,5)	rgba(0, 0, 0, 0.5)	3.98:1	Krytí zapsané s desetinnou čárkou funguje stejně jako s tečkou
rgba(0, 0, 0, .5)	rgba(0, 0, 0, 0.5)	3.98:1	Nulu před tečkou můžeš vynechat — zápis .5 pro nás znamená totéž co 0.5
59, 130, 246	rgb(59, 130, 246)	3.68:1	Tři čísla bez rgb() stačí, zbytek zápisu si doplníme sami
RGB(59,130,246)	rgb(59, 130, 246)	3.68:1	Velká písmena v názvu funkce a chybějící mezery za čárkami nevadí
rgb(300, 0, 0)	rgb(255, 0, 0)	4.00:1	Kanál nad 255 omezíme na 255, stejně jako to dělá prohlížeč
hsl(217 91% 60%)	rgb(60, 131, 246)	3.63:1	Zápis HSL, s čárkami nebo s mezerami, převedeme na RGB sami
navy	rgb(0, 0, 128)	16.01:1	Známe všech 148 názvů barev z CSS, takže stačí napsat samotné slovo
transparent	rgba(0, 0, 0, 0)	1.00:1	Zcela průhledný text dává kontrast 1:1 na jakémkoli pozadí a tak ho i uvádíme

Poloprůhledný text nástroj před výpočtem položí na pozadí a poloprůhledné pozadí na bílou.

Řešení problémů s testerem kontrastu barev

Vidím chybovou zprávu o formátu barvy

Zkontroluj formát barvy. HEX kód má 3, 4, 6 nebo 8 znaků, se znakem # nebo bez něj (např. #fff nebo 1B2632). Hodnoty RGB a HSL piš do rgb() nebo hsl(), oddělené čárkami nebo mezerami. Fungují i názvy barev z CSS, například navy.

Tlačítko Přizpůsobit nenachází vhodnou barvu

Když mají pozadí a text podobný jas ve stejném odstínu, algoritmus nemusí najít variantu splňující požadavky bez změny odstínu. V takovém případě zvaž změnu barvy pozadí nebo výběr úplně jiné barvy textu.

Barva ve výběru barvy neodpovídá zadanému kódu

Výběr barvy v prohlížeči podporuje pouze formát HEX bez průhlednosti. Pokud zadáš barvu ve formátu RGBA nebo HSLA s průhledností, výběr barvy zobrazí pouze barevnou složku (bez alpha). Výpočty kontrastu stále zohledňují průhlednost.

Kde stojí za to kontrolovat čitelnost barev?

Čitelnost je důležitá všude tam, kde někdo potřebuje přečíst text nebo rozpoznat prvek rozhraní:

Webové stránky
Text na stránkách, tlačítka, odkazy, formuláře. Obzvláště důležité pro firemní weby, kde mají návštěvníci různý věk a různé zrakové schopnosti.
E-shopy
Ceny, tlačítka Koupit, informace o produktu. Nízká čitelnost může znamenat ztracené objednávky.
Prezentace
Projektor může zobrazit barvy se slabším kontrastem než monitor. Vyplatí se zkontrolovat barvy před prezentací.
Plakáty a letáky
Tištěné materiály prohlížené v různých světelných podmínkách vyžadují vysoký kontrast.
Mobilní aplikace
Telefony se používají na přímém slunci, v noci, lidmi v různém věku.
Jídelní lístky restaurací
Často tištěné na barevném papíře nebo s ozdobnými fonty – snadno vznikne příliš nízký kontrast.

Čitelnost barev pro osoby s poruchou barvocitu

Porucha barvocitu (barvoslepost) je porucha vnímání barev. Červeno-zelená porucha postihuje až 8 % mužů a 0,5 % žen severoevropského původu. Osoby s poruchou barvocitu mohou mít potíže s rozlišením některých párů barev, i když je kontrast jasu dostatečný.

Typy poruchy barvocitu:

Deuteranopie – potíže s rozlišením zelené a červené
Protanopie – potíže s vnímáním červené
Tritanopie – potíže s vnímáním modré a žluté (vzácná)

Tento nástroj kontroluje kontrast jasu, který je důležitý pro všechny uživatele. Při návrhu je však dobré navíc vyhnout se problematickým kombinacím barev (např. červený text na zeleném pozadí) a nespoléhat se výhradně na barvu při předávání informací – používej také tvary, ikony a text.

Čím se tester kontrastu a čitelnosti barev vyznačuje?

Objektivní hodnocení založené na matematickém vzorci
Poměr kontrastu se počítá podle vzorce z pokynů WCAG – výsledek nezávisí na nastavení monitoru ani na individuálním vnímání barev.
Shoda s mezinárodním standardem WCAG
Výsledky odpovídají prahům WCAG 2.1, pokynům W3C, na které odkazuje řada zásad přístupnosti.
Automatické přizpůsobení barvy prahu
Tlačítko Přizpůsobit najde variantu barvy textu splňující zvolený práh kontrastu – zachovává odstín, mění pouze jas.
Pět formátů barev
Podporované formáty: HEX, RGB, RGBA, HSL a HSLA a také názvy barev z CSS. Kód barvy lze vložit přímo z Figmy, Photoshopu nebo CSS stylopisu.
Tři typy obsahu v jednom testu
Jedno ověření ukazuje výsledek pro běžný text, velký text (například velké nadpisy) a ikony – není třeba testovat každý typ zvlášť.
Živý náhled textu
Změna barvy textu nebo pozadí okamžitě aktualizuje náhled – vidíš, jak text vypadá na zvoleném pozadí, ještě před nasazením.

Poslední revize obsahu: 30. září 2026 · napsal a zkontroloval tým Arteon

Často kladené otázky o kontrole kontrastu barev

Co je poměr kontrastu barev?

Poměr kontrastu je míra rozdílu jasu mezi dvěma barvami. Škála začíná od 1:1 (žádný rozdíl) do 21:1 (maximální rozdíl – černý text na bílém pozadí). Čím vyšší poměr, tím snáze se text odlišuje od pozadí.

Jaký kontrast je dostatečný podle WCAG?

Pro běžný text je minimum 4.5:1 (Úroveň AA). Pro velký text – nadpisy od 18pt nebo bold text od 14pt – stačí 3:1. Pro ikony a UI komponenty je také vyžadován poměr 3:1.

Proč moje barvy nesplňují požadavky, i když je vidím dobře?

Osobní vnímání barev závisí na nastavení monitoru, osvětlení místnosti a individuálních zrakových schopnostech. WCAG je založeno na objektivním matematickém vzorci, který zohledňuje různé zrakové postižení.

Musím splnit úroveň kontrastu AAA?

Ne vždy. Na úroveň AA (4.5:1 pro běžný text) odkazuje řada zásad přístupnosti veřejných institucí. Úroveň AAA (7:1) poskytuje lepší čitelnost, ale je obtížnější ji dosáhnout. Pro kritický obsah – varování, bezpečnostní pokyny – zvaž dosažení AAA.

Co je standard WCAG?

WCAG (Web Content Accessibility Guidelines) je mezinárodní soubor pokynů pro přístupnost webu vyvinutý organizací W3C. Definuje mimo jiné minimální kontrastní hodnoty, strukturu nadpisů a podporu klávesnice.

Jak zjistím barvy použité na své webové stránce?

V prohlížeči (Chrome, Firefox, Edge) otevři vývojářské nástroje (pravým kliknutím > Prozkoumat). Na kartě Styly vidíš barvy použité na stránce. Rozšíření jako ColorZilla umožňují vybrat barvu libovolného prvku bez otevírání kódu.

Funguje tento nástroj pro tmavý režim?

Ano. Nástroj kontroluje kontrastní poměr mezi libovolnými dvěma barvami bez ohledu na to, která je světlejší. Pro tmavý režim zadej světlou barvu textu a tmavé pozadí. Platí stejné prahy WCAG - 4,5:1 pro běžný text (AA) a 7:1 (AAA).

Jaký je rozdíl mezi WCAG 2.0, 2.1 a 2.2?

WCAG 2.0 (2008) zavedlo původní požadavky na kontrast. WCAG 2.1 (2018) přidalo kritéria pro mobilní přístupnost a zhoršené vidění. WCAG 2.2 (2023) přidává další kritéria, ale nemění prahy kontrastního poměru. Požadavky na kontrast (1.4.3 a 1.4.6) zůstávají stejné ve všech verzích.

Proč osmiznakový kód z Androidu dává špatný výsledek?

V CSS udávají poslední dva znaky osmiznakového kódu průhlednost (#RRGGBBAA). Android zapisuje barvy ve formátu ARGB (#AARRGGBB), s průhledností v prvních dvou znacích. Nástroj čte pořadí CSS: černá s 50% krytím zapsaná pro Android, #80000000, se přečte jako zcela průhledná barva a dá 1,00:1, zatímco #00000080 dá 4,00:1. Před kontrolou přesuň první dva znaky na konec. Konstantu zapsanou s 0x, například 0x80000000, nástroj čte v pořadí Androidu.