Svetlosivý text na bielom pozadí môže na prvý pohľad pôsobiť elegantne a minimalisticky — a pre používateľov so zrakovým postihnutím, so silným slnečným žiarením na obrazovke alebo len s obyčajným namáhaním očí na konci pracovného dňa môže byť úplne nečitateľný. Farebný kontrast je jedným z „najtechnickejších“ kritérií v prístupnosti – existujú presné čísla, ktoré treba splniť – ale je tiež jedným z najjednoduchších, ktoré sa dá vopred otestovať a opraviť.

Stručne povedané – čo zahŕňa táto príručka

  1. Aké pomery vyžaduje WCAG
  2. Prečo je pri veľkom texte povolený menší kontrast
  3. Ako skontrolovať kontrastný pomer v praxi
  4. Ako si vopred vybrať dostupnú paletu farieb

Aké pomery vyžaduje WCAG

WCAG definuje kontrastný pomer ako číslo medzi 1:1 (vôbec žiadny kontrast – rovnaká farba) a 21:1 (maximálny možný kontrast – čistá čierna na čisto bielej). Na úrovni AA (povinná úroveň na väčšine miest vrátane Izraela) je požiadavkou pomer medzi bežným textom a pozadím za ním aspoň 4,5:1. Pri prísnejšej úrovni AAA sa požiadavka zvýši na 7:1.

Prečo je veľký text povolený s menším kontrastom

Veľký text zostáva čitateľný aj pri nižšom kontraste, takže WCAG nastavuje ľahší prah: 3:1 na úrovni AA (namiesto 4,5:1) a 4,5:1 na úrovni AAA (namiesto 7:1). „Veľký text“ je definovaný ako text s veľkosťou 18 bodov alebo väčší (približne 24 pixelov) alebo 14 bodov alebo väčší (približne 18,7 pixelov), ak je tučný. Veľké nadpisy si napríklad môžu „dovoliť“ o niečo nižší kontrast ako bežný odsek tela a stále spĺňajú požiadavku.

Ilustračný diagram Porovnanie kontrastných pomerov Tri príklady textu na pozadí s rôznymi kontrastnými pomermi Kontrastný pomer medzi textom a pozadím Ukážkový text 1,8:1 – ✕ zlyhá Ukážkový text 7,1:1 — ✓ spĺňa aj AAA Ukážkový text 5,4:1 — ✓ spĺňa úroveň AA Bežný text: aspoň 4,5:1 · Veľký text (24 pixelov+ alebo 18,7 pixelov tučné): aspoň 3:1 Nástroje ako WebAIM Contrast Checker vám poskytnú presný pomer pred dokončením farebnej palety
Tri príklady textu na pozadí: príliš nízky pomer (1,8:1) zlyhá dokonca ani na základnej úrovni; ostatné dva pomery spĺňajú požiadavky AA a AAA.

Ako skontrolovať kontrastný pomer v praxi

Nie je potrebné to počítať ručne – bezplatné nástroje, ako je WebAIM Contrast Checker, vám umožňujú zadať kódy farieb textu a pozadia a okamžite získať presný pomer a skóre úspešnosti/neúspešnosti pre každú úroveň. Stojí za to skontrolovať nielen text na pevnom pozadí, ale aj text na obrázkoch na pozadí alebo prechodoch – kde sa kontrast medzi rôznymi oblasťami toho istého obrázka môže líšiť, takže je najlepšie otestovať „najproblematickejšie“ miesto.

💡 Praktický tip

Nielen text: rovnaká požiadavka na kontrast (pri jednoduchšom prahu, 3:1) platí aj pre grafické komponenty používateľského rozhrania, ako sú obrysy polí formulára, funkčné ikony a okraje tlačidiel – nielen pre písmená.

Ako si vopred vybrať dostupnú paletu farieb

Najúčinnejším prístupom je kontrola kontrastu vo fáze návrhu šablóny, nie v každom dokumente samostatne. Pri výbere farieb značky pre nadpisy, hlavný text a odkazy sa oplatí vopred potvrdiť, že každá kombinácia textu a pozadia, ktorú skutočne použijete, spĺňa aspoň pomer 4,5:1. Takto každý nový dokument vytvorený zo šablóny automaticky „zdedí“ správny kontrast, namiesto toho, aby sa každý dokument po napísaní kontroloval samostatne.

Chcete vedieť, či vaše dokumenty spĺňajú požiadavky na kontrast?

Náš nástroj kontroluje farebný kontrast ako súčasť automatického skenovania každého súboru PDF na vašej stránke.

Naskenujte svoju stránku zadarmo ←