Contrast Ratio
Contrast Ratio zdarma spočítá kontrast mezi barvou textu a pozadím podle pravidel přístupnosti WCAG a poradí si i s poloprůhlednými barvami.
Ověřeno 18. 10. 2026 · Připravil Ruslan Skopal
Contrast Ratio v kostce
- Co to je
- Webový nástroj, který spočítá poměr kontrastu mezi barvou textu a pozadím podle WCAG (mezinárodní pravidla přístupnosti webu).
- Vhodné pro
- Každý, kdo ladí barvy textu, tlačítek a štítků v šabloně e-shopu
- Cena
- Zdarma, ceník ani limity výrobce neuvádí.
- Rozsah čísla
- Poměr kontrastu podle WCAG vychází od 1:1 do 21:1. Čím vyšší číslo, tím čitelnější text.
- Hranice WCAG
- Základní úroveň AA: běžný text 4,5:1, velký text 3:1. Přísnější úroveň AAA: běžný text 7:1, velký 4,5:1.
- Barva výsledku
- Červená pod 3:1, oranžová od 3:1 do 4,5:1, zelená od 4,5:1.
- Průhlednost
- Počítá i s poloprůhlednými barvami textu i pozadí.
- Kapátko
- Kapátko výrobce na stránce neuvádí. Barvy zadáš kódem nebo výběrem barvy v prohlížeči. Barvu přímo z webu nabereš pohodlněji v Color.review.
- Náročnost nasazení
- Zvládneš sám, nic se neinstaluje, jen zadáš dvě barvy
- Čeština a podpora
- Rozhraní jen anglicky
Co to je a co umí
Contrast Ratio porovná dvě barvy, třeba šedý text a bílé pozadí, a ukáže poměr kontrastu podle WCAG (Web Content Accessibility Guidelines, mezinárodní pravidla přístupnosti webu). K tomu napíše, jestli kombinace projde úrovní AA, nebo přísnější AAA. Nástroj vytvořila Lea Verou. Dnes běží na webu americké marketingové agentury Siege Media a původní adresa contrast-ratio.com na něj přesměrovává. Kód je veřejný na GitHubu pod licencí MIT. Na e-shopu jde podle mě o peníze: když zákazník nepřečte cenu, dostupnost nebo text na tlačítku, těžko nakoupí.
- Poměr kontrastu dvou barev, přepočítává se už během psaní a výsledek se obarví červeně, oranžově, nebo zeleně
- Hodnocení podle WCAG 2.0 a 2.1: úrovně AA a AAA pro běžný a velký text a úroveň AA pro prvky rozhraní a grafiku (od 3:1)
- Barvu zadáš jakýmkoli zápisem z CSS (jazyk, kterým se popisuje vzhled webu): název (white), hex kód (třeba #FFFFFF, znak # doplní sám), rgb() nebo hsl(), i s průhledností
- U poloprůhledného textu spočítá přesné číslo proti pozadí pod ním, u poloprůhledného pozadí ukáže rozmezí
- Přesný poměr na čtyři desetinná místa a relativní jas (luminance) obou barev
- Tlačítko Swap colors prohodí barvu textu a pozadí
- Šipkami nahoru a dolů zvyšuješ a snižuješ čísla v zápisu barvy, třeba v rgb()
- Zadané barvy se propíšou do adresy stránky, takže výsledek pošleš odkazem
Jak začít krok za krokem
- 1Otevři siegemedia.com/contrast-ratio.
- 2Do pole Background napiš barvu pozadí, do pole Text color barvu textu, třeba #FFFFFF a #293845.
- 3Číslo se přepočítá během psaní. Pod ním si přečti, kterou úrovní WCAG kombinace prošla. Míř aspoň na 4,5:1, já mířím na 5:1.
- 4U poloprůhledného pozadí počítej s nižším číslem z rozmezí.
- 5Když kombinace neprojde, šipkami nahoru a dolů v zápisu rgb() nebo hsl() ztmav nebo zesvětli barvu a sleduj, kdy výsledek zezelená.
- 6Hotovou kombinaci pošli programátorovi nebo grafikovi odkazem z adresního řádku.
Pro koho se hodí
Pro každého, kdo na e-shopu mění barvy: majitel, grafik, programátor i marketér. Hodí se hlavně tam, kde barvu máš jako kód, třeba z nastavení šablony nebo od grafika. Poslouží i u prvků s průhledností, třeba u lišt a štítků přes fotku nebo u pop-upů s poloprůhledným pozadím.
Pro koho spíš ne
Nenahradí audit přístupnosti, měří jen dvojici barev. Když chceš barvu nabrat přímo z webu kapátkem, sáhni po Color.review. Na kontrolu kontrastu všech textů stránky najednou je WAVE.
Kdy to nasadit
Sáhni po něm, když ti Lighthouse (audit stránky v nástrojích pro vývojáře v Chrome) hlásí nízký kontrast, když měníš barvy šablony, tlačítek nebo štítků, nebo když chystáš lištu či pop-up s poloprůhledným pozadím.
Cena
Zdarma. Výrobce ho v popisu stránky označuje jako bezplatný nástroj (free interactive tool), ceník ani limity neuvádí. Používá se rovnou na webu, nic se neinstaluje.
- Web: zdarmaCeník ani limity výrobce neuvádí.
Ceník ověřen 18. 10. 2026, aktuální ceny u výrobce
Integrace a napojení
S e-shopovou platformou se nepropojuje a není to potřeba. Nástroj běží v prohlížeči a zadáváš do něj jen barvy, třeba z nastavení šablony nebo od grafika. Na Shoptetu kontroluj hlavně barvy, které nastavuješ sám: Návrhář šablon, barvy dostupností, příznaků produktů a příznaků slev. Shoptet podle nápovědy upravuje platformu podle WCAG 2.1 a barvy, které v administraci měnit nejde, hlídá sám. Upgates podle nápovědy ručí za funkce šablon podle WCAG 2.1, texty a barvy nechává na tobě, stejně jako úpravy v Editoru kódu.
Na co si dát pozor
- Stránka hodnotí podle WCAG 2.0 a 2.1. Hranice pro běžný text (4,5:1) je ve WCAG 2.2 stejná.
- Zákon č. 424/2023 Sb. o přístupnosti platí od 28. 6. 2025 i pro e-shopy, které prodávají spotřebitelům. Netýká se mikropodniků, tedy firem s méně než 10 lidmi a ročním obratem nebo bilanční sumou do 2 mil. EUR. Číslo kontrastu zákon neuvádí, odkazuje na harmonizované normy (společné technické normy EU). Právní posouzení tady neřeším, rozsah povinností konzultuj s právníkem.
Srovnání s alternativami
- Contrast RatioTento nástroj
- Cena
- Zdarma
- Kapátko
- Jen výběr barvy v prohlížeči
- Co umí navíc
- Poloprůhledné barvy i u pozadí (rozmezí), odkaz na výsledek
- Cena
- Zdarma, bez registrace
- Kapátko
- Ano, na počítači v Chrome, Edge a Opeře
- Co umí navíc
- Odkaz na výsledek, AA a AAA zvlášť pro text a nadpisy
- WebAIM Contrast Checker
- Cena
- Výrobce cenu neuvádí, používá se rovnou na webu
- Kapátko
- Výběr barvy v prohlížeči, výrobce ho uvádí jako kapátko
- Co umí navíc
- Posuvník světlosti, API
- Chrome DevTools
- Cena
- Součást prohlížeče Chrome
- Kapátko
- Měří přímo prvek na stránce
- Co umí navíc
- Návrh vyhovující barvy, přehled celé stránky, audit Lighthouse
- WAVE
- Cena
- Online a rozšíření, cenu výrobce neuvádí. API od minimálního nákupu kreditů 10 USD
- Kapátko
- Není potřeba, kontroluje celou stránku
- Co umí navíc
- Kontrast všech textů najednou, další chyby přístupnosti
- Colour Contrast Analyser
- Cena
- Zdarma, aplikace pro Windows a Mac
- Kapátko
- Ano, kdekoli na obrazovce
- Co umí navíc
- Simulátor vad zraku, měří i PDF a grafiku
Ceny a limity z ceníků výrobců, ověřeno 18. 10. 2026.
Alternativy a v čem se liší
- Color.review →
Taky zdarma a taky dvojice barev, ale s kapátkem, kterým barvu nabereš přímo z webu (na počítači v Chrome, Edge a Opeře). Sám měřím v Color.review.
- WebAIM Contrast Checker
Průhlednost umí jen u barvy textu, pozadí zadáš bez ní. Navíc posuvník světlosti a jednoduché API (napojení pro programátory). Doporučuje ho nápověda Shoptetu.
- Chrome DevTools
Nástroje pro vývojáře přímo v Chrome. Ukážou kontrast prvku na stránce, navrhnou vyhovující barvu a v přehledu CSS Overview vypíšou problémy s kontrastem celé stránky.
- WAVE
Nekontroluje jednu dvojici barev, ale celou stránku: kontrast všech textů najednou a další chyby přístupnosti. Online i jako rozšíření do Chrome, Firefoxu a Edge, placené je API (minimální nákup kreditů 10 USD) a další služby.
- Colour Contrast Analyser
Bezplatná aplikace pro Windows a Mac. Kapátko funguje kdekoli na obrazovce, i v PDF nebo grafice, a umí simulovat osm typů vad zraku.
Časté otázky
Je Contrast Ratio opravdu zdarma?
Ano. Výrobce ho označuje jako bezplatný nástroj a ceník ani limity neuvádí. Používá se rovnou na webu.
Jaký kontrast je dost?
Základní úroveň AA: běžný text 4,5:1, velký text 3:1. Přísnější úroveň AAA: běžný text 7:1, velký 4,5:1. Já mířím na 5:1.
Co vlastně znamená číslo kontrastu?
Je to poměr relativního jasu světlejší a tmavší barvy podle vzorce z WCAG. Vychází od 1:1 do 21:1 a čím je vyšší, tím líp se text čte.
Co se počítá jako velký text?
Text od 18 bodů (asi 24 px), nebo od 14 bodů tučně (asi 18,7 px).
Jak změřím poloprůhlednou barvu?
Zapiš ji i s průhledností, třeba rgba(0, 0, 0, 0.6) nebo #00000099. U poloprůhledného textu dostaneš přesné číslo, u poloprůhledného pozadí rozmezí.
Proč mi Lighthouse hlásí nízký kontrast?
Některý text na stránce nemá proti pozadí dost kontrastu. Výrobce Contrast Ratio radí upravit v jeho nástroji barvu textu a pozadí tak, aby kombinace prošla.
Má Contrast Ratio kapátko?
Výrobce ho na stránce neuvádí. Barvu zadáš kódem nebo výběrem barvy v prohlížeči. Kapátko, které barvu nabere přímo z webu, má Color.review.
Jak pošlu změřené barvy programátorovi?
Po zadání barev se obě propíšou do adresy stránky. Stačí poslat odkaz z adresního řádku.
Jak zkontroluju kontrast celé stránky najednou?
Contrast Ratio měří vždy jednu dvojici barev. Celou stránku najednou projde rozšíření WAVE do prohlížeče, nebo nástroje pro vývojáře v Chromu (CSS Overview a Lighthouse).
Nevíš, jestli je tenhle nástroj pro tebe?
Nástroj je jen nástroj. V programu ESHOP BOOSTER spolu projdeme, které nástroje se tvému e-shopu vyplatí, kde ušetříš a kde platíš zbytečně.
Zdroje
- Contrast Ratio: stránka nástroje a FAQ výrobce
- GitHub: zdrojový kód Contrast Ratio (licence MIT)
- W3C: WCAG 2.2, definice poměru kontrastu
- W3C: WCAG 2.2, kontrast textu (1.4.3)
- Zákon č. 424/2023 Sb., o požadavcích na přístupnost některých výrobků a služeb
- Nařízení Komise (EU) č. 651/2014: definice mikropodniku (příloha I)
- Nápověda Shoptetu: Přístupnost
- Nápověda Upgates: Přístupnost
Kam dál?
Tohle by tě mohlo také zajímat.
Reálné výsledky klientů
Po 8 měsících spolupráce jsme dokázali zvýšit marži po marketingových nákladech o 53 % a konverzní poměr o 64 %.
Pavel Ronovsky · Majitel, Fanda-NHL.cz
Po 3 měsících spolupráce jsme zvýšili meziroční růst obratu o 95 %. Díky přetendrování cen přepravy jsme snížili roční náklad na přepravu o 2,3 mil. Kč. Díky načerpání know-how jsme firmu posunuli minimálně o 2 roky.
Karol Piry · Majitel, SpinKids.cz
Po 5 měsících spolupráce se optimalizací marketingových nákladů zvýšil zisk o 59 %. Meziročně jsme díky zavedení marketingového plánu realizovali okamžitý růst o 37 %.
Nicole Váchová · Majitelka, francobene.cz
Co říkají klienti
„Spolupráce s Ruslanem mi přinesla především komplexní nadhled nad podnikáním z pohledu manažera malé firmy. Pomohl mi lépe si stanovovat priority a soustředit se na to, co má pro firmu…“Číst celé →
„Mentoring s Ruslanem mi pomohl dívat se na e-commerce strategičtěji a hlavně více datově. Dokáže velmi rychle pochopit podstatu problému, oddělit důležité věci od zbytečného šumu a zaměřit…“Číst celé →
„Senzační věc na ESHOP BOOSTERu je, že vytváří komunitu nadšených e-shopařů a je schopný na jedné platformě sloučit, začínající e-shopaře s lidmi, kteří se v e-commerce byznysu pohybují…“Číst celé →
Ruslan Skopal
Jsem ex-CEO a spoluzakladatel Trenýrkárna.cz, kterou jsem za 17 let dostal z nuly na tržby atakující 300 mil. Kč. Spoluzaložil jsem polygrafickou agenturu Tisk Kvalitně a digitální agenturu PromoGEN. Dnes předávám své know-how dalším e-shopařům v projektu ESHOP BOOSTER, který jsem založil s Danem Višňákem. Jsem také spoluzakladatelem projektu PodporujiČesko.cz, Skopea Labs a investorem v naBOSo.cz.