tigtools

Kontrola kontrastu

Zadejte barvu textu a barvu pozadí a zobrazte si kontrastní poměr WCAG, vyhovující úrovně a živý náhled.

Běží ve vašem prohlížeči Bez registrace

Kontrastní poměr

4.47:1

PožadavekPotřebujeVýsledek
AA, normální text4.5:1Nevyhovuje
AA, velký text3:1Vyhovuje
AAA, normální text7:1Nevyhovuje
AAA, velký text4.5:1Nevyhovuje
Komponenty UI a grafika3:1Vyhovuje

Velký text znamená alespoň 24px (18pt) běžné písmo nebo 18,66px (14pt) tučné.

Náhled

Běžný text o velikosti 16px. Rychlá hnědá liška skáče přes líného psa.

Malý text o velikosti 14px se při nízkém kontrastu hůře čte.

Velký text o velikosti 24px

Tučný text o velikosti 18,66px (14pt)

Tlačítko

Nejbližší vyhovující barva textu

Cíl
#767676 dosáhne na tomto pozadí poměru 4.54:1.

Průhledný text se před měřením smísí s pozadím; průhledné pozadí se smísí s bílou.

Jak používat

  1. Zadejte barvu textu (popředí) a barvu pozadí ve formátu HEX, rgb(), hsl() nebo jiném formátu CSS, případně použijte výběr barvy.
  2. Zjistěte kontrastní poměr a výsledek vyhovuje/nevyhovuje pro každý požadavek WCAG.
  3. Pokud požadavek nevyhovuje, vyberte cíl a použijte navrženou barvu, která zachovává odstín a mění pouze světlost.
  4. Pomocí „Prohodit“ zkontrolujte opačnou kombinaci, například světlý text na tmavém tlačítku.

Jak to funguje

Poměr vychází z definice WCAG 2.2: relativní jas každé barvy se vypočítá z jejích kanálů sRGB a poměr je (světlejší + 0,05) ÷ (tmavší + 0,05). Pohybuje se od 1:1 (shodné barvy) do 21:1 (černá na bílé).

Kontrolované požadavky: kritérium úspěšnosti 1.4.3 (AA) vyžaduje 4,5:1 pro běžný text a 3:1 pro velký text; 1.4.6 (AAA) vyžaduje 7:1 a 4,5:1; 1.4.11 vyžaduje 3:1 pro části uživatelského rozhraní a významové grafiky, jako jsou ohraničení vstupních polí a ikony. Velký text má alespoň 24 px běžného řezu nebo přibližně 18,66 px tučného řezu. WCAG nepovoluje zaokrouhlování nahoru, takže 4,49:1 nevyhovuje AA, i když je blízko; zde zobrazený poměr je zkrácený, nikoli zaokrouhlený.

Návrh zachovává odstín a chroma barvy textu v OKLCH a hledá nejbližší světlost, tmavší nebo světlejší, která splňuje cíl. Kontrastní poměr je jen jedním z faktorů čitelnosti: záleží také na tloušťce písma, velikosti a rozdílech ve vnímání barev. WCAG 2.2 je aktuální doporučení W3C, na které odkazuje většina zákonů o přístupnosti.

Příklady

Šedý text, který téměř vyhovuje

#777777 na bílé dává 4,48:1. To vyhovuje pro velký text a komponenty UI, ale nesplňuje AA pro běžný text. Nejbližší vyhovující šedá je přibližně #767676, která dosahuje 4,54:1.

Bílý text na tlačítku v barvě značky

Bílá na #ff8800 dává přibližně 2,4:1, což nesplňuje ani úroveň 3:1 pro velký text. Obvyklým řešením je ztmavit oranžovou nebo místo ní použít tmavý text; návrh ukazuje, jak tmavá by barva textu musela být.

Kontrola ohraničení pole formuláře

Světle šedé ohraničení #cccccc na bílé má přibližně 1,6:1. Podle kritéria 1.4.11 musí mít ohraničení, které identifikuje vstupní pole, poměr 3:1, takže je potřeba přibližně #949494 nebo tmavší.

Časté dotazy

Jaký kontrastní poměr potřebuji pro WCAG AA?

4,5:1 pro běžný text, 3:1 pro velký text (24 px, nebo 18,66 px tučné písmo) a 3:1 pro komponenty UI a významové grafiky. AAA zvyšuje požadavek pro text na 7:1 a pro velký text na 4,5:1.

Musí text loga nebo text neaktivního tlačítka vyhovovat?

Ne. WCAG vyjímá text v logách a názvech značek, čistě dekorativní text a text v neaktivních (vypnutých) komponentách uživatelského rozhraní.

Proč se můj výsledek mírně liší od jiného nástroje?

Některé nástroje poměr zaokrouhlují na jedno desetinné místo nebo nahoru. WCAG porovnává přesnou hodnotu, takže tento nástroj ořezává na dvě desetinná místa. Drobné rozdíly mohou také vznikat u barev zadaných s alfa kanálem.

A co nová metoda kontrastu APCA?

APCA je odlišná metoda navržená pro budoucí verzi WCAG. Není součástí WCAG 2.2, který tento nástroj měří a na který odkazují aktuální pravidla přístupnosti.

Soukromí

Barvy se kontrolují ve vašem prohlížeči. Nic se neodesílá ani neukládá.