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.

About
Latest Posts

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)