Barvy v Power BI: Jak zlepšit UX a čitelnost reportu

Strukturální barvy jsou ty, které Microsoft v dokumentaci k report themes popisuje jako barvy uživatelského rozhraní — tedy barvy fontů, pozadí, tlačítek, rámečků a dalších prvků UI. Právě sem přirozeně patří i primární brandová barva klienta, stejně jako ji vidíme na firemních webových stránkách nebo v marketingových materiálech. Tato konzistentnost vytváří u uživatelů pocit důvěrnosti a prokazatelně zlepšuje adopci reportů — a to asi nikoho nepřekvapí.

💡 Jakob’s Law

Uživatelé tráví většinu času v jiných nástrojích a aplikacích než v Power BI. Přirozeně proto preferují, aby UX bylo napříč nástroji co nejpodobnější.

Jenže je tu jeden háček. Brandové barvy bývají často výrazné a na reportu by neměly dominovat na každém kroku. Jak říká Microsoft ve svém Fluent 2 design systému: „Vyhněte se nadměrnému používání brandových barev nebo jejich použití na velkých plochách — mohou narušit hierarchii a ztížit orientaci.“ Dobrým příkladem je uživatelské rozhraní Facebooku — jejich ikonická modrá se v UI objevuje pouze v logu a na klíčových akčních prvcích, zbytek rozhraní je neutrální. Výsledek? Barva nezahltí, ale přesto okamžitě poznáme, čí je to produkt.

Jak tedy můžeme vytvořit barevně vyvážený interface? Základem je vytvořit si barevnou škálu s několika odstíny primární barvy. Refactoring UI doporučuje 9 odstínů — to je dobrý výchozí bod. K sestavení škály osobně používám Figmu, ale poslouží i jakýkoliv jiný nástroj s HSL color pickerem.

Primární (brandová) barva by měla sedět přibližně uprostřed škály nebo mírně vlevo/vpravo podle toho, jak světlý či tmavý je její výchozí tón.

ℹ️ Proč HSL, ne HEX?
Odstíny se nejlépe vytváří v barevném modelu HSL (Hue, Saturation, Lightness), nikoliv přímou editací HEX kódů. V HSL stačí ponechat hodnoty Hue (tón) a Saturation (sytost) beze změny a plynule upravovat Lightness (světlost) — tím získáme přirozené, vizuálně konzistentní odstíny jedné barvy.

Umístěte brandovou barvu doprostřed škály → označte ji jako 500

Definujte krajní hodnoty → 900 (nejtmavší) a 100 (nejsvětlejší) úpravou Lightness v HSL color pickeru

ℹ️ Tip: Testovací textbox ve Figmě

Doplňte mezilehlé body → 300 a 700 (zhruba na půl cesty mezi 500 a krajními hodnotami)

Zbývající odstíny 200, 400, 600, 800 doplňte pocitově — není to matematická disciplína

Výsledný report pak nepracuje s jednou výraznou brandovou barvou, ale s celou škálou odstínů. Report zapadá do klientského brandu a zároveň splňuje principy správného UX.

Zde je ukázka části mockupu s využitím barev z modré barevné škály.

Na rozdíl od marketingových letáků a bannerů se uživatelé na reporty dívají pravidelně a dlouhodobě. Na billboard se díváme sekundy, na report klidně hodiny týdně — výběr barev proto musí být výrazně citlivější a střídmější.

Barva fontů je jednou z dimenzí typografie — vedle fontu, řezu a velikosti — a stejně jako ony by měla nést svůj díl informace. Pokud v celém reportu použijeme stejnou velikost i barvu písma, výsledkem bývá plochý, nepřehledný layout, který se hůř čte. Typografie by proto měla být součástí šablony (theme a blueprint) — aby byla konzistentní napříč stránkami i vizuály a aby vývojář nemusel u každého prvku znovu rozhodovat, jaký font, velikost a barvu použít. V praxi to znamená nejprve si definovat typické role textů (nadpisy, podnadpisy, popisky os, hodnoty…) a pro každou z nich stanovit font, řez, velikost a právě i barvu.

I když by logicky nejtmavší odstín primární barvy (900) mohl sloužit jako základní barva textu, v praxi preferuji některý odstín tmavě šedé přímo z color pickeru v Power BI, kvůli jednoduchosti použití. Doporučuji odstíny 5 nebo 6 z následujícího přehledu. Podnadpisy nebo popisky os pak mohou být ještě světlejší (např. 3 nebo 4).

Sémantické barvy fungují na bázi univerzálně sdílených asociací — červená znamená problém, žlutá varování, zelená pozitivní výsledek. V reportech je typicky uvidíme u čísel, ikon nebo indikátorů signalizujících pozitivní či negativní vývoj metrik.

Klíčové pravidlo: sémantické barvy musí mít jasný a konzistentní význam v celém reportu. Uživatel by nikdy neměl být nucen přemýšlet, co daná barva znamená — to rozhodnutí by měl udělat vývojář/designér jednou a pak ho důsledně dodržovat.

Při výběru sémantických barev platí několik zásad:

Odlišnost od ostatních barev. Sémantické barvy by neměly vizuálně splývat s brandovou barvou ani s datovými barvami v grafech. Pokud by například brandová barva klienta byla červená a vy tu stejnou červenou používáte i jako „negative“ indikátor, uživatel nebude vědět, co ta vyjadřuje. V takovém případě je lepší vybrat alespoň co nejvíce odlišný odstín dané barvy.

Kontrast a přístupnost. Červená a zelená jsou nejpoužívanější kombinací, ale zároveň nejproblematičtější z hlediska barvosleposti — červeno-zelená barvoslepost (deuteranopie) je nejrozšířenější forma poruchy barvového vidění. Vždy proto:

Zkontrolujte kontrast pomocí nástroje jako Adobe Color Contrast Checker (standard WCAG AA/AAA)

Ověřte, jak barvy vypadají pro osoby s poruchou barvového vidění

Nikdy nekomunikujte význam pouze barvou — vždy doplňte text, ikonu nebo jiný vizuální signál

V našem souboru theme.json sémantické barvy definujeme takto:

Toto nastavení se automaticky projeví v KPI vizuálech a waterfall chartech, kde Power BI tyto hodnoty využívá nativně. Pro ostatní vizuály lze na tyto barvy odkazovat přes DAX podmíněné formátování, aby byl report konzistentní.

Datové barvy mají jeden hlavní cíl: umožnit uživateli rychle rozlišit kategorie nebo datové řady v grafech. Barvy by proto měly být mezi sebou dostatečně odlišné, aby nedocházelo k záměně.

Nejčastější chyba
Jedna z nejčastějších chyb v Power BI je automatické použití primární brandové barvy jako výchozí barvy ve všech grafech. U jednoduchého reportu s jednou metrikou to může projít, ale u komplexnějšího dashboardu rychle narazíme.

Brandová barva má v reportu primárně vytvářet vizuální identitu — objevuje se v logu, tlačítkách, headeru. Neměla by automaticky nést datový význam. Pokud ji použijeme zároveň v grafech, tlačítkách, kartách i zvýrazněních, uživatel bude jednou barvou přehlcený a dashboard nebude barevně vyvážený.

ℹ️ Alternativní přístup: IBCS a život bez datových barev

International Business Communication Standards (IBCS) zastávají radikálně odlišnou filozofii: barvy jsou vyhrazeny výhradně pro důležité věci — konkrétně pro odchylky (variances). Grafy jinak zůstávají v černo-bílém provedení.

Místo barev IBCS rozlišuje scénáře pomocí výplňových vzorů. Barva se pak použije jen na variance — zelená pro pozitivní odchylku, červená pro negativní.

Čistý IBCS přístup má ale i limity — při porovnávání více kategorií narazíte rychle na problém, kdy jsou všechny sloučeny do stejné šedé a od sebe je neodlišíte. IBCS je tak spíše cenná inspirace než univerzální řešení: čím méně barev v grafech použijete, tím silnější signál každá z nich nese.

Nabízí se otázka — nestačilo by použít defaultní paletu Power BI, nebo převzít některou ze zavedených open-source sad jako IBM Carbon nebo Microsoft Fluent 2? Jsou navržené odborníky, testované na přístupnost a fungují dobře. Mimochodem tyto a další sady barev najdete na: Color Library for Data Visualization | Nudge BI.

Bohužel to není tak jednoduché. Předpřipravené palety jsou navrženy jako univerzální a nemusí ladit s konkrétní brandovou barvu klienta. Cílem je najít sadu datových barev, která:

• je dostatečně barevně pestrá pro rozlišení kategorií
• harmonicky ladí s brandovou barvou v UI
• splňuje požadavky na kontrast vůči pozadí (WCAG)
• nekoliduje se sémantickými barvami (červená/zelená)

Toto je přesně typ úlohy, kde se skvěle uplatní generativní AI, já na toto používám konkrétně Claude AI. Stačí popsat požadavky a nechat si navrhnout kandidátní paletu, kterou pak doladíte.

🤖 Příklad promptu:
Can you help me with data colors for the visuals? This is the main brand color: #2e1ec7. I don’t want to use it in the visuals at all, I just use it in the UI in a few buttons and logo etc. I would like you to suggest 8 colors that would fit nicely with this color on the color wheel. Keep in mind that the colors should have enough contrast against the white background for accessibility. Show me the colors in an image or HTML on the color wheel, how they are spread on it. Show the brand color there as well for illustration. Also, suggest an order that I should add to the theme.json file, so they are spread in a logical way — that when there are just 2 colors, they will be very far apart etc. You can get inspiration from the color distribution of Fluent 2’s data viz palette.

Výsledkem je sada barev přizpůsobená konkrétnímu brandu. Na první pokus nebývá paleta dokonalá — někdy je potřeba pár iterací: doladit barvy, které jsou si příliš podobné, upravit pořadí tak, aby nejpoužívanější kombinace (dvě barvy, tři barvy) vždy tvořily kontrastní dvojici, nebo vyloučit odstíny, které kolidují se sémantickými barvami.

Barvy v Power BI reportech nejsou jen estetická záležitost — jsou součástí komunikace s uživatelem. Špatně zvolené barvy zvyšují kognitivní zátěž, zpomalují pochopení dat a snižují důvěru v report. Dobře zvolené barvy naopak fungují tiše na pozadí: uživatel si jich téměř nevšimne, ale instinktivně ví, kam se dívat a co která barva znamená.

• Strukturální barvy ukotvují report v klientském brandu. Klíčem je nepracovat s jednou výraznou brandovou barvou, ale s celou škálou odstínů, která je vizuálně vyvážená a nezahltí uživatele.
• Sémantické barvy jsou vyhrazené výhradně pro signalizaci pozitivního a negativního vývoje. Musí být konzistentní, kontrastní a přístupné — a nikdy by neměly komunikovat význam pouze barvou bez doplňujícího textu nebo ikony.
• Datové barvy slouží k rozlišení kategorií v grafech. Neměly by splývat s brandovou barvou ani se sémantickými barvami a měly by harmonicky ladit s celkovým vizuálním stylem reportu. Generativní AI je dnes velmi efektivním pomocníkem při jejich sestavování.

Správná práce s barvami vyžaduje o trochu více přípravy na začátku projektu — sestavení škály, definice sémantik, výběr datové palety. Tento čas se ale mnohonásobně vrátí v podobě konzistentnějšího reportu a lepší uživatelské zkušenosti.

🔗 Zdroje

Nudge BI: Color Library for Data Visualization – Různé barevné sady pro datovou vizualizaci

Canva: Color wheel – Color theory a interaktivní color wheel

Refactoring UI: Building Your Color Palette – Detailní postup k vytváření barevných škál v UI