Archiv štítku: barvy

A11y Color Palette: nástroj pro měření kontrastu barev

Máte k dispozici paletu barev a potřebujete z ní vybrat takové kombinace, které jsou vzájemně dostatečně kontrastní? Šikovným nástrojem, který může tuto činnost usnadnit, během chvilky porovnat vzájemný kontrast zadaných barev a vyhodnotit jejich soulad s požadavky metodiky WCAG 2.1 na dostatečný barevný kontrast, je A11y Color Palette.

Požadavky na minimální kontrast

  • AA běžný / velký text: 4,5:1 / 3:1 – 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.
  • AA netextové objekty: 3:1 – pro prvky uživatelského rozhraní a grafické objekty je minimální kontrastní poměr 3:1
  • AAA běžný / velký text: 7:1 / 4,5:1 – minimální kontrastní poměr pro běžné písmo do velikosti 18 bodů nebo tučné písmo do velikosti 14 bodů je 7:1. Pro běžné písmo nad 18 bodů nebo tučné písmo nad 14 bodů je minimální kontrastní poměr 4,5:1.

Hodnoty AA a AAA vyjadřují míru důležitosti (hodnota AA v kontextu metodiky WCAG 2.1 odpovídá střední úrovni, hodnota AAA úrovni nejnižší).

Jak nástroj funguje?

Jeho použití je velmi jednoduché. Nástroj (nebo chcete-li jednoduchou webovou aplikaci) najdete na adrese a11yrocks.com/colorPalette/. Do editačního pole Colors (comma separated HEX) zadáte hexadecimální kód barev, jejichž vzájemný kontrast chcete porovnat (nástroj k nim automaticky přidá černou a bílou), potvrdíte tlačítko Create Palette a to je vše.

A11y Color Palette jako výsledek vrátí paletu dvojic barevných kombinací, které jsou seřazeny podle míry vzájemného kontrastu (čím jsou barvy vzájemně kontrastnější, tím jsou v tabulce výše). Kromě vizuální reprezentace obsahuje každá dvojice i informace textové:

  • 21:1 – hodnota kontrastního poměru
  • level of compliance – míra shody
    • AA normal / large – vyhovuje požadavku úrovně AA na minimální kontrast pro běžný text a velký text.
    • AA non-text – vyhovuje požadavku na minimální barevný kontrast pro prvky rozhraní a grafické objekty.
    • AAA normal / large – vyhovuje požadavku úrovně AAA na minimální kontrast pro běžný text a velký text.

Z takto nabídnutých výsledků je pak již poměrně snadné vybrat barevné kombinace, které jsou pro požadovaný účel (normální text, velký text, prvky rozhraní) dostatečně kontrastní.

Pokud bychom některou z barevných kombinací rádi použili, ale její vzájemný kontrast není dostatečný, můžeme k nalezení podobné, ale vyhovující kombinace, použít například tanaguru contrast finder.

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.

Paletton - Vision Simulation

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 tables - Contrast table

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.

Color Palette Accessibility Checker - Analysis

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.

color-palette-accessibility-checker-analysis

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.

Tanaguru Contrast Finder - formulář

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.

Tanaguru Contrast Finder - výsledky

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.

Kam dál?