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.
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.
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é.
Č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.