Inkluzivní práce s barvami: Co to je, proč to dělat a jak na to

Volba barevné palety není jen estetickou volbou, protože barva často bývá klíčem k pochopení významu. Je proto důležité s barvami pracovat inkluzivně. V praxi to znamená řídit se 2 základními principy.

Existují 2 silné argumenty, proč se inkluzivní prací s barvami zabývat:

• V populaci je 9 % mužů a 0,4 % žen, jejichž vnímání barev ovlivňuje barvoslepost.
• Studie z března 2021 navíc naznačuje, že depresivní stavy snižují schopnost rozlišovat barevný kontrast. V populaci Evropské unie se přitom s chronickou formou deprese potýká přes 7 % lidí. Dva roky koronavirové pandemie navíc dále navýšily počet lidí, kteří mají s různě závažnými depresivními stavy zkušenost.

Pokud jako designéři volíme barevné palety, které nejsou přístupné lidem s odlišným vnímáním barev, dost možná jsou pro ně výsledky naší práce nepoužitelné.

Problém je to tím větší, čím „užitnější“ artefakt navrhujeme. Netýká se to jen webových stránek a aplikací, ale také například navigačních systémů v budovách nebo grafů a schémat v tištěných publikacích.

2 základní principy inkluzivní práce s barvami

Vodítka pro inkluzivní práci s barvami jsou přímočará:

1/ Vždy hledejte způsob, jak význam sdělení vyjádřit jinak než barvou

Člověk musí být schopný orientovat se na stránce, skenovat text nebo pochopit schéma bez ohledu na použité barvy. Ano, některým mohou barvy pomoct s orientací, skenováním nebo pochopením; ale nesmí tak činit za cenu toho, že jiným orientaci, skenování a pochopení ztíží nebo znemožní.

Problematické jsou často formuláře, zejména signalizace chyb. Pokud spoléhají pouze na barvu, mohou být pro některé lidi nesrozumitelné. [Příklad převzat z článku Accessible Interface Design]

2/ Dbejte na dostatečný kontrast mezi zvolenými barvami a odstíny

Klíčové je to zejména při volbě barvy textu a pozadí. Ale důležité je to například také u prvků webového a aplikačního rozhraní, na mapách, grafech a schématech.

Při výběru barev se lze řídit například metodikou Web Content Accessibility Guidelines, která doporučuje poměr kontrastu mezi barvou textu a pozadí minimálně 4,5 : 1, v některých případech i 7 : 1. [Příklad převzat z článku Accessible Interface Design]

Případovka: Mapa výstrah Českého hydrometeorologického ústavu

Český hydrometeorologický ústav má na svém webu mapu, na které znázorňuje, jaké části republiky jsou ohroženy nebezpečnými meteorologickými jevy:

Zelená barva znázorňuje běžnou situaci. Žlutá, oranžová a červená pak znázorňuje rostoucí míru ohrožení. Bílá signalizuje chybějící data. [Mapa je ilustrací všech možných stavů, nezachycuje žádnou skutečnou situaci.]

Na první pohled se volba barev jeví logicky. Co když se ale zaměříme na výše zmiňovaný kontrast mezi barvami? Nejrychlejší způsob, jak to ověřit, je převést mapu do odstínů šedi:

Najednou vůbec není jasné, které části republiky jsou v ohrožení. Na první pohled to dokonce vypadá, že oblasti s nízkým stupněm nebezpečí jsou na tom lépe než ty, kde je ve skutečnosti běžná situace.

Když barvy použité v mapě převedeme z RGB do HSL barevného modelu, získáme pro každou barvu 3 hodnoty — odstín (hue), sytost (saturation) a světlost (lightness). Právě světlost vyjádřená procenty je pak hodnota, která umožňuje snadno porovnávat kontrast:

Tři barvy z palety mají stejnou hodnotu (50 %) světlosti. Poměr kontrastu je tedy 1 : 1. Lidé, kteří jinak vnímají barvy, proto budou mít velké potíže je od sebe odlišit.

Jak mapu ČHMÚ udělat přístupnější

Grafickému zpracování mapy se dá z hlediska přístupnosti vytknout několik věcí:

• Barevná paleta obsahuje zbytečně moc barev. Celá mapa je vždy „vybarvená“, což znesnadňuje rychlé odlišení bezpečných a ohrožených lokalit.
• Zvolené odstíny mají nedostatečný poměr kontrastu.
• Přestože se jedná o barevnou škálu, kontrast není odstupňovaný tak, aby odrážel smysl škály (např. čím tmavší odstín, tím větší nebezpečí).
• Dva typy informací — míra ohrožení a chybějící data — jsou komunikována stejným způsobem = jednobarevným polem.

Řešením je:

• Běžný stav znázorňovat bílou barvou a vybarvovat jen ohrožené kraje.
• Nedostupnost dat znázorňovat šrafováním.
• Jednotlivé stupně ohrožení znázorňovat barevnou škálou, ve které mají všechny barvy stejnou hodnotu odstínu a sytosti; a ve které hodnota světlosti roste spolu se stupni ohrožení.

Výsledek může vypadat třeba takhle:

Mapa je dobře čitelná jak v barevné verzi, tak po převedení do odstínů šedi. [Mapa je ilustrací všech možných stavů, nezachycuje žádnou skutečnou situaci.]

Zajímá vás víc? Podívejte se na záznam Hovorů o designu

Ve videu se můžete těšit na 1/ více příkladů špatné a dobré praxe; 2/ detailní pohled na to, jak vypadaly jednotlivé kroky designového procesu při navrhování upravené podoby mapy — včetně tipů na online bezplatné nástroje; 3/ praktické tipy, jak snadno zapínat a vypínat režim odstínů šedi podle potřeby na iOS / MacOS.

Případně si také můžete přečíst některý z těchto článků:

• Color blindness: how to design an accessible user interface
• Designing UI with color blind users in mind
• Accessible Interface Design: Part 1: On Designing With Accessible Colors
• Communicating accessibility as needs to be met and not rules to be followed
• The Myths of Color Contrast Accessibility
• Accessible Palette: stop using HSL for color systems
• Why should you use HSL color representation in CSS?