Audit existující stránky na accessibility compliance. Design brand barev — ověřit, jestli text na primární barvě je čitelný. Compliance — WCAG 2.1 AA je požadavek pro EU public sector a US federal. Test, jestli dark mode barvy mají dostatečný kontrast.

Large text definice. 18pt regular nebo 14pt bold. Jiné fonty = jiné body size. Loga a UI komponenty. Jsou výjimkou. Logo nemusí splňovat contrast požadavky. Tlačítka. Border nebo background color tlačítka musí mít 3:1 vůči pozadí (graphic contrast). Hover stavy. I hover/focus/active musí mít dostatečný kontrast. APCA. Novější contrast algoritmus, který lépe modeluje skutečné vnímání. WCAG 3.0 ho přebírá.

WCAG Contrast Checker

Zkontroluj contrast ratio mezi dvěma barvami. Pass/fail verdikt pro WCAG AA a AAA při každé velikosti textu.

Foreground

Background

Výsledek

Aa — Large text 24px / 18px bold

Aa — Normal text 16px

Aa — Small text 12px

Vytvořil JXXR1 · ♥ Sponzorovat · ☕ Kup mi kávu

K čemu to slouží?

WCAG (Web Content Accessibility Guidelines) určují minimální contrast ratio mezi textem a pozadím pro čitelnost. AA: 4,5:1 (normální text), 3:1 (velký text). AAA: 7:1 (normální), 4,5:1 (velký). Tenhle nástroj spočítá ratio dvou barev a řekne ti, jestli splňují AA / AAA pro malý i velký text.

Kdy to použít

Audit existující stránky na accessibility compliance.
Design brand barev — ověřit, jestli text na primární barvě je čitelný.
Compliance — WCAG 2.1 AA je požadavek pro EU public sector a US federal.
Test, jestli dark mode barvy mají dostatečný kontrast.

Časté chyby

Large text definice. 18pt regular nebo 14pt bold. Jiné fonty = jiné body size.
Loga a UI komponenty. Jsou výjimkou. Logo nemusí splňovat contrast požadavky.
Tlačítka. Border nebo background color tlačítka musí mít 3:1 vůči pozadí (graphic contrast).
Hover stavy. I hover/focus/active musí mít dostatečný kontrast.
APCA. Novější contrast algoritmus, který lépe modeluje skutečné vnímání. WCAG 3.0 ho přebírá.