Kontrola kontrastu WCAG
Otestujte jakýkoli pár barev popředí a pozadí na kontrastní poměr WCAG 2,1 (1 až 21). Pro běžný text, velký text (18pt+ nebo 14pt tučné) a komponenty uživatelského rozhraní viz „prospěl/nevyhověl“ pro úroveň AA a AAA. Nezbytné před odesláním tlačítek, odkazů a štítků formulářů — mnoho palet značek selže, dokud neztmavíte text nebo zesvětlíte povrchy.
Barva textu
Barva pozadí
Aa Bb Cc — 123
Výsledek
16.12 : 1
AA — Prošlo
AA (velký text) — Prošlo
AAA — Prošlo
AAA (velký text) — Prošlo
Jak zkontrolovat kontrast barev
1. Zadejte nebo vyberte barvy popředí (textu) a pozadí.
2. Přečtěte si kontrastní poměr (např. 4,52:1).
3. Zkontrolujte řádky AA a AAA pro normální a velké velikosti textu.
4. Upravujte světlost HSL, dokud neprojde požadovaná úroveň, a poté zkopírujte hexadecimální hodnoty.
Příklady kontroly kontrastu
Hlavní text #374151 na #FFFFFF
Poměr ≈ 8,9:1 — vyhovuje AAA pro normální text (potřebuje 7:1). Pohodlné dlouhé čtení.
Světle šedá #9CA3AF na bílé
Poměr ≈ 2,6:1 — selhává AA pro normální text (potřebuje 4,5:1). Běžná chyba zástupného symbolu.
Primární tlačítko bílé na #2563EB
Poměr ≈ 4,6:1 — předá normální text AA; narazit na tmavší modrou pro AAA nebo velké použití.
Kdy tento nástroj použít
• Když auditujete tokeny návrhového systému před vydáním.
• Když opravíte zjištění přístupnosti z Lighthouse nebo Axe.
• Když zvolíte barvy odkazu, které se musí lišit od hlavního textu, nejen odstínem.
Kdy zvolit něco jiného
• Když potřebujete audit celé stránky — použijte automatické skenery na renderovaném modelu DOM.
• Při testování nejednotných pozadí (obrázky, přechody) — vzorujte pixely v nejhorším případě.
• Při simulaci barvosleposti — použijte specializované simulátory vidění.
Vysvětlení úrovní WCAG 2,1
Úroveň A je minimální; AA je právním cílem v mnoha jurisdikcích (ADA, EAA veřejný sektor). AAA je aspirací pro textovou kopii — velké nadpisy mohou projít AAA snadněji než 14px titulky. Viditelné indikátory zaostření (2.4.7) doplňují kontrast — uživatelé klávesnice potřebují viditelné zaostřovací kroužky, často 3:1 vůči sousedním barvám. U každého páru tokenů zdokumentujte ve svém návrhovém systému úspěšné/neúspěšné.
Oprava chyb bez přeznačení
Pokud značková fialová selže na bílé, neměňte odstín — ztmavte popředí o 5—10 % světlejších kroků nebo použijte fialovou pouze pro velké nadpisy. Zástupný text musí splňovat kontrast (4,5:1), nikoli pouze vstupní hodnoty. Deaktivované stavy mohou být vyjmuty z přísného kontrastu textu, ale neměly by předávat kritické informace pouze barvou. Spárujte tuto kontrolu s převodníkem barev pro rychlou iteraci HSL.
Časté dotazy
Jaký kontrastní poměr pro normální text WCAG AA?
Alespoň 4,5:1 pro normální text a 3:1 pro velký text (18pt+ nebo 14pt tučné).
Co pro AAA?
Normální text 7:1, velký text 4,5:1 — přísnější, často používaný pro vládní stránky.
Potřebují komponenty uživatelského rozhraní kontrast?
WCAG 2,1 vyžaduje 3:1 pro grafické objekty a hranice komponent uživatelského rozhraní (1.4.11).
Jak se vypočítá poměr?
Na základě relativní svítivosti barev sRGB: (L1 + 0,05) / (L2 + 0,05) kde L1 je světlejší.
Opraví podtržení odkazy s nízkým kontrastem?
Ne — stále je vyžadován kontrast. Podtržení pomáhá nebarevným podnětům, ale nenahrazuje pravidla poměru.
Odesílají se moje data na server?
Ne.
Je tento nástroj zdarma?
Ano.