Kontrola kontrastu WCAG: pomer dvoch farieb

Kalkulačka pomeru kontrastu

Farby zadajte ako hexadecimálnu hodnotu, napríklad #1C5D4F, alebo ich vyberte z palety prehliadača.

Farba textu (popredie)

Formát #RRGGBB alebo #RGB.

Farba pozadia

Formát #RRGGBB alebo #RGB.

Výsledok podľa WCAG 2.2

Požiadavka	Minimálny pomer	Výsledok
AA, bežný text [1]	4,5:1
AA, veľký text [1]	3:1
AAA, bežný text [2]	7:1
AAA, veľký text [2]	4,5:1
AA, grafické prvky a ovládacie prvky [3]	3:1

Veľkým textom sa rozumie 18 pt (24 px) a viac, alebo 14 pt (18,66 px) a viac tučne. [1]

Ako sa pomer počíta

Pomer kontrastu je (L1 + 0,05) / (L2 + 0,05), kde L je relatívny jas svetlejšej a tmavšej farby. Hodnoty idú od 1:1 (dve zhodné farby) do 21:1 (čierna na bielej). Definíciu aj vzorec určuje WCAG. [7]

Čo kontrola kontrastu nepovie

• Text nad obrázkom alebo prechodom má pod sebou veľa farieb. Zmerajte najhoršie miesto, nie priemer.
• Neaktívne ovládacie prvky a čisto dekoratívny text sú z požiadavky 1.4.3 vyňaté. To je výnimka v špecifikácii, nie dôvod ignorovať ich pri návrhu. [1]
• Stavy sa počítajú zvlášť: nabehnutie myšou, fokus a aktívny stav majú vlastné farby a vlastný pomer.
• Ohraničenie formulárových polí, ikony a indikátor fokusu spadajú pod 1.4.11 s prahom 3:1, nie pod 4,5:1. [3]
• Farba sama osebe nesmie niesť informáciu. To rieši kritérium 1.4.1 a kontrola kontrastu na to neodpovie.

WCAG 2.2 a úroveň AA

WCAG 2.2 je odporúčanie W3C a rozširuje WCAG 2.1 o deväť nových kritérií. Úroveň AA je tá, ktorú norma EN 301 549 v kapitole 9 preberá z WCAG 2.1. Voči tejto norme sa v praxi testuje; sama osebe nedokladá, že web spĺňa zákon. [4] [8]

Kontrolný zoznam WCAG 2.2 AA: kritériá pre kontrast a zrak

• 1.4.3 Minimálny kontrast: text 4,5:1, veľký text 3:1.
• 1.4.6 Zvýšený kontrast je úroveň AAA: 7:1 a 4,5:1.
• 1.4.11 Netextový kontrast: grafika a ovládacie prvky 3:1.
• 1.4.1 Používanie farieb: farba nesmie byť jediným nositeľom informácie.
• 1.4.4 Zmena veľkosti textu: 200 % bez straty obsahu a funkcie.
• 1.4.12 Rozostupy textu: rozostupy sa musia dať zmeniť bez straty obsahu.
• 2.4.11 Fokus nie je zakrytý (nové v 2.2, úroveň AA).
• 2.5.8 Veľkosť cieľa (minimálna): 24 x 24 px (nové v 2.2, úroveň AA).

Čo pribudlo vo WCAG 2.2

Deväť nových kritérií, z toho na úrovni AA: 2.4.11 Fokus nie je zakrytý (minimálne), 2.5.7 Pohyby ťahaním, 2.5.8 Veľkosť cieľa (minimálna) a 3.3.8 Prístupné overenie (minimálne). Na úrovni A pribudli 3.2.6 Konzistentná pomoc a 3.3.7 Opakované zadávanie. Kritérium 4.1.1 Syntaktická analýza bolo označené za prekonané. Na úrovni AAA: 2.4.12 Fokus nie je zakrytý (rozšírené), 2.4.13 Vzhľad fokusu a 3.3.9 Prístupné overenie (rozšírené). [5]

WCAG 2.3 neexistuje

Hľadá sa často, ale žiadna verzia 2.3 vydaná nie je. Poslednou vydanou verziou je WCAG 2.2. Ďalšia generácia sa pripravuje ako WCAG 3.0 a zatiaľ je to pracovný návrh W3C, nie štandard, podľa ktorého by sa dalo dnes čokoľvek vyžadovať. [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.