Kontrola kontrastu WCAG: poměr dvou barev

Kalkulátor poměru kontrastu

Barvy zadejte jako hexadecimální hodnotu, například #1C5D4F, nebo je vyberte z palety prohlížeče.

Barva textu (popředí)

Formát #RRGGBB nebo #RGB.

Barva pozadí

Formát #RRGGBB nebo #RGB.

Výsledek podle WCAG 2.2

Požadavek	Minimální poměr	Výsledek
AA, běžný text [1]	4,5:1
AA, velký text [1]	3:1
AAA, běžný text [2]	7:1
AAA, velký text [2]	4,5:1
AA, grafické prvky a ovládací prvky [3]	3:1

Velkým textem se rozumí 18 pt (24 px) a více, nebo 14 pt (18,66 px) a více tučně. [1]

Jak se poměr počítá

Poměr kontrastu je (L1 + 0,05) / (L2 + 0,05), kde L je relativní jas světlejší a tmavší barvy. Hodnoty jdou od 1:1 (dvě shodné barvy) do 21:1 (černá na bílé). Definici i vzorec určuje WCAG. [7]

Co kontrola kontrastu neřekne

• Text nad obrázkem nebo přechodem má pod sebou mnoho barev. Změřte nejhorší místo, ne průměr.
• Neaktivní ovládací prvky a čistě dekorativní text jsou z požadavku 1.4.3 vyňaty. To je výjimka ve specifikaci, ne důvod je ignorovat při návrhu. [1]
• Stavy se počítají zvlášť: najetí myší, zaměření a aktivní stav mají vlastní barvy a vlastní poměr.
• Ohraničení polí formuláře, ikony a indikátor zaměření spadají pod 1.4.11 s prahem 3:1, ne pod 4,5:1. [3]
• Barva sama o sobě nesmí nést informaci. To řeší kritérium 1.4.1 a kontrolor kontrastu na to neodpoví.

WCAG 2.2 a úroveň AA

WCAG 2.2 je doporučení W3C a rozšiřuje WCAG 2.1 o devět nových kritérií. Úroveň AA je ta, kterou norma EN 301 549 v kapitole 9 přebírá z WCAG 2.1. Proti této normě se v praxi testuje; sama o sobě nedokládá, že web splňuje zákon. [4] [8]

Kontrolní seznam WCAG 2.2 AA: kritéria pro kontrast a zrak

• 1.4.3 Kontrast (minimální): text 4,5:1, velký text 3:1.
• 1.4.6 Kontrast (rozšířený) je úroveň AAA: 7:1 a 4,5:1.
• 1.4.11 Netextový kontrast: grafika a ovládací prvky 3:1.
• 1.4.1 Použití barev: barva nesmí být jediným nositelem informace.
• 1.4.4 Změna velikosti textu: 200 % bez ztráty obsahu a funkce.
• 1.4.12 Rozestupy textu: rozestupy musí jít změnit bez ztráty obsahu.
• 2.4.11 Zaměření není zakryté (nové ve 2.2, úroveň AA).
• 2.5.8 Velikost cíle (minimální): 24 x 24 px (nové ve 2.2, úroveň AA).

Co přibylo ve WCAG 2.2

Devět nových kritérií, z toho na úrovni AA: 2.4.11 Zaměření není zakryté (minimální), 2.5.7 Přetahování, 2.5.8 Velikost cíle (minimální) a 3.3.8 Přístupné ověření (minimální). Na úrovni A přibyla 3.2.6 Konzistentní nápověda a 3.3.7 Opakované zadávání. Kritérium 4.1.1 Syntaktická analýza bylo označeno za překonané. Na úrovni AAA: 2.4.12 Zaměření není zakryté (rozšířené), 2.4.13 Vzhled zaměření a 3.3.9 Přístupné ověření (rozšířené). [5]

WCAG 2.3 neexistuje

Hledá se často, ale žádná verze 2.3 vydaná není. Poslední vydanou verzí je WCAG 2.2. Další generace se připravuje jako WCAG 3.0 a zatím je to pracovní návrh W3C, ne standard, podle kterého by šlo dnes cokoli vyžadovat. [6]

Zdroje

• [1] W3C: WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum), Level AA.
• [2] W3C: WCAG 2.2, Success Criterion 1.4.6 Contrast (Enhanced), Level AAA.
• [3] W3C: WCAG 2.2, Success Criterion 1.4.11 Non-text Contrast, Level AA.
• [4] W3C: Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation.
• [5] W3C: What's New in WCAG 2.2.
• [6] W3C: WCAG 3 Introduction (W3C Working Draft, not a standard).
• [7] W3C: WCAG 2.2, relative luminance and contrast ratio definitions.
• [8] ETSI EN 301 549 V3.2.1, clause 9 (web), which adopts WCAG 2.1 Level AA.