Článek

Extrakce přístupné barevné palety z obrázku

Fotografie nebo vizuální podklad značky často obsahuje zárodek celého barevného systému. Extrakce tohoto zárodku, jeho přetvoření do použitelné palety a následné ověření oproti standardům přístupnosti vyžaduje tři odlišné kroky. Tento článek každý z nich pokrývá v pořadí: jak extrakce palety funguje pod kapotou, jak vybírat a upravovat barvy pro praktické použití, jak kontrolovat kontrast oproti prahům WCAG a jak odhalit páry, které se slévají pro barvoslepé uživatele.

Napsal Bastien Sulyan · Publikováno dne 29. června 2026

Jak se paleta extrahuje: vzorkování pixelů a kvantizace barev

Každý digitální obrázek je mřížka pixelů, z nichž každý nese barevnou hodnotu v prostoru jako RGB. Extraktor palety nekontroluje každý pixel zvlášť: fotografie s 2 megapixely obsahuje 2 miliony datových bodů, jejichž zpracování by bylo pomalé a vrátilo by tisíce mírně odlišných odstínů místo užitečné sady. Místo toho nástroj vzorkuje mřížku pixelů v pravidelných intervalech a sbírá reprezentativní podmnožinu. Ta je pak předána algoritmu kvantizace barev. Nejběžnějším přístupem je seskupení podobných barev pomocí metody shlukování, někdy nazývané median-cut nebo k-means dělení. Algoritmus zařadí každý vzorkovaný pixel do jednoho z pevného počtu košů na základě podobnosti barvy, pak vypočítá průměrnou barvu každého koše. Výsledkem je malý seznam, typicky 4 až 16 barev, který společně pokrývá dominantní vizuální tóny obrázku. Barvy vyskytující se jen v malých izolovaných oblastech mohou být přehlédnuty, což je očekávané chování, nikoli chyba.

Mřížka pixelů fotografie postupně agregovaná do šesti pevných barevných vzorků se šipkami označujícími krok shlukování, který slučuje podobné odstíny

Od surových dominantních barev k použitelné paletě

Surový výstup extraktoru palety je seznam barev seřazených podle četnosti, ale četnost sama o sobě paletu nevytváří. Fotografie lesa vrátí několik zelených, které jsou příliš podobné na to, aby se daly v uživatelském rozhraní použít jako odlišné akcenty. Praktická práce spočívá ve výběru a úpravě. Začněte identifikací jedné barvy jako primární: té, která je nejcharakterističtější a nejméně neutrální. Ze zbývajících barev hledejte nejvýše dvě, které kontrastují s primární a navzájem mezi sebou. Ty se stanou akcenty. Vše ostatní, včetně desaturovaných tónů, které extraktor často vrací ze stínů a středních tónů, může sloužit jako neutrální barvy pro pozadí a okraje. Jakmile máte tuto hrubou strukturu, téměř jistě budete muset upravit jednotlivé hodnoty. Nástroj color-converter umožňuje prohlédnout každou barvu v hex, RGB a HSL. HSL je zde obzvláště užitečné: můžete zachovat konstantní odstín a měnit světlost nebo sytost pro vytvoření těsnější nebo volnější rodiny bez opuštění stejné barevné rodiny.

Kontrola kontrastu: prahy WCAG pro čitelný text

Jakmile máte kandidátní barvy pro text a pozadí, musíte zkontrolovat, zda je kombinace čitelná. Pokyny pro přístupnost webového obsahu (WCAG) pro tento účel definují poměr kontrastu. Poměr porovnává relativní jas dvou barev: hodnota 1:1 znamená žádný kontrast (stejná barva na stejné barvě) a 21:1 je maximum (černá na bílé). WCAG 2.1 úroveň AA vyžaduje poměr alespoň 4,5:1 pro běžný text, a 3:1 pro velký text (18pt nebo 14pt tučně). Úroveň AAA stanovuje vyšší prahy 7:1 a 4,5:1. Jas nemusíte počítat ručně. Klíčové je, že barevný pár, který vám za dobrého osvětlení vypadá dobře, může klesnout pod 4,5:1 na obrazovce a pokyn existuje právě pro takový případ. Po extrakci a úpravě barev otestujte každý pár text-na-pozadí, který plánujete použít. Středně šedá barva, která se dobře čte na bílém pozadí, může zcela selhat na světle béžovém pozadí z vaší extrahované palety.

Dva barevné páry vedle sebe: jeden pár s označením poměru kontrastu 2,8:1 jako nedostatečný a druhý pár s 5,3:1 jako dostatečný pro běžný text WCAG AA

Barvoslepost: simulace toho, jak páry vypadají pro postižené uživatele

Přibližně 1 z 12 mužů a 1 z 200 žen má nějakou formu poruchy barvového vidění. Nejběžnějším typem je deuteranopie (snížená citlivost na zelenou), následovaná protanopií (snížená citlivost na červenou). Tritanopie (snížená citlivost na modrozelenou) je vzácnější. Pro každý typ vizuální systém mapuje určité vlnové délky na stejnou vnímanou barvu, kterou nepostižení diváci vidí jako odlišnou. Praktickým problémem pro paletu je, že dvě barvy, které vypadají pod normálním viděním zřetelně odlišně, se mohou pro barvoslepého uživatele splynout v jeden tón, takže jsou pro vyjádření rozdílu zbytečné, například použití pouze červené a zelené k signalizaci úspěchu a chyby. Spuštění simulace barvosleposti ukáže, jak paleta vypadá při stlačení postižených kanálů. Páry, které se slévají do téměř identické šedé nebo hnědé, jsou ty, které je třeba přehodnotit: buď zvyšte rozdíl světlosti mezi nimi, aby kontrast zůstal i bez rozdílu odstínu, nebo přidejte sekundární signál (tvar, popisek, vzor), aby barva nebyla jediným signálem.

Lokálně: color-palette, color-blindness a color-converter

Všechny tři kroky popsané v tomto článku lze dokončit bez odesílání obrázku nebo barev značky na jakýkoli server. Nástroj color-palette běží celý v prohlížeči: přetáhnete obrázek, lokálně vzorkuje pixely a vrátí dominantní barvy jako hex hodnoty. Žádný soubor není přenesen. Nástroj color-converter přijme hex kód a zobrazí stejnou barvu v RGB a HSL, abyste mohli cíleně upravovat světlost nebo sytost a přitom zůstat ve stejné rodině odstínů. Jak hex, tak převedené hodnoty existují jen na stránce. Nástroj color-blindness funguje opačným směrem: vložíte obrázek a nástroj na něm vykreslí simulace deuteranopie, protanopie a tritanopie vypočítané v prohlížeči. Pokud chcete ověřit paletu, a ne fotografii, nejprve své vzorníky exportujte nebo vyfoťte snímek obrazovky jako obrázek a ten pak vložte do simulátoru. Použitím tří nástrojů v pořadí, extrakce z obrázku, úprava v color-converter, export obrázku se vzorky a jeho ověření v color-blindness, pokryjete celý výše popsaný postup. Váš obrázek zůstává na vašem zařízení po celou dobu, což je důležité, pokud zdrojová fotografie obsahuje nepublikovanou vizuální identitu nebo dosud nezveřejněnou identitu klienta.

Nástroje v tomto článku

Časté dotazy

Kolik barev extraktor palety typicky vrací?

Většina nástrojů vrací ve výchozím nastavení mezi 5 a 16 barvami, ačkoli mnoho umožňuje nastavit počet. Méně vrácených barev znamená, že algoritmus musí seskupit více pixelů dohromady, což může sloučit odlišné, ale podobné tóny. Více barev může produkovat téměř duplicity, které se obtížně používají jako odlišné. Pro paletu uživatelského rozhraní je 6 až 8 barev obvykle praktickým výchozím bodem.

Může paleta extrahovaná z obrázku automaticky splnit kontrast WCAG?

Ne automaticky. Dominantní barvy ve fotografii jsou často středně světlé se střední svítivostí, které mají tendenci produkovat poměry v rozmezí 2:1 až 3:1 vůči sobě navzájem. Splnění prahu 4,5:1 pro běžný text obvykle vyžaduje zesvětlení hodnot pozadí nebo ztmavení hodnot textu nad rámec toho, co surová extrakce poskytuje. Extrakce vám dává výchozí bod; kontrola kontrastu vám říká, kolik úpravy je potřeba.

Zohledňuje poměr kontrastu WCAG barvoslepost?

Částečně. Vzorec svítivosti WCAG je založen na relativním jasu, nikoli na odstínu, takže vysoce kontrastní pár splňující 4,5:1 bude obecně rozlišitelný i pro barvoslepé uživatele, protože rozdíl světlosti je zachován. Dvě barvy s podobnou svítivostí, ale různými odstíny, jako červená a zelená při stejném jasu, však mohou projít kontrolou kontrastu na základě svítivosti a přitom být pro deuteranopy nerozeznatelné. Spuštění simulace barvosleposti je správným způsobem, jak odděleně od poměru kontrastu kontrolovat diferenciaci na úrovni odstínů.