Barva je jedním z nejsilnějších nástrojů v arzenálu designéra. Komunikuje identitu značky, vytváří hierarchii a vyvolává emocionální reakce. Ale pokud Vaše barevné volby vylučují lidi se zrakovým postižením, podkopáváte jak svůj dosah, tak své hodnoty. V Kosmowebu věříme, že přístupné barevné palety nejsou omezením kreativity — jsou rámcem, díky kterému design funguje pro všechny.
Proč na přístupnosti záleží
Přibližně jeden z dvanácti mužů a jedna z dvou set žen má nějakou formu deficitu barevného vidění. Přidejte situační omezení, jako je čtení obrazovky na jasném slunci nebo se sníženým jasem, a počet lidí ovlivněných špatnými barevnými volbami výrazně vzroste. Nepřístupné barevné palety nejenže nesplňují standardy — selhávají vůči skutečným lidem, kteří se Váš produkt snaží používat.
Přístupnost je v mnoha jurisdikcích také právní záležitost. Evropský akt o přístupnosti, který vstoupil v platnost v roce 2025, vyžaduje, aby digitální produkty a služby splňovaly specifické standardy přístupnosti. Firmy, které tyto požadavky ignorují, riskují jak právní odpovědnost, tak poškození pověsti. Navrhování s ohledem na přístupnost od začátku je mnohem levnější než dodatečná úprava hotového produktu.
Začněte kontrastem
Kontrastní poměr je základem barevné přístupnosti. Pokyny Web Content Accessibility Guidelines specifikují minimální kontrastní poměry 4,5:1 pro normální text a 3:1 pro velký text na úrovni AA. Shoda s AAA vyžaduje 7:1 a 4,5:1. Tyto poměry zajišťují, že text zůstane čitelný v široké škále zrakových schopností a podmínek prohlížení.
Kontrastní poměry kontrolujeme obsesivně během fáze designu. Nástroje jako WebAIM Contrast Checker a vestavěné inspektory přístupnosti v Chrome a Firefox DevTools to usnadňují. Když jsme navrhovali rozhraní pro pražskou platformu pro rezervaci coworkingových prostor, zjistili jsme, že naše původní brand zelená nesplňovala požadavky na kontrast oproti bílému pozadí. Místo opuštění barvy značky jsme ji ztmavili o dva odstíny, zachovali pocit značky a dosáhli AA shody u všech textových prvků.
Zvolte základní barvu
Paletu začněte jedinou základní barvou reprezentující Vaši značku. Z ní odvoďte škálu tintů a odstínů, které mohou sloužit různým funkčním rolím: primární akce, sekundární prvky, pozadí, okraje a text. Každá odvozená barva by měla být testována na kontrast vůči každému pozadí, na kterém se objeví.
Považujeme za užitečné budovat palety s alespoň pěti stupni od světlé po tmavou pro každý odstín. To poskytuje dostatek variací pro vytvoření vizuální hierarchie bez zavádění barev, které se bijí nebo nesplňují kontroly přístupnosti. Paleta není jen sbírka atraktivních barev — je to systém, kde byla každá kombinace ověřena z hlediska čitelnosti a jasnosti.
Pro neziskového klienta zaměřeného na environmentální vzdělávání jsme vytvořili paletu zakořeněnou v lesní zeleni. Nejsvětlejší tint sloužil jako jemné pozadí. Střední odstín byl použit pro ikony a dekorativní prvky. Nejtmavší odstín se stal primární barvou textu na světlém pozadí. Každé párování bylo otestováno a zdokumentováno před zahájením jakékoli designové práce.
Testujte různé kombinace
Kontrastní poměry Vám dávají metriku splnil/nesplnil, ale skutečná čitelnost závisí na více než číslech. Testujte barevné kombinace v kontextu, na skutečných rozloženích stránek se skutečným obsahem. Barevný pár, který projde kontrolami kontrastu, může stále vizuálně působit ostře nebo vytvářet nepříjemný vibrační efekt při použití pro tělo textu. Naopak pár, který hranici sotva splňuje, může fungovat dobře pro velké nadpisy, ale selhat pro drobné písmo.
Testujte při různých jasech obrazovky a na různých typech displejů. OLED obrazovka vykresluje barvy jinak než starší LCD panel. Notebook v osvětlené kavárně představuje jiné výzvy než desktopový monitor v tlumeně osvětlené kanceláři. Vytváříme testovací stránky s reprezentativním obsahem a distribuujeme je mezi členy týmu používající různá zařízení, abychom zachytili problémy, které automatizované nástroje přehlédnou.
Používejte palety přátelské k barvosleposti
Barva by nikdy neměla být jediným prostředkem sdělování informací. Pokud pole formuláře zčervená na indikaci chyby, doprovoďte tuto změnu barvy ikonou a textovou zprávou. Pokud graf používá barvy k rozlišení datových řad, přidejte vzorové výplně nebo přímé popisky. Tento princip převzatý z WCAG směrnice 1.4.1 zajišťuje, že význam je zachován, i když jsou barvy nerozlišitelné.
Simulujte deficity barevného vidění během designového procesu. Nástroje jako Stark, Sim Daltonism a filtry simulace vidění v Chrome DevTools Vám umožní vidět design tak, jak by ho viděl člověk s protanopií, deuteranopií nebo tritanopií. Tyto simulace provádíme u každého projektu a zachytili jsme problémy, které by bez nich zůstaly neviditelné. Na datovém dashboardu pro logistickou společnost byly naše původní červeno-zelené indikátory stavu nerozlišitelné při simulaci deuteranopie. Přešli jsme na modro-oranžové schéma s ikonami a dashboard se stal použitelným pro celý tým, včetně dvou zaměstnanců s poruchou barevného vidění.
Buďte opravdoví
Přístupný design není cvičení v odškrtávání políček. Je to závazek k budování produktů, které respektují plnou rozmanitost lidského vnímání. V Kosmowebu začleňujeme revize přístupnosti do každé fáze našeho designového procesu, od počátečního průzkumu palety přes závěrečné QA. Časová investice je skromná ve srovnání se šíří dopadu.
Začněte kontrastem, budujte systematicky, testujte důkladně a nikdy se nespoléhejte pouze na barvu pro sdělení významu. Tyto principy neomezí Vaši kreativitu. Zocelí ji tím, že Vám dají omezení, která tlačí k lepším, promyšlenějším designovým rozhodnutím. Přístupná barevná paleta je jednoduše dobrá barevná paleta — taková, která funguje pro co nejvíce lidí za co nejvíce podmínek.