Barevné nástroje FREE
Vybírejte, převádějte a generujte barvy, palety, škály a přechody, s kontrastem podle WCAG, přístupnými návrhy a simulací barvosleposti. Vše se počítá ve vašem prohlížeči.
Výběr a převody
Všechny zápisy
Technické údaje
Kontrast
APCA (návrh, doplňující informace)
APCA je percepční model kontrastu navržený pro WCAG 3. Dnes není požadavkem shody a od WCAG 2 se liší v obou směrech, proto se zobrazuje jako doplňující informace a nikdy jako splněno či nesplněno.
Jak to vypadá
Palety
Které dvojice jsou čitelné
Každá barva jako text na každé jiné. Číslo je poměr kontrastu podle WCAG; AA je 4,5:1 pro běžný text a 3:1 pro velký text a prvky rozhraní.
Zkopírovat paletu
Škály
Jedenáct stupňů postavených v OKLCH, aby skoky vypadaly rovnoměrně, a nejen byly rovnoměrnými čísly. Výsledek má tvar, který utilitní framework očekává na místě škály; je to řada tohoto nástroje, ne paleta žádného frameworku.
Upravit řadu
Přechody
Z obrázku
Přetáhněte sem obrázek, nebo nějaký vyberte
Čte se v této záložce a nikdy se nenahrává. Po opuštění stránky nic nezůstává.
Vnímání barev
Model toho, co dvojice barev ztrácí u běžných forem barvosleposti, spočítaný projekcí podle Vienota, Brettela a Mollona. Je to simulace, ne fotografie toho, co vidí konkrétní člověk.
Dvojice, které přestávají být rozlišitelné
Převzato z palety. Vypisují se jen dvojice, které se v normálním vidění zřetelně liší - dvě barvy, které si už tak jsou podobné, jsou návrhové rozhodnutí, ne nález.
Každý převod, každá paleta i každá hodnota kontrastu na této stránce se počítá ve vašem prohlížeči. Obrázek, který sem přetáhnete, se čte na plátně v této záložce a nikdy se nenahrává.
Co tato čísla znamenají a co ne
Spočítáno zde, podle zveřejněných vzorců
Převody se řídí CSS Color Level 4 včetně skutečné přenosové křivky sRGB, ne její aproximace, a kontrast se řídí definicí z WCAG 2.2. Dvojice barev, která splní požadavek na kontrast, ze stránky nedělá přístupnou stránku: kontrast je jedno kritérium úspěchu z mnoha a tento nástroj měří právě to jedno. Vše běží ve vašem prohlížeči a nic se nikam neodesílá.
FAQ
Odesílají se moje barvy nebo obrázky někam?
Ne. Každý převod, každá paleta, každá škála i každá hodnota kontrastu se počítá v této záložce. Obrázek se tu čte na plátně a nikdy se nenahrává; nedávné barvy a vaše paleta zůstávají v úložišti tohoto prohlížeče a obojí můžete smazat.
Proč OKLCH místo HSL?
Protože světlost v HSL je průměr kanálů, ne to, co měří oko. Otočte odstín v HSL o 120 stupňů a jeden ze tří výsledků vyjde viditelně tmavší než ostatní; udělejte totéž v OKLCH a všechny tři se čtou jako jedna rodina. Totéž platí pro řadu odstínů: stejně velké kroky světlosti v HSL se na koncích shlukují. HSL se přesto zobrazuje, protože je v něm napsáno velké množství kódu.
Znamená splnění kontrastní zkoušky, že je moje stránka přístupná?
Ne a formulace to tu říkají opatrně. Dvojice barev splňuje požadavek na kontrast. Kontrast je jedno kritérium úspěchu z mnoha - pořadí fokusu, popisky, cesty klávesnicí, pohyb a struktura jsou samostatná - a stránka s dokonalým kontrastem může být stále nepoužitelná. Použijte to k vyřešení otázky barev, ne celé otázky.
Co je APCA a proč je ve zvláštním panelu?
Je to percepční model kontrastu navržený pro WCAG 3. Modeluje, jak se kontrast při dané velikosti a tloušťce písma skutečně čte, což WCAG 2 nedělá, ale je to návrh a dnes se podle něj nic neměří. Postavit jej vedle verdiktů WCAG jako rovnocenný by zkreslilo obojí, proto je schovaný za rozbalením a říká, čím je.
Jak věrná je simulace barvosleposti?
Je to projekce podle Vienota, Brettela a Mollona, provedená v lineárním světle, což je obvyklý způsob modelování dichromasie. Ukazuje, co ztrácí DVOJICE barev, a to je otázka, na které záleží: zda jdou dvě věci od sebe stále odlišit. Je to model jedné formy této vady, ne fotografie toho, co vidí konkrétní člověk, a panel to říká.
Dá se vygenerovaná škála vložit do konfigurace mého frameworku?
Ano - export obsahuje tvar, který zapadne tam, kde utilitní framework očekává barevnou škálu, vedle vlastních vlastností CSS, proměnných SCSS a JSONu. Řada patří tomuto nástroji, je postavená v OKLCH z barvy, kterou jste zadali; není to paleta žádného frameworku a ani se tak nevydává.
Audit webu v roce 2026: kompletní checklist SEO, Core Web Vitals, přístupnosti a bezpečnosti
Kvalitní audit webu není jedno skóre z Lighthouse ani seznam desítek automatických upozornění. Měl by odpovědět na čtyři otázky: dokáže vyhledávač web správně najít a pochopit, dokáže uživatel bez problémů dokončit svůj úkol, je web dostatečně rychlý a nevystavuje provozovatele nebo návštěvníky zbytečným rizikům?
Chrome vs Firefox vs Edge vs Safari: co jsme se naučili při vydání 9 rozšíření prohlížeče
Devět rozšíření, čtyři prohlížeče a mnohem více než jeden soubor `manifest.json`. Ukazujeme, kde skutečně končí sdílený kód, proč Safari vyžaduje samostatný proces a které chyby odhalí až Firefox a obchody s rozšířeními.
Claude Code vs OpenAI Codex vs Gemini CLI: nejlepší AI agent pro programování v roce 2026
Claude Code, OpenAI Codex a Gemini CLI dokážou číst repozitáře, upravovat soubory a spouštět testy, ale byly navrženy pro odlišné způsoby práce. Porovnáváme kvalitu, benchmarky, bezpečnost, paralelní práci, rozšíření, ceny a soukromí.
Tvořte lepší web, rychleji.
Vytváříme software a řešení na míru vašim potřebám.