Jak vybrat barvy pro grafický návrh s ohledem na přístupnost

Dostatečný barevný kontrast umožňuje – či usnadňuje – uživatelům čtení textů a seznámení se s obsahem webu. Netýká se – jak si hodně lidí myslí – jen uživatelů s poruchou barvocitu, ale dostatečně kontrastní a dobře čitelný text ocení každý návštěvník webu. Proto je velmi důležité vzít při grafickém návrhu kontrast v potaz a zvolit pro jednotlivé části webu takové barvy, které budou vzájemně dostatečně kontrastní.

Metodika WCAG 2.0 i česká Pravidla přístupnosti používají pro měření dostatečného vzájemného kontrastu barev algoritmus světelnosti a berou také kromě použitých barev v potaz i velikost písma. Minimální kontrastní poměr pro běžné písmo do velikosti 18 bodů nebo tučné písmo do velikosti 14 bodů je 4,5:1, pro běžné písmo nad 18 bodů nebo tučné písmo nad 14 bodů je minimální kontrastní poměr 3:1.

Nástrojů, jak testovat dostatečný kontrast, jsem zde na POSLEPU v minulosti už několik představil. Dnes přidám další, které mohou pomoci ne primárně při zpětné kontrole, zda jsou použité barvy vzájemně dostatečně kontrastní, ale už při výběru barev pro grafický návrh.

Paletton

První krok, který musíme udělat, je vybrat si barvy pro grafický návrh. K tomu nám může posloužit například Paletton od Petra Staníčka. Paletton nabízí jako jednu ze svých funkcí simulátor některých zrakových vad (Vision simulation), takže už přímo při návrhu designu a výběru barev si můžeme vyzkoušet, jak zvolenou kombinaci barev uvidí návštěvníci, kteří barvy vidí špatně nebo je nevidí vůbec.

Pro výběr barevných kombinací, které odpovídají požadavkům na minimální barevný kontrast, pak můžeme v Palettonu použít funkci Contrast Table. Najdeme ji pod odkazem Color Tables…, v dialogu Filter minimum contrast nastavíme hodnotu, kterou považujeme za minimální (WCAG vyžaduje 3 pro větší texty a 4,5 pro menší) a následně si v tabulce vybereme ty kombinace, které jsou dostatečně kontrastní a současně vyhovují našim záměrům.

Color Palette Accessibility Evaluator

Dalším nástrojem, který nám může pomoci při výběru vhodných barev, je Color Palette Accessibility Evaluator. Jeho ovládání je také velmi jednoduché: nejprve zadáme RGB kódy vybraných barev (pokud víme, že chceme mít text černou nebo bílou barvou, je dobré do výběru zahrnout i tyto barvy), v dalším kroku si vybereme, zda chceme testovat podle požadavků WCAG AA nebo AAA a necháme si vygenerovat paletu.

Nyní si vybereme jednu barvu a necháme si ji zanalyzovat, tzn. vygenerovat tabulku kontrastních poměrů této barvy oproti ostatním barvám.

V tabulce pak vidíme, které barevné kombinace jsou dostatečně kontrastní a je tedy možné je použít (tabulka s výsledky je rozsáhlejší, v náhledu je jen její první část).

Tanaguru Contrast-Finder

Poslední z dnes představených nástrojů pomáhá v situacích, kdy nám některá z barevných kombinací nesplňuje požadavky na minimální kontrast. Vhodnou barevnou kombinaci můžeme v takovém případě hledat buď ručně (může nám k tomu posloužit třeba Colour Contrast Analyzer) nebo můžeme nalezení vhodné kombinaci svěřit nástroji s názvem Tanaguru Contrast-Finder.

Ovládání nástroje je opět velmi jednoduché. Do formuláře zadáme barvy, které chceme otestovat, vybereme barvu, se kterou má možnost nástroj „hýbat“ (tedy měnit ji tak, aby v kombinaci s druhou barvou vyhovovala požadavkům na minimální kontrast), zvolíme, zda chceme jako výsledek větší rozsah barev, nebo jen ty, které jsou „blízko“ původní barvě, potvrdíme a je to.

Pak už jen stačí vybrat si z navržených barev tu, která se nám nejvíce líbí.

Závěr

A to je vše. Jak je z předchozích řádků zřejmé, výběr dostatečně kontrastních barev pro grafický návrh není při použití výše uvedených nástrojů nic složitého. Pokud tedy máte co do činění s barvami, zařaďte tyto nástroje do svého arsenálu. Chybu tím určitě neuděláte.

Radek Pavlíček

Radek se přístupnosti a speciální ICT pro uživatele s těžkým postižením zraku věnuje od roku 1998.Blog POSLEPU založil v roce 2007 a protože práce je mu koníčkem, stále jej baví na něj psát a udržovat ho aktivní a aktuální.

Latest posts by Radek Pavlíček (see all)