Color.review
Color.review zdarma změří kontrast textu a pozadí, takže hned víš, jestli barvy splňují pravidla přístupnosti WCAG.
Ověřeno 18. 10. 2026 · Připravil Ruslan Skopal
Color.review v kostce
- Co to je
- Webový nástroj, který spočítá kontrast mezi barvou textu a pozadím podle WCAG (mezinárodní pravidla přístupnosti webu).
- Vhodné pro
- Každý e-shop, který mění barvy webu, tlačítek, bannerů nebo pop-upů
- Cena
- Zdarma, bez registrace a bez ceníku.
- Minimum
- Aspoň 4,5:1 pro běžný text podle WCAG, úrovně AA a AAA rozepisuje stránka Contrast Ratio.
- Na co mířím já
- Kontrast kolem 5:1, tedy kousek nad minimem úrovně AA.
- Kapátko
- Barvu nabereš přímo z webu, na počítači v Chrome, Edge nebo Opeře (podle přehledu podpory prohlížečů na MDN, dokumentaci webových technologií od Mozilly).
- Sdílení
- Výsledek pošleš odkazem, třeba color.review/check/293845-FFFFFF.
- Zákon
- Od 28. 6. 2025 platí zákon o přístupnosti i pro e-shopy prodávající spotřebitelům. Mikropodniky se netýká.
- Náročnost nasazení
- Zvládneš sám za minutu, nic se neinstaluje
- Čeština a podpora
- Rozhraní jen anglicky
Co to je a co umí
Color.review porovná dvě barvy, třeba šedý text a bílé pozadí, a ukáže poměr kontrastu. K tomu napíše, jestli běžný a velký text (třeba nadpisy) projdou úrovní AA a přísnější AAA podle WCAG (Web Content Accessibility Guidelines, mezinárodní pravidla přístupnosti webu). Na e-shopu jde podle mě o peníze: když zákazník nepřečte cenu, dostupnost, dopravu nebo text na tlačítku, těžko nakoupí. Slabý kontrast trápí hlavně lidi s horším zrakem nebo s dioptriemi.
- Poměr kontrastu dvou barev a hodnocení AA a AAA zvlášť pro běžný a velký text (třeba nadpisy)
- Velký text podle stránky: od 18 bodů (asi 24 px), nebo od 14 bodů tučně (asi 18,7 px)
- Kapátko na výběr barvy přímo z obrazovky, na počítači v Chrome, Edge a Opeře
- Zadání barev jako hex kód (třeba #FFFFFF), RGB, HSL, CMYK nebo CSS
- Tlačítko Flip prohodí barvu textu a pozadí
- Přímý odkaz na výsledek ve tvaru color.review/check/barva-barva, který pošleš programátorovi nebo grafikovi
„Takže Color Review, děcka, zadarmo věc, bomba věc. A každý den ji minimálně pětkrát používám s klientama.“
Jak s tím pracuju v praxi
Jak měřím kontrast
- 1Otevřu color.review na druhé obrazovce vedle e-shopu.
- 2Kapátkem u Background (pozadí) naberu barvu pozadí, kapátkem u Foreground (popředí) barvu textu. Dělám to vždycky přes kapátko.
- 3Nástroj ukáže číslo a u běžného i velkého textu, jestli projdou (pass), nebo neprojdou (fail).
- 4Když neprojdou, zkusím tmavší odstín nebo jinou barvu a měřím znovu.
Na jaké číslo mířím
- Snažím se být někde na pěti.
- Na jednom pop-upu jsem naměřil 1,5. Jeden z nejhorších výsledků, jaké jsem kdy viděl.
- Proti 1,5 je 4,5 mnohem čitelnější, ale ideál to pořád není.
- Když už něco na web dáváš a není to čitelné, tak to tam nedávej vůbec.
Kde to na e-shopech vidím nejčastěji
- Zelený text na bílém pozadí. Na jednom e-shopu vyšlo 2,8 a 3,5. Zelená se na konverzní cestu hodí, jen ji ztmav, nebo zvol jinou barvu.
- Malé písmo. Zelený text ve 14 px neprošel, doporučil jsem 16 px. Velikost písma měřím rozšířením WhatFont.
- Informace o doručení. Na jednom e-shopu měl text s možnostmi doručení kontrast 1,8. Zákazník, který nemá dobré oči nebo má dioptrie, to nevidí, nebo to vidí rozmazaně.
- Dostupnost skladem a termín doručení piš vždycky zeleně. Zelená ale musí mít dost kontrastu.
Kontrast přes AI
- AI se dá na kontrast zeptat, ale s přesným zadáním, aby nemohla uhnout ani fabulovat. Výstup je jen tak dobrý jako vstup.
- Výsledek jsem pak ověřil v Color.review. U růžové barvy z loga mi Color.review ukázal 3,8 a AI napsala 3,87.
- Na celý web: pošli AI asistentovi Claude odkaz na color.review, ať si odtamtud vezme metodiku, projede web a řekne ti, kde kontrast nesedí.
Z MasterMindů ESHOP BOOSTER 9. 12. 2025, 18. 12. 2025, 20. 7. 2026 a 21. 7. 2026 a z konzultace 16. 9. 2026.
Jak začít krok za krokem
- 1Otevři color.review na počítači v Chrome, Edge nebo Opeře, tam funguje kapátko.
- 2Kapátkem u Background (pozadí) naber barvu pozadí na svém webu, kapátkem u Foreground (popředí) barvu textu. Ve Firefoxu nebo Safari barvu zadej ručně, třeba jako hex kód (#FFFFFF).
- 3Přečti číslo a podívej se, jestli běžný i velký text projdou úrovní AA. Míř aspoň na 4,5:1, já mířím na 5.
- 4Když text neprojde, ztmav barvu, zvol jinou, nebo zvětši písmo. Pak měř znovu.
- 5Projdi takhle ceny, štítky dostupnosti, dopravu, texty na tlačítkách, bannery, pop-upy a patičku. Na Shoptetu hlavně barvy z Návrháře šablon, dostupností a příznaků.
- 6Výsledek pošli programátorovi nebo grafikovi odkazem color.review/check/barva-barva.
Pro koho se hodí
Pro každého, kdo na e-shopu mění barvy: majitel, grafik, programátor i marketér. Hodí se na tlačítka, ceny, štítky dostupnosti, bannery, pop-upy a patičku. Použij ho, než změnu pustíš na web, a pak ještě jednou na hotovém webu.
Pro koho spíš ne
Nenahradí audit přístupnosti. Měří jen kontrast dvou barev. Strukturu nadpisů, ovládání klávesnicí ani popisky obrázků nekontroluje, na to je třeba WAVE.
Kdy to nasadit
Kdykoli měníš barvy šablony, tlačítek, štítků nebo bannerů a při každém novém pop-upu. A jednou projdi celý web, hlavně drobné písmo v košíku. Je to zdarma a jedno měření trvá pár vteřin.
Cena
Zdarma. Celé rozhraní se používá bez registrace a web žádný ceník neuvádí. Připravovaná aplikace pro Mac, Windows, iPhone a Android je zatím jen zápis zájemců, cenu výrobce neuvádí.
- Web: zdarmaBez registrace. Aplikace pro Mac, Windows, iPhone a Android je zatím jen zápis zájemců.
Ceník ověřen 18. 10. 2026, aktuální ceny u výrobce
Integrace a napojení
Výrobce žádný doplněk pro e-shopové platformy neuvádí. Není ani potřeba, nástroj běží v prohlížeči. Měříš barvy na hotovém webu nebo v návrhu. 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
- Nástroj porovná jen dvě barvy. Můj tip: u textu přes fotku nebo barevný přechod naber barvu z místa, kde je text nejhůř vidět.
- Kapátko výrobce u webové verze na stránce neuvádí. Funguje jen na počítači v Chrome, Edge a Opeře. Ve Firefoxu, Safari a na mobilu barvu zadáš ručně.
- Stránka píše, že kontrast 3:1 potřebují i neaktivní prvky rozhraní. WCAG je naopak z požadavku vyjímá. Okraj nebo výplň tlačítka či pole formuláře v běžném stavu má mít proti okolí 3:1, pokud podle nich prvek poznáš.
- Text, který je součástí loga nebo názvu značky, WCAG z požadavku na kontrast vyjímá. Ostatní texty v barvě loga ale musí projít.
- 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) a chce, aby web byl vnímatelný, ovladatelný, srozumitelný a stabilní. Ve WCAG 2.1 i 2.2 je pro běžný text 4,5:1.
- Dozor má Česká obchodní inspekce. Za nezajištění přístupnosti služby zákon umožňuje pokutu až 10 000 000 Kč. Právní posouzení tady neřeším, rozsah povinností konzultuj s právníkem.
Srovnání s alternativami
- Color.reviewTento nástroj
- 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
- Cena
- Zdarma
- Kapátko
- Jen výběr barvy v prohlížeči, kapátko výrobce neuvádí
- Co umí navíc
- Umí poloprůhledné barvy, u průhledného pozadí ukáže rozmezí
- WebAIM Contrast Checker
- Cena
- Výrobce cenu neuvádí, používá se rovnou na webu
- Kapátko
- Ano, přes výběr barvy v prohlížeči
- Co umí navíc
- Průhlednost, prvky rozhraní, odkaz na výsledek, API (napojení pro programátory)
- 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
- 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
- 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
- Coolors
- Cena
- Kontrola zdarma s reklamou, Pro 69 Kč měsíčně při roční platbě (828 Kč ročně)
- Kapátko
- Výrobce ho u kontroly kontrastu nezmiňuje
- Co umí navíc
- Barevné palety, kontrast celé palety v Pro, plugin do Figmy
- Stark
- Cena
- Contrast Checker ve Figmě zdarma, Premium Pack od 198 USD za uživatele ročně (min. 3 licence)
- Kapátko
- Výrobce ho u kontroly kontrastu nezmiňuje
- Co umí navíc
- Simulátor vad zraku, rozšíření do Chromu
Ceny a limity z ceníků výrobců, ověřeno 18. 10. 2026.
Alternativy a v čem se liší
- Contrast Ratio →
Taky zdarma a taky dvojice barev. Umí poloprůhledné barvy, u průhledného pozadí ukáže rozmezí. Kapátko výrobce neuvádí, barvu zadáš kódem nebo výběrem barvy v prohlížeči.
- WebAIM Contrast Checker
Navíc průhlednost barvy textu, hodnocení grafiky a prvků rozhraní (3:1), odkaz na výsledek a jednoduché API (napojení pro programátory). Doporučuje ho nápověda Shoptetu.
- 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 (napojení pro programátory, minimální nákup kreditů 10 USD) a další služby.
- 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.
- 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.
- Coolors
Kontrola kontrastu je jeden z nástrojů na barevné palety, zdarma s reklamou. Hodí se při výběru barev značky. Kontrast celé palety je až v Pro za 69 Kč měsíčně při roční platbě (828 Kč ročně).
- Stark
Kontrola přímo v návrhu ve Figmě nebo Sketchi. Contrast Checker ve Figmě je zdarma, automatické kontroly jsou v Premium Pack od 198 USD za uživatele ročně (nejméně 3 licence).
Časté otázky
Je Color.review opravdu zdarma?
Ano. Používá se bez registrace a web žádný ceník neuvádí.
Můžu kontrast nechat spočítat AI?
Můžeš, ale výsledek ověř. Na MasterMindu jsem nechal AI spočítat kontrast loga s přesným zadáním, aby si nevymýšlela. Vyšlo 3,87, Color Review ukázalo 3,8. Na kontrolu celého webu můžeš AI asistentovi dát odkaz na color.review, ať podle té metodiky web projde.
Platí to i pro tlačítka?
Okraj nebo výplň, podle kterých tlačítko nebo pole poznáš, musí mít proti okolí aspoň 3:1. Text na tlačítku se řídí pravidly pro text (4,5:1, u velkého 3:1). Neaktivní tlačítka WCAG z požadavku vyjímá.
Musí mít dostatečný kontrast i logo?
Ne. Text, který je součástí loga nebo názvu značky, WCAG z požadavku vyjímá. Když ale barvu loga použiješ na texty nebo odkazy, ty projít musí.
Proč nevidím kapátko?
Kapátko funguje jen na počítači v Chrome, Edge a Opeře. Ve Firefoxu, Safari a na mobilu barvu zadáš ručně, třeba jako hex kód.
Jak změřím text na fotce nebo v banneru?
Můj tip: kapátkem naber barvu pozadí přímo v místě, kde je text nejhůř vidět.
Týká se můj e-shop zákon o přístupnosti?
Zákon č. 424/2023 Sb. platí od 28. 6. 2025 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. Kdo pod zákon spadá, musí v obchodních podmínkách nebo obdobném dokumentu popsat, jak e-shop požadavky splňuje.
Co je na Shoptetu na mně a co hlídá Shoptet?
Podle nápovědy Shoptet upravuje platformu podle WCAG 2.1 a hlídá barvy, které v administraci měnit nejde. Na tobě jsou barvy z Návrháře šablon, barvy dostupností, příznaků produktů a slev a všechno, co vložíš sám, třeba bannery a texty.
Jak výsledek předám programátorovi?
Pošli mu odkaz ve tvaru color.review/check/barva-barva, například color.review/check/293845-FFFFFF. Otevře se se stejnými barvami.
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
- Color.review
- W3C: WCAG 2.2, kontrast textu (1.4.3)
- W3C: WCAG 2.2, kontrast prvků rozhraní a grafiky (1.4.11)
- MDN: podpora kapátka (EyeDropper API) v prohlížečích
- 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)
- Portál veřejné správy: přístupnost a Česká obchodní inspekce
- 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.